La nouvelle méthode Audio () de JavaScript ne peut pas lire Audio. Comment le résoudre?

Solution à la lecture audio échouée dans JavaScript new Audio() Méthode

Lors de la lecture de l'audio à l'aide de la new Audio() de JavaScript, vous rencontrez souvent le problème de la lecture ratée. Cet article analysera un cas commun et fournira des solutions efficaces.

Dans le cas, le développeur a utilisé new Audio() pour créer un objet audio, mais la console a signalé une erreur uncaught (in promise) DOMException: Failed to load because no supported source was found. et l'audio ne peut pas être joué.

Le message d'erreur indique que le navigateur ne peut pas charger le fichier audio. Combiné avec l'exemple de code (le code HTML et JS indiqué dans l'image est omis ici), le problème est principalement l'asynchrone du chargement audio et des politiques de sécurité du navigateur.

new Audio(url) charge la ressource audio de manière asynchrone. Une fois la new Audio() exécutée, l'audio n'est pas chargé immédiatement et appeler music.play() peut provoquer une défaillance de la lecture.

Solution: profitez de canplaythrough . Cet événement est déclenché lorsque la ressource audio peut être lu en douceur. Écoutez l'événement canplaythrough , assurez-vous que l'audio a été chargé avec succès, puis appelez play() :

 const music = new Audio ('./ 1.mp3');
music.addeventListener ("CanPlaythrough", événement => {
  music.play ();
});

Ce code crée un objet audio et ajoute un écouteur d'événements canplaythrough . Lorsque l'audio est chargé et jouable, l'auditeur se déclenche et appelle music.play() .

S'il ne joue toujours pas, il se peut que la politique de sécurité du navigateur limite la lecture automatique. Afin d'améliorer l'expérience utilisateur, certains navigateurs empêchent la page de jouer automatiquement audio sans interaction utilisateur. Il est recommandé d'ajouter des boutons pour permettre aux utilisateurs de déclencher la lecture manuellement:

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

Si l'utilisateur déclenche activement la lecture, le navigateur ne bloquera pas la lecture audio et garantit que l'audio est joué avec succès tout en respectant l'expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!