webentwicklung-frage-antwort-db.com.de

HTML5-Audio kann nicht über Javascript wiedergegeben werden, es sei denn, es wird einmal manuell ausgelöst

Ich versuche, eine kleine Audiodatei mithilfe eines Tags und Javascript zum Starten automatisch wiederzugeben.

<audio id="denied" preload="auto" controls="false">
    <source src="sound/denied.wav" />
 </audio>

Und dann per Javascript, zum richtigen Zeitpunkt:

$('#denied')[0].play()

Funktioniert einwandfrei auf Chrome auf meinem Desktop. In Android 4.1.1 wird der Sound nur abgespielt, wenn ich zuvor auf den HTML5-Audio-Steuerelementen auf "Abspielen" geklickt habe Javascript versucht, es zu spielen.

Grundsätzlich spielt der Android Browser (Stock oder Dolphin) das Audio nur dann ab, wenn der Benutzer es irgendwann vor dem Javascript einleitet. Ist dies beabsichtigt?

35
Jonah H.

Für meine Zwecke habe ich Folgendes getan:

Glücklicherweise muss der Benutzer auf eine Schaltfläche klicken, bevor er das Verhalten zum Starten von Audio auslösen kann. Ich stelle die Lautstärke des Elements auf 0.0 ein und lasse es "spielen", wenn sie auf diese Schaltfläche klicken.

Nachdem der Sound lautlos abgespielt wurde, setze ich die Lautstärkeeigenschaft einfach auf 1.0 zurück und es wird ohne Benutzereingriff einwandfrei abgespielt.

10
Jonah H.

In meinem Fall war dies eine einfache Lösung:
https://stackoverflow.com/a/28011906/4622767
Kopieren Sie dies und fügen Sie es in Ihr Chrome ein:

chrome://flags/#autoplay-policy

In meiner Web-App wurden viele Seiten neu geladen, sodass ich den Benutzer nicht zwingen kann, jedes Mal eine Taste zu drücken. aber es ist für den internen Gebrauch, also kann ich die Benutzer zwingen, chrome zu verwenden und diese Option zu konfigurieren.

15
FRa

Ich weiß, dass in der mobilen Safari jeder Javascript-Aufruf zum Spielen () im selben Aufrufstapel wie ein Benutzer initialisiertes Klickereignis sein muss. Das Spoofen des Klicks mit einem Javascript-Trigger funktioniert auch nicht.

Auf meinem Nexus 7 kann ich bestätigen, dass es nicht abgespielt wird, es sei denn, das Javascript wurde durch einen Klick des Benutzers ausgelöst.

9
Rob Lynch

Das Hauptproblem ist, dass der Ton (unter iOS und Android) durch einen Klick des Benutzers ausgelöst werden muss. Mein Workaround war sehr einfach. Binden Sie das audio.play() an einen Klickereignis-Listener und halten Sie ihn sofort an. Ab diesem Zeitpunkt funktioniert der Sound perfekt.

var myAudio = new Audio('assets/myAudio.mp3');
...
button.addEventListener("click", function() {
    myAudio.play();
    myAudio.pause();
    ...
});
6
Eli Mashiah

Hier ist ein Blog-Beitrag über den Grund und wie man es überwindet, indem alle Audiodateien bei der ersten Benutzerinteraktion geladen und später auf programmierte Weise abgespielt werden: https://blog.foolip.org/2014/02/ 10/media-rendering-restricted-in-blink / Nach diesem Ansatz ist auf GitHub https://github.com/MauriceButler/simple-audio ein kleines Javascript-Modul verfügbar

Ich habe diesen einfachen Ansatz selbst ausprobiert - nahtlos und großartig!

4
makechaos

Zum Glück muss die HTML5-App, an der ich arbeite, nur in Android 4.1) funktionieren, aber wenn Sie versuchen, etwas plattformübergreifendes zu erstellen, müssen Sie dies leicht anpassen Das Einstellen der Lautstärke auf 0.0 und dann wieder zurück oder das automatische Abspielen auf dem Steuerelement hat bei mir funktioniert. Ich habe auch versucht, die Stummschaltung zu aktivieren, und das hat auch nicht funktioniert gehacktes Skript, das tatsächlich funktioniert hat:

function myAjaxFunction() {
  clearTimeout(rstTimer); //timer that resets the page to defaults
  var snd=document.getElementById('snd');
  snd.currentTime=snd.duration-.01; //set seek position of audio near end
  snd.play(); //play the last bit of the audio file
  snd.load(); //reload file
  document.getElementById('myDisplay').innerHTML=defaultDisplay;
  var AJAX=new XMLHttpRequest(); //won't work in old versions of IE
  sendValue=document.getElementById('myInput').value;
  AJAX.open('GET', encodeURI('action.php?val='+sendValue+'&fn=find'), true);
  AJAX.send();
  AJAX.onreadystatechange=function() {
    if (AJAX.readyState==4 && AJAX.status==200) {
      document.getElementById('myDisplay').innerHTML=AJAX.responseText;
      if (document.getElementById('err')) { //php returns <div id="err"> if fail
        rstTimer = setTimeout('reset()', 5000); //due to error reset page in 5 seconds
        snd.play(); //play error sound
        document.getElementById('myInput').value=''; //clear the input
      }
    }
  }
}
3
MaKR

Sie benötigen kein JavaScript für die automatische Wiedergabe. In Ihrem Code treten mehrere Probleme auf:

<audio id="denied" preload="auto" controls="false">
    <source src="sound/denied.wav" />
</audio>

Ich würde es in ändern (in HTML5 brauchen Sie nicht die Syntax attribute = "value" in einigen Fällen, das ist für XHTML):

<audio id="denied" autobuffer controls autoplay>
    <source src="sound/denied.wav" />
</audio>
<a href="#" id="play-button">play!</a>

Wenn die automatische Wiedergabe unter iOS deaktiviert ist, müssen Sie mit JavaScript auf die Wiedergabetaste klicken oder ein Benutzer-Klickereignis auf benutzerdefinierte Steuerelemente wie dieses setzen:

var audio = document.getElementById('denied');
var button = document.getElementById('play-button');
button.addEventListener('click',function(){
    audio.play();
});

oder mit jQuery:

$('#play-button').click(function(){ audio.play(); });}

Bearbeiten

Denken Sie daran, dass HTML5 eine ziemlich neue Technologie ist (zumindest einige Funktionalitäten), sodass sich die Browserkompatibilität und -funktionalität von Zeit zu Zeit ändern.

Ich ermutige alle, über den aktuellen Status auf dem Laufenden zu bleiben, da die Dinge manchmal weniger hackabhängig sind oder umgekehrt.

Ein guter Ausgangspunkt: http://caniuse.com/#feat=audio (überprüfen Sie die Registerkarten unten).

Auch für eine globale Audiolösung empfehle ich die Verwendung der JS-Bibliothek SoundManager2

3
aesede

Das ist mir auch passiert. So habe ich das gehackt:

Ich stelle den Ton auf autoplay und die Lautstärke auf 0. Wenn ich es zum Spielen brauche, verwende ich die load() -Methode und es wird automatisch abgespielt. Es ist eine leichte MP3-Datei, die alle eine bis zwei Stunden abgespielt wird.

2
Marks

Ich habe das gleiche Problem in meiner App festgestellt. Mein Anwendungsnutzungsszenario war wie folgt:

  1. klicken Sie auf die Schaltfläche, um eine Tabelle mit Informationen anzuzeigen (Benutzeraktion).
  2. zeige die Tabelle und aktualisiere die Daten darin von AJAX
  3. sound abspielen, wenn Daten geändert wurden

Glücklicherweise hatte ich die Benutzeraktion (Schritt 1), so dass ich den Sound "einleiten" und ihn dann per Javascript abspielen konnte, ohne dass die Benutzeraktion erforderlich war. Siehe den Code.

HTML

<audio id="kohoutAudio">
    <source src="views/images/kohout.mp3">
</audio>

<button id="btnShow">Show table</button>

Javascript

$("#btnShow").click(function () {
    //some code to show the table
    //initialize the sound
    document.getElementById('kohoutAudio').play();
    document.getElementById('kohoutAudio').pause();
});

function announceChange(){
    document.getElementById('kohoutAudio').play();
};
2