Solution to failed audio playback in JavaScript new Audio() method

When playing audio using JavaScript's new Audio() method, you often encounter the problem of failed playback. This article will analyze a common case and provide effective solutions.

In the case, the developer used new Audio() to create an audio object, but the console reported an error uncaught (in promise) DOMException: Failed to load because no supported source was found. , and the audio cannot be played.

The error message indicates that the browser cannot load the audio file. Combined with the code example (the HTML and JS code shown in the image are omitted here), the problem is mainly the asynchronousness of audio loading and browser security policies.

new Audio(url) method loads the audio resource asynchronously. After the new Audio() statement is executed, the audio is not loaded immediately, and calling music.play() directly may cause playback failure.

Workaround: Take advantage of canplaythrough event. This event is triggered when the audio resource can be played smoothly. Listen to the canplaythrough event, make sure that the audio has been loaded successfully, and then call play() method:

 const music = new Audio('./1.mp3');
music.addEventListener("canplaythrough", event => {
  music.play();
});

This code creates an audio object and adds a canplaythrough event listener. When the audio is loaded and playable, the listener triggers and calls music.play() .

If it still fails to play, it may be that the browser security policy restricts automatic playback. In order to improve user experience, some browsers restrict the page from automatically playing audio without user interaction. It is recommended to add buttons to let users trigger playback manually:

 const playButton = document.getElementById('playButton'); 
playButton.addEventListener('click', () => {
    music.play();
});

If the user actively triggers playback, the browser will not block the audio playback, and ensures that the audio is played successfully while respecting the user experience.

The above is the detailed content of JavaScript's new Audio() method cannot play audio. How to solve it?. For more information, please follow other related articles on the PHP Chinese website!