Open
Description
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.