Skip to content

Instantly share code, notes, and snippets.

@gfscott
Last active February 14, 2023 14:21
Show Gist options
  • Save gfscott/32eba1b6453e54cd5fd8 to your computer and use it in GitHub Desktop.
Save gfscott/32eba1b6453e54cd5fd8 to your computer and use it in GitHub Desktop.
Wordpress function to switch auto-embed Soundcloud player from large "visual" version to "mini"
<?php
/////////////////////////////////////////////////////////////////////////////////////
// Ask Wordpress to Embed Soundcloud’s Mini Player Instead of the Large Visual Player
/////////////////////////////////////////////////////////////////////////////////////
// Add function to theme’s functions.php file
// Relevant documentation:
// https://wordpress.org/support/topic/hookfilter-for-auto-embed-function-of-wp
// https://wordpress.org/support/topic/filter-hook-for-built-in-oembed-providers-eg-youtube
// https://developers.soundcloud.com/docs/oembed
function soundCloud_mini_embed($html, $url) {
// Only use this filter on Soundcloud embeds
if(preg_match("/soundcloud.com/", $url)) {
// array of patterns to find in the oembed iframe html
$patterns = array();
$patterns[0] = "/visual=true/"; // true means a big image background
$patterns[1] = "/show_artwork=true/"; // true means show the track artwork
$patterns[2] = "/ height=\"\d+?\"/"; // height of standard embed is in the 400-pixel range. Just look for any height integer
$patterns[3] = "/ width=\"\d+?\"/"; // width of standard embed in Wordpress seems to be a fixed pixel width. Look for any integer
// array of replacements to make for these patterns
$replacements = array();
$replacements[0] = "visual=false"; // turn off big image background
$replacements[1] = "show_artwork=false"; // turn off track artwork
$replacements[2] = " height=\"166\""; // set iframe height to 166 pixels, the embed standard for the Soundcloud mini player
$replacements[3] = " width=\"100%\""; // set iframe to full width instead of fixed pixel dimension
// prophylactic ksort to make sure that all patterns and replacments will line up regardless of what order they're input
ksort($patterns);
ksort($replacements);
// one function to do all the find and replace
$html = preg_replace($patterns, $replacements, $html);
// return the html string and save to database or output
return $html;
}
}
// hook into the Wordpress oembed filter
add_filter('embed_oembed_html', 'soundCloud_mini_embed', 10, 3);
?>
@badfeather
Copy link

Thanks for this!

Playlists were looking like single tracks, so I added a conditional to check for /sets/ in the url and change the height to 300px:

      $replacements[2] = " height=\"166\""; // set iframe height to 166 pixels, the embed standard for the Soundcloud mini player
      if (preg_match("/sets/", $url)) {
	      $replacements[2] = " height=\"300\""; // set iframe height to 300 pixels if it's a playlist
      }

@cezarignat
Copy link

Hey man, great resource. Just wanted to suggest the same thing @olimax said a few years back. It needs line 39 moved to where line 41 is now. Otherwise other embeds don't work!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment