Widget API Play issue with Instagram In-App Browser

Hello!

I'm testing the Widget API on various browsers to make sure it's working properly and for some reason it doesn't work on Instagram in-app browser. This is driving me crazy. Am I missing something? Is there a special "hack" I have to apply on play()?

The Widget API works fine on the following tested browsers:

Desktop (Windows) Chrome Firefox Edge Opera

Mobile (Android) Chrome Firefox Edge Opera Samsung Internet Facebook In-App Browser

Steps to reproduce:

1. Upload an html file to your server with the below code:

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex, nofollow">
</head>

<body>
    <iframe id="soundcloud_widget"
        src="https://w.soundcloud.com/player/?url=https://api.soundcloud.com/users/1539950/favorites" width="100%"
        height="400px" scrolling="no" frameborder="no" allow="autoplay"></iframe>

    <br><br>
    <button id="play" type="button">Play</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script src="https://w.soundcloud.com/player/api.js"></script>
    <script>
        $(document).ready(function () {
            var widget = SC.Widget(document.getElementById('soundcloud_widget'));
            widget.bind(SC.Widget.Events.READY, function () {
                console.log('Ready...');
            });

            $('#play').click(function () {
                widget.play();
            });
        });
    </script>
</body>

</html>

2. Add the link of the above page on your Instagram profile link field. 3. Then go to your profile page and click on your link to open it with Instagram in-app browser and press the custom "Play" button under the embedded player.

soundcloud / api

Widget API Play issue with Instagram In-App Browser #233

Steps to reproduce: