Why does audio not play in javascript

Question

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?

Did you check the browser console? Since auto-playing audio is universally detested, browsers don't allow it. — , Dec 31 '18 at 13:22
that what appear in console Uncaught (in promise) DOMException — Muntadar Muhammad, Dec 31 '18 at 13:28
it should be allowed after the user have interacted with your page — Smankusors, Dec 31 '18 at 13:30
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. — , Dec 31 '18 at 13:31
I will certainly give them option to mute audio, play or pause but how would I do that? — Muntadar Muhammad, Dec 31 '18 at 13:37
Which browser do you use? Did you check your src that it gets to the right file? As it works fine [here](https://jsfiddle.net/aLpty6zx/). — Alexandre Elshobokshy, Dec 31 '18 at 13:48

score 2 · Answer 1 · answered Dec 02 '21 at 14:38

2

A modern browser will refuse to play any sound without user interaction. Your code should work fine, if started from a user event, like onclick.

answered Dec 02 '21 at 14:38

Max

71
4

score 1 · Accepted Answer · answered Dec 31 '18 at 14:13

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>

when someone inspect the page he will see the element and I think it isn't a professional way to do it. — Muntadar Muhammad, Dec 31 '18 at 20:45

score 1 · Answer 3 · answered Jan 01 '19 at 11:59

There's this javascript audio library called HOWLER.JS and its really easy to use. Include this script file:

<script src = "https://cdnjs.cloudflare.com/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

score 0 · Answer 4 · answered Dec 31 '18 at 17:07

0

Just use the HTML5 audio element with the auto play attribute. As mentioned in the comments, browser support for autoplay is tenuous (for good reason) but it works for me in Firefox.

<audio autoplay loop>
  <source src="http://soundbible.com/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.com/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.

answered Dec 31 '18 at 17:07

thanks but this is not my favorite way to do things. I mean come on we can make it invisible for someone who inspect the page. – Muntadar Muhammad Dec 31 '18 at 20:48
@MuntadarMuhammad You can, but why? It doesn't make this site faster or provide any quantitative benefit, just more annoying and less open. On the other answer, you said it "isn't a professional way to do it." There are 2 things with that. It _is_ the professional way to do it. If you're really concerned with looking professional, background music _isn't_ professional. Besides, it will always show up in the JS under resources if someone looks close enough. – Dec 31 '18 at 21:00

score 0 · Answer 5 · edited May 07 '21 at 10:39

0

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();

edited May 07 '21 at 10:39

Sfili_81

2,377
8
27
36

answered May 07 '21 at 06:45

Arthur Kindo

81
1
1

Why does audio not play in javascript

5 Answers5