CODEWITHSUNDEEP
javascripthtmlwordpressaudio
Ash Catchum
Ash Catchum

Reputation: 1

Playing audio after the page loads

I need audio to play when the website loads. Website on WordPress. Required to play in all browsers, including Chrome. I tried different methods, but it didn't work.

Solution from here - https://www.codespeedy.com/play-audio-after-page-load-in-javascript/

And

   <audio autoplay><source src="song.mp3" type="audio/mpeg">

and

<EMBED SRC="music.mp3" AUTOSTART=TRUE LOOP=TRUE WIDTH=20 HEIGHT=20 >

p.s. I know that playing audio at the start of a page is not a good idea in most cases, but in my case it's ok.

Upvotes: 0

Views: 1395

Answers (1)

esqew
esqew

Reputation: 44711

I need audio to play when the website loads.

For purposes of good user experience, this is no longer possible in modern browsers. With extremely limited exception, you’ll need to have some sort of user interaction with your site first before being able to play any video or audio content. See MDN's Autoplay guide for media and Web Audio APIs#Autoplay availability (emphasis mine):

As a general rule, you can assume that media will be allowed to autoplay only if at least one of the following is true:

  • The audio is muted or its volume is set to 0
  • The user has interacted with the site (by clicking, tapping, pressing keys, etc.)
  • If the site has been allowlisted; this may happen either automatically if the browser determines that the user engages with media frequently, or manually through preferences or other user interface feature
  • If the autoplay feature policy is used to grant autoplay support to an <iframe> and its document.

Otherwise, the playback will likely be blocked. The exact situations that result in blocking, and the specifics of how sites become allowlisted vary from browser to browser, but the above are good guidelines to go by.

For details, see the auto-play policies for Google Chrome and WebKit.

Note: Put another way, playback of any media that includes audio is generally blocked if the playback is programmatically initiated in a tab which has not yet had any user interaction. Browsers may additionally choose to block under other circumstances.

As for why this is, MDN also includes a good explanation on HTMLMediaElement.autoplay:

Note: Sites which automatically play audio (or videos with an audio track) can be an unpleasant experience for users, so it should be avoided when possible. If you must offer autoplay functionality, you should make it opt-in (requiring a user to specifically enable it). However, autoplay can be useful when creating media elements whose source will be set at a later time, under user control.

p.s. I know that playing audio at the start of a page is not a good idea in most cases, but in my case it's ok.

I would challenge this wholeheartedly. Autoplaying content is nearly universally undesirable and awful UX, especially with audio where there isn't any visual feedback for the user to discern where the audio is coming from or how to pause/mute it. For the good of your users' ability to use your site, please reconsider this requirement. It's not "ok" "in [your] case" simply because you declare it so, especially considering a very large body of UX research has determined the opposite is true of autoplaying A/V content.

Upvotes: 2

Related Questions