play_sound operation

[leastbad]

This PR proposes to add the ability to play sound via the HTML Audio API. I put this into the "Notifications" group, but "Browser Manipulations" is another one I'd consider.

cable_ready.play_sound(src: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/858/outfoxing.mp3").broadcast

There's a fair bit of smarts built-in to this implementation. First, it uses the worlds shortest viable MP3 (93 bytes!) to overcome Apple's annoying "click to play" constraint on Mobile Safari. This process should be transparent and invisible. It does this by capturing the first interaction with the page and using that to immediately start and then stop playback; this "unlocks" the DOM object used to play the sound, document.audio.

The canplaythrough event fires when the minimum viable amount of sound file has been downloaded to start playing.

I have rigged up the cable-ready:after-play-sound to emit either after the sound has finished playing, or immediately if the operation is cancelled.

If another sound request comes in while the first one is still playing, the first one stops. This can't be used to create a multi-track mixing system, sadly. I did look into adding selector support but the iOS constraint is extremely... constraining.

---

This PR contains some minor tweaks to existing operations where I moved their variable assignments below the before- callback, allowing developers to customize the operations in their handlers.

[julianrubisch]

Oh, the joys of the Web Audio API! 😁

next a Moog Ladder Filter implementation please 🙂

LGTM!

[thewatts]

It does this by capturing the first interaction with the page and using that to immediately start and then stop playback; this "unlocks" the DOM object used to play the sound, document.audio.

In working with Stimulus Reflex I stumbled upon this addition -

As someone who's building software for mobile/tablet users - I've run into this dozens of times during development - and initially thought it was a bug in the iOS 15 beta (but can reproduce on my iOS 14 device):

The forcing playback of an audio device in the browser on first interaction pauses playback on the device itself.

As an example: If someone is listening to music on their iPhone/iPad, and interacts with our product, it will pause playback of that music (to play the hidden document.audio file).

Additionally, this will continue to happen on each new page load.

As a user of the software, it creates a really disconcerting/confusing experience - as music playback stops for seemingly no apparent reason, and continues to do so after starting playback again (and another page is visited).

Is there some other workaround here that could be done? Or perhaps adding an "opt-in" for those who's software does want to use server pushed audio playback?

[thewatts]

Ahh, I missed that there's a fix for this. My apologies!

For anyone else who stumbles upon the PR that added the feature:

Here's a related issue with resolution: #111
And the PR to fix: #112

[leastbad]

The thing that sucks is that there's no way for any browser to know if there's other audio playing.

[thewatts]

Agree here.

In a Mac OS situation - you can have music playing, but an app can still trigger the playback of a sound (new mail notification, timer going off, etc).

I know a lot of folks are hoping that Apple invests more time into iOS Safari - bring it up to speed with other mobile browsers.

🤞