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

[amrutadotorg]

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.

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);

[dpreussler]

@amrutadotorg thanks for reporting this. We did some changes that should fix this. Can you recheck and let us know?

[amrutadotorg]

Still the same issue (tested on iPhone 16).

Steps to reproduce:
1. On a mobile device, go to https://learnsahajayoga.org/.
2. In the menu, click Install (this installs the PWA app).
3. On the main screen, scroll to the Discover a talk of Shri Mataji section and click Discover.
4. Below, you’ll find the embedded SoundCloud list. Click Play on SoundCloud.

Expected behavior:
The SoundCloud mobile app should open with the desired playlist.

[dpreussler]

thank you, having this example to reproduce will help @amrutadotorg