Is There Any Workaround (Or Hack) to Make the Audio Autoplay on Chrome, Firefox and Safari

const audio = new Audio("https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3");
// wait for the DOM to loadwindow.onload = () => {
  // play audio on click  const clickToPlay = document.querySelector('#click-to-play');  clickToPlay.onclick = () => audio.play();    // play/pause audio on hover  const hoverToPlay = document.querySelector('#hover-to-play');  hoverToPlay.onmouseover = () => audio.play();  hoverToPlay.onmouseout = () => audio.pause();}

/* just some styling, not useful for the solution */#click-to-play {  padding: 1em;  background-color: steelblue;}#click-to-play:hover {  cursor: pointer;}#hover-to-play {  padding: 1em;  background-color: lightblue;}#hover-to-play:hover {  cursor: crosshair;}

<div id="click-to-play">  Click to play</div><div id="hover-to-play">  Hover in to play, hover out to pause</div>

Video auto play is not working in Safari and Chrome desktop browser

The best fix I could get was adding this code just after the </video>

<script>
    document.getElementById('vid').play();
</script>

...not pretty but somehow works.

UPDATE
Recently many browsers can only autoplay the videos with sound off, so you'll need to add muted attribute to the video tag too

<video autoplay muted>
...
</video>

Autoplay audio on mobile safari

There is no chance to get autoplay working in mobile browsers. Android and iOS doesn't allow it and personally I think that is a feasible confinement! Imagine every second website you will open plays and ugly sound at start!

But you can make a little hack, so that the user will not remark that he currently started the audio for your application:

1. You WILL need an user interaction to start your audio. So, your app or game maybe has a startscreen or a welcome button which needs a click to get to mainmenu or start the game. Bind to an user event (the accepted events are: "click", "touchend", "doubleclick" and "keydown") and call the load() method for your <audio>.

2. Bind to the "canplaythrough" event of the <audio>. This event is triggered when your source is ready to play. Here you can now call play(), pause() or wait for other interactions. So the audio is ready but now you have full controll when to start or stop the sound.

3. I also advise you to use audio sprites on mobile clients. iOS (and Android?) internally implemented audio support through a Singleton. That means that you cannot, like in desktop browser, have 10 audio elements and play differents sound at once. You can only play one file!
   So changing the source for different sounds takes to much time. With an audio sprite you can start your sprites when the user first interact with your website or game. Pause your sprite and when you need to play sound you have to set the currentTime to the beginning of the sprite and pause the sprite when currentTime of your file reaches the end of your sprite. There is an timeupdate Event where your can check the currentTime of your sprite.

If you are more interested I can prepare my javascript audio sprites player for you!!

How to autoplay in IE using <audio> tag

Setting the autoplay attribute should not call the load algorithm on the MediaElement. So if for the media network state is already set to HAVE_ENOUGH_DATA, the steps to check if the autoplay flag is set to true will already have been executed and setting this attribute should do nothing at that time.

In other words, just setting this attribute should not make the media to play if set too late. You'd need to trigger the load algorithm again, or simply call your MediaElement's play() method:

$(document).on('click', '.play', function(){

  $('#effectTada')
    .attr('autoplay', true)
    .get(0).play();

});

HTML5 Audio can't play through Javascript unless triggered manually once

Well, for my purposes, here's what I did:

Luckily, before the user can trigger the behavior to start audio, they have to click a button. I set the volume of the element to 0.0, and have it "play" when they click this button.

After the sound is played silently, I simply set the volume property back to 1.0, and it plays without user intervention just fine.

---

Related Topics