I want to add background music to my website. I've tried this JS code:
var sound;
function initialAudio() {
'use strict';
sound = new Audio();
sound.src = '../audio/test.mp3';
sound.loop = true;
sound.play();
}
window.addEventListener("load", initialAudio);
I have linked the JS and HTML, but when I open the site, the sound doesn't play. Can you please help me?
I want to add background music to my website. I've tried this JS code:
var sound;
function initialAudio() {
'use strict';
sound = new Audio();
sound.src = '../audio/test.mp3';
sound.loop = true;
sound.play();
}
window.addEventListener("load", initialAudio);
I have linked the JS and HTML, but when I open the site, the sound doesn't play. Can you please help me?
Share Improve this question edited Dec 31, 2018 at 17:27 user8866053 asked Dec 31, 2018 at 13:21 Muntadar MuhammadMuntadar Muhammad 1151 gold badge2 silver badges8 bronze badges 7- 1 Did you check the browser console? Since auto-playing audio is universally detested, browsers don't allow it. – user5734311 Commented Dec 31, 2018 at 13:22
- how can i allow it? – Muntadar Muhammad Commented Dec 31, 2018 at 13:27
- that what appear in console Uncaught (in promise) DOMException – Muntadar Muhammad Commented Dec 31, 2018 at 13:28
- it should be allowed after the user have interacted with your page – Smankusors Commented Dec 31, 2018 at 13:30
- 1 It was a bad idea to have audio playing on your web site (without the users permission/action) and it is still a bad idea. If you want the user to play something then give them the option. – user2417483 Commented Dec 31, 2018 at 13:31
5 Answers
Reset to default 4A modern browser will refuse to play any sound without user interaction. Your code should work fine, if started from a user event, like onclick.
You need to use an audio element in your html, this is how to do it.
<!DOCTYPE html>
<html>
<body>
<audio id="audioContainer">
<source src="myMp3.mp3" type="audio/mpeg">
</audio>
<p>Click the buttons to play or pause the audio.</p>
<button onclick="playMp3()" type="button">Play Mp3</button>
<button onclick="pauseMp3()" type="button">Pause Mp3</button>
<script>
const audioContainer = document.getElementById("audioContainer");
function playMp3() {
audioContainer.play();
}
function pauseMp3() {
audioContainer.pause();
}
</script>
</body>
</html>
There's this javascript audio library called HOWLER.JS and its really easy to use. Include this script file:
<script src = "https://cdnjs.cloudflare./ajax/libs/howler/2.1.1/howler.js"></script>
Add this code snippet to your html:
var sound = new Howl({ src: ['../audio/test.mp3'], autoplay: true, loop: true, volume: 0.5, }); sound.play();
For more info visit: HOWLER.JS DOCS
Just use the HTML5 audio element with the auto play attribute. As mentioned in the ments, browser support for autoplay is tenuous (for good reason) but it works for me in Firefox.
<audio autoplay loop>
<source src="http://soundbible./grab.php?id=464&type=wav"></source>
</audio>If you want the user to be able to pause the audio, just add a controls attribute:
<audio autoplay controls loop>
<source src="http://soundbible./grab.php?id=464&type=wav"></source>
</audio>You can also use JS to have a button somewhere else on the page play/pause as used in another answer.
If you have done it in this way:
var sound = new Audio('sounds/tom-3.mp3');
sound.play();
This does not work in my case, so I did this:
var sound = new Audio('sounds\\\tom-3.mp3');
sound.play();