Web Playback SDK Playing song directly in browser issues (IOS/Safary)

[tufik2]

Hey guys, I am developing an app that integrates the Web Playback SDK, but I am having severe issues with IOS/Safari, all other browsers work well but when I test it in IOS/Safari, I can't hear anything.

Some people said that it is due to a Safari limitation that users need to interact with the page before, but after testing many different solutions I can't find a way that works, including using player.activateElement()...

Also, I am researching online examples but any works in IOS/Safari... but the weird is that Spotify's official web player, works well in IOS/Safari, so probably they use an updated version or their one's private implementation... Does any of you have a code example that works well in IOS/Safari or some tips that can help me to solve this issue?

------- Last Update

Now it is not working in:

MacOS: Ventura 13.3.1+

IOS: 16.4.1+

[muusic3]

I've faced same issue some months ago, and the solution is to invoke player.activateElement() on first window click event (ie: right after first user interaction with the page)

[tufik2]

No issue still there, for that reason I would like to check out a code example that really works... Is probably because the issue is new and SDK needs to be updated...
Here is the code where I am making tests... Will not work with any account because it is in development mode, so I will need to add testers' emails, but you can check the code. https://www.int-server-one.info/tests/spotify

Also, if any of you have some code that works in production and has a link or code to share will be nice...

[muusic3]

I think you're right, the code looks good...the issue might be with just iOS/Safari, as you initially reported

[c-hvkbq_ey7fa]

We've also run into this problem, and have concluded that activateElement() is ineffective against Safari's autoplay policy. This renders the Spotify Web Player broken on current versions of Safari, both Mac and iOS.

As a workaround, we've been able to make music play if the user clicks the play button twice, if in the click handler we call call not only player.activateElement() but also player.resume(). This is far from ideal of course, given the adverse effects on user experience.

I also checked the behaviour on a randomly selected existing website that uses the Web Playback SDK: https://www.sensesfail.camera/
On Chrome, music starts playing here when you click Access Camera. Not so on Safari. You have to click on the speaker icon afterward to have something play.

[tufik2]

Making more testing, and tried in a phone with IOS 16.4.0, I found that player works well, looks like issue start after update IOS to 16.4.1.

[muusic3]

Today I've managed to get it working for latest version of MacOS/Safari, by calling connect instead of activateElement on first user interaction (ie window click or keyup).

Previously I was calling connect on page load and then activateElement on first user interaction, this was working fine on Chrome but not on Safari.

Now, just calling connect on first user interaction, without the need to then call activateElement, it works both in Safari and Chrome

[tufik2]

Yes, Issue is only present in IOS/Safari, other systems/browsers works working well. Will be nice if someone in Spotify can check if they can do something for give support to IOS/Safari, or include a note in his documentation that indicate is no supported in iIOS/Safari, so we will have a support to show clients that issue is over us…

[c-hvkbq_ey7fa]

---

@muusic3 wrote:

Today I've managed to get it working for latest version of MacOS/Safari, by calling connect instead of activateElement on first user interaction (ie window click or keyup).

Previously I was calling connect on page load and then activateElement on first user interaction, this was working fine on Chrome but not on Safari.

Now, just calling connect on first user interaction, without the need to then call activateElement, it works both in Safari and Chrome

---

For me connect does not seem to be any more effective than activateElement. Calling either, or both, always results in an autoplay_failed event moments later no matter how many times I do it. Only by actually calling resume() does playback start - and even then on the second time it's clicked, not the first.

Observed on Safari 16.2 on Mac OS.

[c-hvkbq_ey7fa]

---

@tufik2 wrote:

Yes, Issue is only present in IOS/Safari, other systems/browsers works working well. Will be nice if someone in Spotify can check if they can do something for give support to IOS/Safari, or include a note in his documentation that indicate is no supported in iIOS/Safari, so we will have a support to show clients that issue is over us…

---

Agreed, this should be fixed by Spotify.

I may be wrong, but it seems apparent to me why it's broken by looking at the Web Playback SDK source code: activateElement() calls resume() on the AudioContext, but it does not call play() on the HTMLMediaElement. Both are needed to satisfy Safari's autoplay policy. Before play() on the element is called from a click handler at least once, it will always be rejected.

[tufik2]

Why I can't see the 8 Replies?

[gilbarbara · Accepted solution]

Hey!

I got it working after a couple of days.
The secret was to move the initialization to a function that runs after the "onSpotifyWebPlaybackSDKReady" callback.
By doing that, I didn't need to call activateElement at all.
Here's an example: https://xft9xl.csb.app/
Tested with Safari desktop and mobile.
You can check the source code and play with it.

[tufik2]

Hi @gilbarbara thanks for your reply, I made a fork of your code and changed client_id using mine, but it looks like the player is broken too, are you sure your iOS version is updated to the last version iOS 16.4.1?
I attached a video with my test and  screen recorded, player never starts the music and the button just switches automatically to play again after 1 second

[gilbarbara]

Hey @tufik2
Yeah, I'm using the latest iOS version.
Did you change your app redirect URL too?

Anyway, check the attached video.

[gilbarbara]

But it is unstable...
I changed my player library initialization to match the sandbox, but it still can't play on Safari desktop and mobile.
The initial API request to /play triggers the autoplay_failed, and the player togglePlay call has no effect.

[tufik2]

@gilbarbara, after changing the redirect_uri, start working. 
Sure, this issue should be fixed by Spotify including a better code that manages the new Safari auto-play policy, but that could take time (days or months, who knows)... So your code is a good base and lifesaver in the short term to overcome the bug. Thanks for your help, I will play more based on your code and put the code here if it is stable enough.

[c-hvkbq_ey7fa]

Thank you @gilbarbara, @tufik2

The sandbox code was very illuminating. After testing a few things, I found the solution in my app is that the Spotify.Player() constructor must be called in a click handler. As long as this is done, there's no need to call activateElement() and no need for the play() calls to be in a click handler.

In your Sandbox I think this works because of the extra token input step, which causes initPlayer() to be called in a React effect that itself happens because of the button click. If I change the sandbox code so that there's a token already set when the component first loads, the autoplay failure problem comes back.

So if this is all how it looks, I guess the main problem is that the Web Playback SDK documentation is wrong. It instructs to construct the Spotify.Player inside the onSpotifyWebPlaybackSDKReady callback, which does not work in Safari.

[tufik2]

Here I leave this small code with Spotify Playback working well in all Browsers/OS if someone has the same issue and arrives in this conversation searching for a solution... Also, I put an online version where any person can modify redirect_uri, client_id to test with his own credentials...

https://www.int-server-one.info/tests/spotify/

[shanewilliams29]

THANK YOU @c-hvkbq_ey7fa! Moving the Spotify.Player() constructor into a click handler fixed the issue for my web app on the latest Safari! None of the other answers here worked for me. Excellent work.

[TaliEscher]

Hello - we found the issue and just fixed, it should be working on Safari now.
Don't forget to clean your cache.
Cheers!