web-dev-qa-db-fra.com

objet audio javascript vs balise audio HTML5

Dans un projet récemment, lorsque j'ai chargé un son avec 

var myAudio = new Audio("myAudio.mp3");
myAudio.play();

Cela a bien fonctionné sauf si un dialogue a été ouvert (c.-à-d. Alerte, confirmation). Cependant, quand au lieu de cela, j'ai essayé d'ajouter une balise audio dans mon HTML

<audio id="audio1">
    <source src="alarm.mp3" type="audio/mpeg" />
</audio>

et en utilisant

var myAudio1 = document.getElementById("audio1");
myAudio1.play()

il a continué à jouer après l'ouverture d'un dialogue. Quelqu'un sait pourquoi c'est comme cela? Aussi plus généralement quelles sont les différences entre les deux façons de jouer des sons?

javascripthtml5audio
46
ekcrisp

Selon cette entrée de wiki chez Mozilla <audio> et new Audio()devrait être la même chose mais il ne semble pas que ce soit le cas en pratique. Chaque fois que j'ai besoin de créer un objet audio en JavaScript, je crée en fait un élément <audio> comme ceci:

var audio = document.createElement('audio');

Cela crée en fait un audio élément que vous pouvez utiliser exactement comme un élément <audio> déclaré dans le code HTML de la page.

Pour recréer votre exemple avec cette technique, procédez comme suit:

var audio = document.createElement('audio');
audio.src = 'alarm.mp3'
audio.play();
22
pseudosavant

JavaScript s'arrête pendant une zone d'alerte ou de confirmation. 

Vous ne pouvez pas simultanément exécuter du code et afficher une alert(), confirm() ou Prompt(); il attend littéralement l'entrée de l'utilisateur, il s'agit d'une fonctionnalité essentielle de JavaScript.

Je suppose que c’est la raison même pour laquelle un fichier audio entièrement lu dans le cadre de JavaScript le fait. Comparativement, les clips vidéo Flash ou audio/vidéo HTML5 continueront à être lus même lorsqu'une alerte/confirmation/invite JavaScript est ouverte.

Quant à quelle méthode est la meilleure, eh bien c'est à vous de décider. Il est assez archaïque de faire quoi que ce soit avec JavaScript intégré dans alerte/confirmation/invite, il existe des invites beaucoup plus intéressantes que vous pouvez utiliser avec l'interface utilisateur de jQuery, etc.

Si la page contient beaucoup de contenu dynamique ou si vous examinez la mise en mémoire tampon de l’audio avant qu’il ne soit nécessaire de la déclencher, etc., JavaScript est probablement la solution la plus saine.

Si vous n'avez littéralement qu'un seul joueur à l'écran alors il n'y a aucune excuse pour ne pas ajouter de code HTML. Bien qu'il soit peu probable que cela affecte quiconque ces jours-ci, il est toujours déconseillé de s'appuyer fortement sur JavaScript lorsqu'il n'y a aucune raison de le faire. 

10
Aaron

J'ai proposé la fonction ci-dessous à partir de plusieurs réponses sur le Web.

function playAudio(url){
  var audio = document.createElement('audio');
  audio.src = url;
  audio.style.display = "none"; //added to fix ios issue
  audio.autoplay = false; //avoid the user has not interacted with your page issue
  audio.onended = function(){
    audio.remove(); //remove after playing to clean the Dom
  };
  document.body.appendChild(audio);
}
0
Kareem

Si vous allez créer - alors vous aurez des problèmes sur ios, car il montre même vous allez définir la largeur:

0
nvvetal