0

I'm trying to add autoplaying music to a tumblr theme, but Chrome and Firefox both prevent autoplaying audio by default. How do I circumvent this?

Currently, to hear the autoplaying music, a user would have to change their personal browser settings to allow autoplay. Is there a workaround I can use to make the page play audio even if they have sound set to automatic (in Chrome) or autoplay blocked (in Firefox)?

Tumblr themes allow HTML, CSS, and Javascript, so I'd be happy for a solution using any of those. Ideally I would like my autoplay solution to allow multiple songs in a playlist, if possible.

I tried adding an invisible iframe, but that didn't work; I'm not sure whether it was the third-party audio player I'm using, or just that the iframe technique doesn't work at all anymore.

jimathel
  • 11
  • 4
  • 2
    It is a user setting and you cannot overwrite user settings for obvious reasons. Despite that, you should not attempt to hack it as it would make up for a very poor UX. – tacoshy Oct 29 '22 at 14:52
  • hey folks maybe this thread can help https://stackoverflow.com/questions/50490304/how-to-make-audio-autoplay-on-chrome – Vikhrama Oct 29 '22 at 18:56

3 Answers3

2

You can't circumvent auto-play from being blocked. There has to be some user interaction before the audio can play. This is the same for both HTML <audio> element as well as the web-audio API's audioContext

There's some reading about this on MDN Autoplay guide for media and Web Audio's API

Fishbite
  • 144
  • 12
0

I do not think there is a way around autoplay being deactivated until there is user interaction. I was working on a project with similar problem and I decided to put a "begin" button on it to direct the user to click it. By clicking it (click event listener), they would have satisfied an interaction and it would then play my animations and audio.

Sonnto
  • 1
  • 2
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Neha Soni Dec 16 '22 at 11:50
-1

You can try to play the audio on javascript onload. Example:

HTML:

<audio controls id="horseAudio">
    <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
    <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

JavaScript:

window.onload = function (){
    document.getElementById("horseAudio").play();
}
Pr77Pr77
  • 44
  • 6