soundcloud / soundcloud/api

SoundCloud iframe embed with new URN does not redirect to playlist in mobile app

Open
#432 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

widget
Dominant language
JavaScript
Stars
254
Forks
53
PR merge metrics
No merged PRs in 30d

Description

Issue:
Based on my testing, the iframe embed code using the new URN scheme is not compatible with the mobile app.

Details:
When tapping “Play on SoundCloud” on mobile, the app opens but does not redirect to the playlist.
However, the iframe embed code without the new URN scheme works correctly on the mobile app.

Image Image

The functions I used for testing:

function display_soundcloud_media($content) {
    global $post;
    if (!is_singular() || !isset($post)) {
        return $content;
    }
    
    // Get the original post ID for WPML compatibility
    $original_post_id = apply_filters('wpml_object_id', $post->ID, 'post', false, 'en') ?: $post->ID;
    
    $media_content = '';
    
    // Fetch SoundCloud meta data using the original post ID
    $soundcloud_ids = get_post_meta($original_post_id, 'soundcloud', true);
    if (empty($soundcloud_ids)) {
        return $content;
    }
    
    // Ensure it's an array for consistent processing
    $soundcloud_ids = is_array($soundcloud_ids) ? $soundcloud_ids : array($soundcloud_ids);
    
    foreach ($soundcloud_ids as $id) {
        // Process only the modern URN format (e.g., "soundcloud:playlists:...")
        if (!empty($id) && strpos($id, 'soundcloud:') === 0) {
            
            // Extract only the last part (numeric ID) from the URN
            // For example: "soundcloud:playlists:1957271" -> "1957271"
            $parts = explode(':', $id);
            $numeric_id = end($parts);
            
            // Construct the API URL using only the numeric ID
            $api_url = 'http://api.soundcloud.com/playlists/' . $numeric_id;
            
            // URL-encode the entire API URL for the player's 'url' parameter.
            $player_url_param = rawurlencode($api_url);
            
            $media_content .= <<<EOT
                <div class="soundcloud-wrapper">
                    <link rel="preconnect" href="https://i1.sndcdn.com" />
                    <link rel="preconnect" href="https://wave.sndcdn.com" />
                    <link rel="preconnect" href="https://widget.sndcdn.com" />
                    <p class="audios">
                        <iframe loading="lazy" width="100%" height="500" scrolling="yes" frameborder="no" allow="autoplay; fullscreen" src="https://w.soundcloud.com/player/?url={$player_url_param}&show_user=false&sharing=true&show_artwork=false&show_comments=true&show_playcount=false&dnt=1&download=true"></iframe>
                    </p>
                </div>
EOT;
        }
    }
    // Prepend the SoundCloud HTML to the content
    return $media_content . $content;
}

// DOES NOT WORK!
function display_soundcloud_media_NEW($content) {
    global $post;
    if (!is_singular() || !isset($post)) {
        return $content;
    }
    
    // Get the original post ID for WPML compatibility
    $original_post_id = apply_filters('wpml_object_id', $post->ID, 'post', false, 'en') ?: $post->ID;
    
    $media_content = '';
    
    // Fetch SoundCloud meta data using the original post ID
    $soundcloud_ids = get_post_meta($original_post_id, 'soundcloud', true);
    if (empty($soundcloud_ids)) {
        return $content;
    }
    
    // Ensure it's an array for consistent processing
    $soundcloud_ids = is_array($soundcloud_ids) ? $soundcloud_ids : array($soundcloud_ids);
    
    foreach ($soundcloud_ids as $id) {
        // Process only the modern URN format (e.g., "soundcloud:playlists:...")
        if (!empty($id) && strpos($id, 'soundcloud:') === 0) {
            
            // Construct the API URL, assuming the type is always "playlists".
            // The full URN ($id) is appended to the path.
            $api_url = 'http://api.soundcloud.com/playlists/' . $id;
            // URL-encode the entire API URL for the player's 'url' parameter.
            $player_url_param = rawurlencode($api_url);
            
            $media_content .= <<<EOT
                <div class="soundcloud-wrapper">
                    <link rel="preconnect" href="https://i1.sndcdn.com" />
                    <link rel="preconnect" href="https://wave.sndcdn.com" />
                    <link rel="preconnect" href="https://widget.sndcdn.com" />
                    <p class="audios">
                        <iframe loading="lazy" width="100%" height="500" scrolling="yes" frameborder="no" allow="autoplay; fullscreen" src="https://w.soundcloud.com/player/?url={$player_url_param}&show_user=false&sharing=true&show_artwork=false&show_comments=true&show_playcount=false&dnt=1&download=true"></iframe>
                    </p>
                </div>
EOT;
        }
    }
    // Prepend the SoundCloud HTML to the content
    return $media_content . $content;
}
// Attach the function to 'the_content' filter
add_filter('the_content', 'display_soundcloud_media', 6);

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the two PHP functions in the issue and compare the generated SoundCloud player URLs for the legacy identifier and the new URN. Reproduce the “Play on SoundCloud” flow in the mobile app, then determine whether the API or iframe integration needs a change; done means the new URN redirects to its playlist.

Written by the indexing model from the issue text.

Assessment

Tech stack
php
Domain
api
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.