Why is my webpage refusing to play music on Safari?

Code Help
1

JavaScript for some reason isn’t playing music in the Safari browser. I tried not using a relative link and it still didn’t work.


https://replit.com/@Bedrockminer/Flag-Forts

let music = new Audio(); music.src = ‘./test-audio’;
music.play()
2

Try putting it in the HTML maybe?

3

The reason why the audio is not playing is because the audio file has not fully loaded.

To fix this, you will need to detect when the canplaythrough event is emitted from the music object.

let music = new Audio();
music.src = "./test-audio.wav";

music.addEventListener("canplaythrough", () => {
    music.play();
});

Note that some browsers do not automatically play music because of security concerns, which is probably another contributing factor to why it did not play the audio.

Hope this helps!

EDIT: After checking the audio file, it seems that it’s corrupted, which was why it wasn’t able to play in the first place. Try uploading the file again and see if it works.

3 Likes
5

The music event listener you used did not trigger for me so I this instead:

window.addEventListener(‘load’, function(){
    music.play();
});

This did trigger, however it returned a DOMException error and didn’t play. I was also able to directly listen the audio file just fine, but I still re-uploaded it and it still didn’t work.

1 Like
6

did you try putting it in the HTML?

7

Putting it in a <script> tag will only give the same results. If I just copied and pasted the JavaScript code into the HTML file, without the <script> tag, It would just render as normal text instead of running.

8

I believe both load and canplaythrough events work, but the latter is more suitable for audio and video files.

The error message popped up because since you are using an Apple device, it probably tried to “fix” the file for optimisation, but ended up corrupting it in some way, which I have experienced and dealt with such files before.

Try uploading the audio on a non-Apple device and see if it works, which usually don’t do these kinds of things.

9

I tested it on my other computer, and I imported the song from there, but it gave a DOMException error again. I also deleted the Repl by accident lol

Also, I downloaded the audio file off of scratch(Another coding site that uses blocks instead of text), which importing audio to is apparently “not great.”

10

You are provably right. So I believe just changing the audop should fix the problem.