it-swarm.com.de

javascript-Audioobjekt vs. HTML5-Audio-Tag

In einem Projekt habe ich kürzlich einen Sound mit geladen 

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

Es spielte einwandfrei, sofern kein Dialog geöffnet wurde (dh Alarm, Bestätigung). Allerdings habe ich stattdessen versucht, ein Audio-Tag in meine HTML-Datei einzufügen

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

und verwenden

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

es spielte weiter, nachdem ein Dialog eröffnet wurde. Weiß jemand warum das so ist? Was sind im Allgemeinen auch die Unterschiede zwischen den beiden Arten, um Sounds abzuspielen?

46
ekcrisp

Laut diesem Wiki-Eintrag bei Mozilla sollten <audio> und new Audio()sollten gleich sein, aber es sieht nicht so aus, als wäre dies in der Praxis der Fall. Immer wenn ich ein Audioobjekt in JavaScript erstellen muss, erstelle ich ein <audio>-Element wie folgt:

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

Dadurch wird tatsächlich ein Audio Element erstellt, das Sie genau wie ein <audio>-Element verwenden können, das im HTML-Code der Seite deklariert wurde.

Um Ihr Beispiel mit dieser Technik neu zu erstellen, führen Sie folgende Schritte aus:

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

JavaScript hält während eines Warn- oder Bestätigungsfelds an. 

Sie können nicht gleichzeitig Code ausführen und eine alert(), confirm() oder Prompt() anzeigen. Er wartet buchstäblich auf Benutzereingaben. Dies ist eine Kernfunktion von JavaScript.

Ich gehe davon aus, dass dies genau der Grund ist, warum eine vollständig im JavaScript-Bereich gespielte Audiodatei dies tut. Vergleichende Flash-Videoclips oder HTML5-AudioVideos werden auch dann weiter abgespielt, wenn eine JavaScript-Warnung/Bestätigung/Eingabeaufforderung geöffnet ist.

Welche Methode ist besser? Nun, es liegt an Ihnen. Es ist ziemlich archaisch, irgendetwas mit dem eingebauten JavaScript zu tun: alert/confirm/Prompt. Es gibt viel besser aussehende Eingabeaufforderungen, die Sie mit der jQuery-Benutzeroberfläche usw. erstellen können.

/ - Wenn Sie eine Menge dynamischer Inhalte auf der Seite haben oder schauen Sie sich Hintergrundpufferungsaudio an, bevor sie ausgelöst werden müssen und so weiter, dann ist JavaScript wahrscheinlich die vernünftigere Vorgehensweise.

Wenn Sie buchstäblich nur einen Player auf dem Bildschirm haben dann gibt es keine Entschuldigung dafür, den HTML-Code nicht zu verwenden. Obwohl es unwahrscheinlich ist, dass dies in der heutigen Zeit jemand betrifft, ist es immer noch schlechte Praxis, sich stark auf JavaScript zu verlassen, wenn es keinen Grund dafür gibt. 

10
Aaron

Ich habe die Funktion unten aus mehreren Antworten im Internet gefunden.

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

Wenn Sie erstellen - dann werden Sie Probleme mit ios haben, denn es zeigt sogar die Breite an: 0px

0
nvvetal