Web Playback SDK works locally but not on web server

[AttilaTheFun]

I'm trying to test the web playback SDK with a slightly modified version of the Quickstart tutorial.

I'm using Safari (I know this was not originally supported, but Safari added EME support about 15 months ago in version 13.1.) https://developer.mozilla.org/en-US/docs/Web/API/Encrypted_Media_Extensions_API

I can get playback to work with the file locally in Safari but when I try to host the same file on my web server, the same song never plays and resuming doesn't work.

I have attached the html file, screenshots of the logs, and I'm hosting that same html file at https://snag.chat/spotify-test.html.

[ohej]

The issue you are seeing here is caused by autoplay being blocked by default by most browsers.

For some reason if you run a file locally in Safari autoplay seems to be enabled, but as soon as it's being served from a server Safari will block autoplay. If you try to open the file locally in Firefox you should see an icon next to the address bar that states that autoplay is being blocked and no audio will play. Chrome doesn't report issues around autoplay but the result is the same.

The only way you can work around this is by having a button on the page that the user interacts with that initiates the play.

Long story short: The code you have inside the event listener for 'ready' needs to be executed at the request of the user (by interacting with the page).

[AttilaTheFun]

Interesting - would calling the "play" function from the "onClick" listener from a button be sufficient? How does it determine what is initiated by user interaction and what counts as autoplay?

Also I think it would be helpful to myself and many other members of the community if the QuickStart example was expanded a bit to include a play button that actually triggers playback. I think right now it just sets up a device and logs to the console when it's ready.

[AttilaTheFun]

Update: I tried calling the play function from a button's onClick listener with the same result - it works locally in Safari but when I host it on my web server it just loads, tries to play, and then pauses.

You can see the updated html and JS here:
https://snag.chat/spotify-test.html

https://snag.chat/spotify-test.js

[tomjaimz]

Hey Atilla.

Add a call to player.resume() in your playWithPlayer function, after the fetch call.

When you make the fetch call in playWithPlayer you're telling Connect that you want your player to play a certain URI, but in order to act on that, there is a network round trip, so Safari sees the command to actually play as coming from the Spotify servers and not from the user - this is seen as autoplay so Safari blocks it.  You need to directly tell the player instance to play without this roundtrip - and you can do that by calling player.resume() during the click action.  Then the audio element should be activated and you can interact with it as normal.