IOS devices / safari/ chrome does not play when using .load from event

[michelson]

Hi there, first, thanks for this library, it's awesome.

I have a platform that uses audiowavesurfer. I have a problem when I send an event to the player in order to activate the .playPause().

When I click the button here I send an event that is received by another instance of awf

it works ok on desktop but on ios devices I'm receiving this error

As I've read on other issues this may be due to the promises implementation on the load?

Wavesurfer.js version(s):

6.2.0 / 6.3.0

Browser and operating system version(s):

IOS chrome / safari

The error can be reproduced in this page: https://rauversion.com/tracks/97 , note that it will fail only on ios devices, desktop works ok.

my implementation is here:
https://github.com/rauversion/rauversion-phx/blob/main/assets/js/hooks/player.js
the event handling triggers this function:
https://github.com/rauversion/rauversion-phx/blob/main/assets/js/hooks/player.js#L54-L68

what I noted is that this fails when I use wave.load(audio_url, dataPeaks), if I don't change the audio and just keep the previous audio then the playPause works ok. so, is there a hack to load audio tracks properly for these browsers?

this fails

      this.url = this.el.dataset.playerUrl
      console.log("wave", this._wave)
      const data = JSON.parse(this.peaks) 
      this._wave.load(this.url, data) <-- here is where it fails
      this._wave.playPause()

this works

      // just play the current track
      console.log("wave", this._wave)
      this._wave.playPause()

Thanks

[michelson]

Hi there, do you have some ideas about what could be causing the error?
Maybe with some hints, I could explore the base code and try to fix it.
Also, is there any chance to get some consulting from wavesurfer experts?
best

[michelson]

Hi @katspaugh, I think this is still an issue.

[katspaugh]

I’ve never seen this error. Need to debug.
Update:

I've reproduced the issue in desktop Safari. After googling a bit, it looks like it's related to security restriction in Safari.
The problem is that you're loading the audio when the user presses the play button. If you load the audio simply on page load, and play on play button, it should go away.

See this for details: https://arrangeactassert.com/posts/how-to-fix-the-request-is-not-allowed-by-the-user-agent-or-the-platform-in-the-current-context-possibly-because-the-user-denied-permission/

[michelson]

Hi @katspaugh, I will try this and get back with feedback; thanks for reopening this.

[michelson]

mi issue here is that I have two players, the dummy player at the top, which sends a message to the player at the bottom,
The player on the bottom is fixed across the navigation like the one at SoundCloud, so the player on bottom will load the tracks dynamically when user hits other buttons on the UI.

the event that triggers the load and play is something like this:
window.addEventListener('phx:play-song', this.playSongListener)

The playsong listener does this:

    this.playSongListener = (e) => {
      console.log("PLAY SONG", e.detail)
      setTimeout(()=>{
        this.destroyWave(); //<- remove any previous this.wave
        this.initWave();  //<- created the this._wave & loads 
        this._wave.playPause() // the error is generated here
      }, 400)
    }

  initWave(){
    this.peaks = this.el.dataset.playerPeaks
    this.url = this.el.dataset.playerUrl
    this._wave = WaveSurfer.create({...})
    this._wave.setVolume( window.store.getState().volume )
    const data = JSON.parse(this.peaks) 
    this._wave.load(this.url, data)

The error is generated by playPause(), and this is:

Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

I've tracked the error and this goes down to MediaElement.js:

I have also tried the trick that is mentioned in the article, like this:

        this.initWave();

        this._wave.mediaContainer.querySelector("audio")
        .addEventListener('canplaythrough', () => {
          console.log('loaded audio');
          this.playSong()
        });

but it does not work, probably I'm doing it wrong. do you have any hints? I'm just clueless :(

[katspaugh]

Maybe try adding autoplay: true instead of calling playPause().
wavesurfer.backend.media.autoPlay = true

[michelson]

Hi @katspaugh, The solution that you propose does not work.

I've tried:

    this._wave.mediaContainer.querySelector("audio")
    .addEventListener('canplaythrough', () => {
      console.log('loaded audio');
      this._wave.backend.media.autoPlay = true
    });

Also this one, which works on chrome because I'm also using this.playsong() but it has the same issue on Safari Ios:

    this._wave.mediaContainer.querySelector("audio")
    .addEventListener('canplaythrough', () => {
      console.log('loaded audio');
      this._wave.backend.media.autoPlay = true
      this.playSong()
    });

[katspaugh]

AFAIU, autoplay needs to be set on the media element even before it loads.

In any case, your issue has nothing to do with wavesurfer. It’s a restriction on iOS/Safari and the way you structured your app’s UI. I’m afraid I can’t help further.

[michelson]

Hi there @katspaugh I think I have solved this by doing some changes on my implementation.

I think My error was that I was removing instances and created new ones instead of loading the files on the same instance.
The only issue here is that when I change the track it loads the file but it plays the last audio for a while, until the other loads and then it plays correctly. I think that's because I'm doing the play just after the load:

  this._wave.stop()
  this._wave.load(this.el.dataset.playerUrl, JSON.parse(this.el.dataset.playerPeaks))
  this._wave.play()

is there a proper way to call the play properly? like some specific event that will listen for the changed/loaded file.

I'm still using version 6.2.0 btw , the great thing is that it finally worked on the IOS

best

[michelson]

this is version 6.x btw

[katspaugh]

Time to upgrade.

[michelson]

Hi @katspaugh, I'm testing the player with alpha .18. As the loading now it is working, I'm getting a noticeable performance issue where the player playhead starts to get unsync or get stuck. I have put this codesandbox where you can see the error:

https://codesandbox.io/s/busy-glade-5k9jlc?file=/src/index.js

do you know if this is a known issue in the alpha version? or I'm doing something wrong?

[michelson]

I think the issue can be solved by putting a setTimeout(() => w.load(file), 200); when loading.

[katspaugh]

Why the alpha? The latest is beta.11.