Mobile Safari gets confused if you try to play a sound that's already playing

[jagthedrummer]

In mobile Safari if you call play on a sound that's already playing the status helpers show the sound as toggling to not playing and it gets stuck that way.

• play/pause button shows "play"
• tap "play"
• sound begins to play & play/pause button shows "pause"
• somehow call play on that sound again
• sound continues to play & play/pause button shows "play"
• tap "play"
• sound continues to play & play/pause button shows "play"
• there's now no way to pause the sound

To demonstrate you can stick an "always play" button right next to a normally configured button and the normal one will get stuck (only on mobile Safari as far as I can tell).

      <button {{on 'click' (toggle-play-sound @identifier)}}>
        {{#if (sound-is-playing @identifier)}}
          {{svg-jar 'pause-outline' height=20 width=30 title='Pause'}}
        {{else if (sound-is-loading @identifier)}}
          {{svg-jar 'loading-outline' height=20 width=30 title='Loading' class='animate-spin'}}
        {{else if (sound-is-loaded @identifier)}}
          {{svg-jar 'resume-outline' height=20 width=30 title='Pause'}}
        {{else}}
          {{svg-jar 'play-outline' height=20 width=30 title='Play'}}
        {{/if}}
      </button>

      <button {{on 'click' (play-sound @identifier)}}>
        {{svg-jar 'play-outline' height=20 width=30 title='Play'}}
      </button>

In mobile Safari tapping either button will start the sound. Tapping the first button will pause it. Tapping either button again will start it again. Tapping the second button will cause the first button to show that the sound has been paused even though it continues to play.

I realize this is a super weird edge case, and you obviously wouldn't put an "always play" button on a page. The way that this arose in my app is a little weird and it was easy enough to work around since I'm calling play in JS land, but just thought I'd report it since I ran into it.

My workaround:

if(!sound.isPlaying){
  sound.play();
}

(Fun fact: I ran into this in relation to the wavesurfer integration and trying to keep it and Ember Stereo in sync.)

[jkeen]

🎉 This issue has been resolved in version 4.2.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[jkeen]

🎉 This issue has been resolved in version 5.0.0-beta.12 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[jagthedrummer]

Sorry for the delay getting back to you on this @jkeen. It's not a big deal, but the problem is still reproducible for me on 4.2.3 and 4.3.0 under some circumstances. With the "always play" button it's still happening. But if I remove the workaround that I put in place when I first opened this issue it's not getting confused then. So my primary problem seems to be fixed, but the weird reproduction that nobody would probably do isn't. Or maybe there's something weird about my setup that's causing the problem. Dunno. Just wanted to report back. Thanks for the fix!

[jkeen]

🎉 This issue has been resolved in version 5.0.0-beta.20 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[jkeen]

🎉 This issue has been resolved in version 5.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀