Looping background music in HTML

Question

I know this sounds really simple and I don't know how but I couldn't find a solution even after half an hour. I tried many methods that I found online, including:

<audio loop controls autoplay>
  <source src="music.ogg" type="audio/ogg"/>
  <source src="music.mp3" type="audio/mpeg"/>
  Your browser does not support the audio element.
</audio>

<audio src="music.mp3" autoplay loop>
  <p>If you are reading this, it is because your browser does not support the audio element.</p>
</audio>

<BGSOUND src="All Star.mp3" loop=infinite>

<EMBED src="All Star.mp3" autostart=true loop=true hidden=true>

But nothing seems to work?

The first one should be working, what web browser you are using? — Vinay, Aug 16 '20 at 05:01

score 0 · Answer 1 · edited Aug 16 '20 at 05:55

0

You can loop it like this: For example:

audio { display:none;}

<!DOCTYPE html>
<html>
<body>

<h1>The audio loop attribute</h1>

<audio loop autoplay>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

</body>
</html>

This is taken from w3cschools:https://www.w3schools.com/tags/att_audio_loop.asp

It seems you also haven taken from w3cshool too and that one worked for me so you should try that one again.

For google chrome this question may help you: How to make audio autoplay on chrome

edited Aug 16 '20 at 05:55

Hayat Tamboli

148
1
11

answered Aug 16 '20 at 05:11

yeah I tried that but I don't want the controls, I want it to automatically play when the page loads – timothy5597 Aug 16 '20 at 05:12
@timothy5597 putting autoplay worked for me and i just kept that in the code. – Aug 16 '20 at 05:13
@timothy5597 i added a question where same question is discussed you may want to check it out. – Aug 16 '20 at 05:21

Vinay · Answer 2 · 2020-08-16T08:53:19.760

I guess it's some sort of browser specific issue anyway so what you can do is add an event listener on ended event for that audio element and there in handler do the looping manually

var audio = document.getElementById('audio_1');
audio.addEventListener('ended', function() {
  loop();
}, false);

function loop() {
  audio.currentTime = 0; //rewind audio track to the beginning
  audio.play(); // play it
}

//also manually trigger play when it is able to play ie. when files is loaded sufficiently for playing
audio.addEventListener('canplay', function() {
  audio.play(); // play it
}, false);

<audio id="audio_1" controls autoplay>
  <source src="https://archive.org/download/cd_inception_hans-zimmer/disc1/12.%20Hans%20Zimmer%20-%20Time_sample.mp3">
</audio>

UPDATE

Apologies I missed something looks like chrome has changed their autoplay policy. So while the looping code would work just fine, unfortunately autoplay might not work unless it's triggered by user directly (like a click on that audio play button) or indirectly(like clicking on some on event handler of which you have called audio.play())

This is evident from this warning in chrome console

Looping background music in HTML

2 Answers2