Audio autoplay is working in Mozilla, Microsoft Edge and old Google Chrome as well but not in new Google Chrome.
They have blocked the autoplay. is there any way to make it audio autoplay in Google Chrome?
This question is related to
google-chrome
html5-audio
i used pixi.js and pixi-sound.js to achieve the auto play in chrome and firefox.
<script>
PIXI.sound.Sound.from({
url: 'audios/tuto.mp3',
loop:true,
preload: true,
loaded: function(err, sound) {
sound.play();
document.querySelector("#paused").addEventListener('click', function() {
const paused = PIXI.sound.togglePauseAll();
this.className = this.className.replace(/\b(on|off)/g, '');
this.className += paused ? 'on' : 'off';
});
}
});
</script>
HTML:
<button class="btn1 btn-lg off" id="paused">
<span class="glyphicon glyphicon-pause off"></span>
<span class="glyphicon glyphicon-play on"></span>
</button>
it also works on mobile devices but user have to touch somewhere on the screen to trigger the sound.
Just add this small script as depicted in https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio
<head>
<script>
window.onload = function() {
var context = new AudioContext();
}
</script>
</head>
Than this will work as you want:
<audio autoplay>
<source src="hal_9000_sorry_dave.mp3">
</audio>
<embed src="silence.mp3" type="audio/mp3" autostart="true" hidden="true">
<audio id="player" autoplay controls><source src="source/audio.mp3" type="audio/mp3"></audio>
With this solution, the open/save dialog of Internet Explorer is also avoided.
<embed src="http://deinesv.cf/silence.mp3" type="audio/mp3" autostart="true" hidden="true">
<audio id="player" autoplay controls><source src="https://freemusicarchive.org/file/music/ccCommunity/Mild_Wild/a_Alright_Okay_b_See_Through/Mild_Wild_-_Alright_Okay.mp3" type="audio/mp3"></audio>You could use <iframe src="link/to/file.mp3" allow="autoplay">, if the origin has an autoplay permission. More info here.
As of April 2018, Chrome's autoplay policies changed:
"Chrome's autoplay policies are simple:
Autoplay with sound is allowed if:
Also
Chrome's developer site has more information, including some programming examples, which can be found here: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
I add controls attribute too tag audio, and simply hide it in CSS. And all works fine in Chrome.
<audio autoplay loop controls id="playAudio">
<source src="audio/source.mp3">
</audio>
Use the Autoplay attribute in HTML to autoplay the audio or video.
<audio id="player" autoplay controls><source src="0.mp3" type="audio/mp3"></audio>
Google changed their policies last month regarding auto-play inside Chrome. Please see this announcement.
They do, however, allow auto-play if you are embedding a video and it is muted. You can add the muted property and it should allow the video to start playing.
<video autoplay controls muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
You may simply use (.autoplay = true;) as following (tested on Chrome Desktop):
<audio id="audioID" loop> <source src="path/audio.mp3" type="audio/mp3"></audio>
<script>
var myaudio = document.getElementById("audioID").autoplay = true;
</script>
If you need to add stop/play buttons:
<button onclick="play()" type="button">playbutton</button>
<button onclick="stop()" type="button">stopbutton</button>
<audio id="audioID" autoplay loop> <source src="path/audio.mp3" type="audio/mp3">
</audio>
<script>
var myaudio = document.getElementById("audioID");
function play() {
return myaudio.play();
};
function stop() {
return myaudio.pause();
};
</script>
If you want stop/play to be one single button:
<button onclick="PlayStop()" type="button">button</button>
<audio id="audioID" autoplay loop> <source src="path/audio.mp3" type="audio/mp3">
</audio>
<script>
var myaudio = document.getElementById("audioID");
function PlayStop() {
return myaudio.paused ? myaudio.play() : myaudio.pause();
};
</script>
If you want to display stop/play on the same button:
<button onclick="PlayStop()" type="button">Play</button>
<audio id="audioID" autoplay loop> <source src="path/audio.mp3" type="audio/mp3">
</audio>
<script>
var myaudio = document.getElementById("audioID");
function PlayStop() {
if (elem.innerText=="Play") {
elem.innerText = "Stop";
}
else {
elem.innerText = "Play";
}
return myaudio.paused ? myaudio.play() : myaudio.pause();
};`
</script>
In some browsers audio may doesn't work correctly, so as a trick try adding iframe before your code:
<iframe src="dummy.mp3" allow="autoplay" id="audio" style="display:none"></iframe>
<button onclick="PlayStop()" type="button">Play</button>
<audio id="audioID" autoplay loop> <source src="path/audio.mp3" type="audio/mp3">
</audio>
<script>
var myaudio = document.getElementById("audioID");
function button() {
if (elem.innerText=="Play") {
elem.innerText = "Stop";
}
else {
elem.innerText = "Play";
}
return myaudio.paused ? myaudio.play() : myaudio.pause();
};
</script>
If you're OK with enclosing the whole HTML <body> with a <div> tag, here is my solution, which works on Chrome 88.0.4324.104 (the latest version as of Jan., 23, 2021).
First, add the audio section along with a piece of script shown below at the start of <body> section:
<audio id="divAudio">
<source src="music.mp3" type="audio/mp3">
</audio>
<script>
var vAudio = document.getElementById("divAudio");
function playMusic()
{
vAudio.play();
}
</script>
Second, enclose your whole HTML <body> contents (excluding the inserted piece of code shown above) with a dummy section <div onmouseover="playMusic()">. If your HTML <body> contents are already enclosed by a global <div> section, then just add the onmouseover="playMusic()" tag in that <div>.
The solution works by triggering the playMusic() function by hovering over the webpage and tricks Chrome of "thinking" that the user has done something to play it. This solution also comes with the benefit that the piece of audio would only be played when the user is browsing that page.
I've been banging away at this today, and I just wanted to add a little curiosum that I discovered to the discussion.
Anyway, I've gone off of this:
<iframe src="silence.mp3" allow="autoplay" id="audio" style="display:none"></iframe>
<audio id="audio" autoplay>
<source src="helloworld.mp3">
</audio>
This:
<audio id="myAudio" src="helloworld.mp3"></audio>
<script type="text/javascript">
document.getElementById("myAudio").play();
</script>
And finally this, a "solution" that is somewhat out of bounds if you'd rather just generate your own thing (which we do):
<script src='https://code.responsivevoice.org/responsivevoice.js'></script>
<input onclick='responsiveVoice.speak("Hello World");' type='button' value='Play' />
The discovery I've made and also the truly funny (strange? odd? ridiculous?) part is that in the case of the former two, you can actually beat the system by giving f5 a proper pounding; if you hit refresh repetetively very rapidly (some 5-10 times ought to do the trick), the audio will autoplay and then it will play a few times upon a sigle refresh only to return to it's evil ways. Fantastic!
In the announcement from Google it says that for media files to play "automatically", an interaction between the user and the site must have taken place. So the best "solution" that I've managed to come up with thus far is to add a button, rendering the playing of files less than automatic, but a lot more stable/reliable.
At least you can use this:
document.addEventListener('click', musicPlay);
function musicPlay() {
document.getElementById('ID').play();
document.removeEventListener('click', musicPlay);
}
The music starts when the user clicks anywhere at the page.
It removes also instantly the EventListener, so if you use the audio controls the user can mute or pause it and the music doesn't start again when he clicks somewhere else..
The video tag can play audio as well. Given the audio tag doesn't seem to be behaving as it should be, you can just use the video tag for audio:
<video autoplay muted id="audio1" src="your.mp3" type="audio/mp3">
Your browser does not support the <code>video</code> element.
</video>
<script>
unmuteButton.addEventListener('click', function()
{
if ( unmuteButton.innerHTML == "unmute" )
{
unmuteButton.innerHTML = "mute";
audio1.muted = false;
} else {
unmuteButton.innerHTML = "unmute";
audio1.muted = true;
}
});
</script>
temp fix
$(document).on('click', "#buttonStarter", function(evt)
{
var context = new AudioContext();
document.getElementById('audioPlayer').play();
$("#buttonStarter").hide()
$("#Game").show()
});
Or use a custom player to trigger play http://zohararad.github.io/audio5js/
Note : Autoplay will be renabled in 31 December
Use iframe instead:
<iframe id="stream" src="YOUTSOURCEAUDIOORVIDEOHERE" frameborder="0"></iframe>
The browsers have changed their privacy to autoplay video or audio due to Ads which is annoying. So you can just trick with below code.
You can put any silent audio in the iframe.
<iframe src="youraudiofile.mp3" type="audio/mp3" allow="autoplay" id="audio" style="display:none"></iframe>
<audio autoplay>
<source src="youraudiofile.mp3" type="audio/mp3">
</audio>
Just add an invisible iframe with an .mp3 as its source and allow="autoplay" before the audio element. As a result, the browser is tricked into starting any subsequent audio file. Or autoplay a video that isn’t muted.
There is a really neat trick to use the autoplay-function of the audio tag in chrome.
Add
<iframe src="silence.mp3" allow="autoplay" id="audio"></iframe>
whereas silence.mp3 only is 0.5 seconds of silence.
This
<audio id="player" autoplay controls><source src="0.mp3" type="audio/mp3"></audio>
works afterwards.
Chrome notices that a sound has been played and gives the permission for autoplay in audio tags.
The default HTML5 audio autoplay attribute is not working in chrome, but you can force audio autoplay using JavaScript. Try this:
document.getElementById('myAudio').play();
This works for me.
Solution #1
My solution here is to create an iframe
<iframe src="audio/source.mp3" allow="autoplay" style="display:none" id="iframeAudio">
</iframe>
and audio tag aswell for non-chrome browsers
<audio autoplay loop id="playAudio">
<source src="audio/source.mp3">
</audio>
and in my script
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
if (!isChrome){
$('#iframeAudio').remove()
}
else {
$('#playAudio').remove() // just to make sure that it will not have 2x audio in the background
}
Solution #2:
There is also another workaround for this according to @Leonard
Create an iframe that doesn't play anything just to trigger the autoplay in the first load.
<iframe src="silence.mp3" allow="autoplay" id="audio" style="display: none"></iframe>
good source for the mp3 file silence.mp3
Then play your real audio file at ease.
<audio id="player" autoplay loop>
<source src="audio/source.mp3" type="audio/mp3">
</audio>
Personally I prefer solution #2 because it is cleaner approach for not relying so much in JavaScript.
Update August 2019
Solution #3
As an alternative we can use <embed>
For Firefox
It seems that audio auto-play is working so we don't need the <embed> element because it will create double audio running.
// index.js
let audioPlaying = true,
backgroundAudio, browser;
browser = navigator.userAgent.toLowerCase();
$('<audio class="audio1" src="audio.mp3" loop></audio>').prependTo('body');
if (!browser.indexOf('firefox') > -1) {
$('<embed id="background-audio" src="audio.mp3" autostart="1"></embed>').prependTo('body');
backgroundAudio = setInterval(function() {
$("#background-audio").remove();
$('<embed id="background-audio" src="audio.mp3"></embed>').prependTo('body');
}, 120000); // 120000 is the duration of your audio which in this case 2 mins.
}
Also if you have a toggle event for your audio make sure to remove the created <embed> element for audio.
Note: After your toggle, it will restart from the beginning because the <embed> is already deleted and the <audio> element will play as normal now.
$(".toggle-audio").on('click', function(event) {
audioPlaying = !audioPlaying;
$("#background-audio").remove();
clearInterval(backgroundAudio);
if (audioPlaying){
$(".audio1").play();
// play audio
}
else {
$(".audio1").pause();
}
And now make sure to hide these <audio> and <embed> elements
audio, embed {
position: absolute;
z-index: -9999;
}
Note: diplay: none and visibility: hidden will make the <embed> element not work.
Source: Stackoverflow.com