CODEWITHSUNDEEP
javascripthtmlaudio
Robo Robok
Robo Robok

Reputation: 22683

HTML5 - Check if autoplay is allowed

My website plays background music with autoplay. I made it use my custom controls for play and pause. Now, I'd like to set the initial state according to what is going on. If the music is about to play for real, it should show pause icon, otherwise (e.g. on mobile) play icon.

I would use audio.paused boolean value, but it's always false before the audio is loaded.

I would use audio.autoplay value, but it's always true for me, even on devices that don't support it.

Is there any clean way to know whether the audio will be played? I would like to keep it in sync with autoplay attribute, so if I decided to remove it, the state should always show play icon in the beginning.

Upvotes: 1

Views: 2227

Answers (1)

Winchestro
Winchestro

Reputation: 2188

Just playing or even buffering songs isn't especially fair, when there is the slightest chance people can be on the site for other reasons, like for example to check for updates, to share the link. people can be on the page with a mobile network, with limited bandwidth and downloads of those sizes shouldn't ever start sneaky behind their back.

edit: a few additional references

Here is an overview over the reasons not to have music on autoplay

And contrary, a website I personally like a lot with a great use of background music on autoplay

But if you are already building your own player and want that to be a feature of the page, setting that player to autoplay would not only devalue your own work, totally break your design. Instead you could just trust that people who want to hear the music will identify your audio player and use it.

To fully implement your custom player GUI you may want to listen for all audio events on the player element and update your view accordingly. The event you are looking for is "canplaythrough" but you probably want to react to at least most of the other events too. Those events are:

You currently may do something along the lines of

view.showPlayButton();
player.play();

but that breaks as soon as you at some point want to toggle your player in some other way or something else happens, like it gets stalled, so better listen to the event and update your GUI in one place, and control the playback (like start / stop the player) in another.

Upvotes: -1

Related Questions