Artikel-Hilfsmenü
Montag, 4. Februar 2019 – aktualisiert am Dienstag, 10. November 2020
Audio autoplay – noch so ein No-Go? … und eine Lösung für mobile Betriebssysteme
Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.
Auf der Seite Hintergrundmusik habe ich vor Jahren ganz klar zum Ausdruck gebracht, dass automatisch losdudelnde Musik auf Webseiten gar nicht geht. Mobile Betriebssysteme – iOS und Android – unterbinden inzwischen diese Unsitte, und auch Google Chrome tendiert dazu (mit einem relativ komplexen Ansatz), unerwünscht startende Musik zu unterbinden.
Gut so!
Hier eine Testseite mit Autoplay.
Und warum und wofür will ich jetzt eine "Lösung" präsentieren? Weil ich in einem konkreten Anwendungsfall – in meinem Chat – mit verschiedenen Signaltönen auf unterschiedliche Ereignisse hinweisen will; Beispiel: User betritt den Chatraum. Diese Hinweistöne werden durch kurze .mp3-Dateien in einem HTML-Audio-Tag mit autoplay-Attribut erzeugt. Auf iOS- und Android-Geräten funktioniert das aber nicht.
Der im Folgenden vorgestellte Workaround ist nicht ganz trivial. Er beruht auf sogenannten Audio-Sprites. Audio-Sprites funktionieren ähnlich wie die bekannten CSS-Sprites. Also: Eine Datei enthält mehrere Elemente, die je nach Bedarf zum Abspielen ausgewählt werden.
HTML
<audio id="audio-sprite"><source src="sprite.mp3" type="audio/mpeg" /></audio>
Hier die komplette Datei sprite.mp3, bestehend aus 4 Sprites. Zum Erstellen einer solchen Datei aus einzelnen Sound-Snippets ist grundsätzlich jeder Audio-Editor geeignet.
JavaScript
if (document.getElementById('audio-sprite')) {
var audioSprite = document.getElementById('audio-sprite');
}
var spriteData = {
stumm: {
start: 0,
length: 1.1
},
rein: {
start: 1.4,
length: 1.4
},
raus: {
start: 3.6,
length: 0.5
},
msg: {
start: 4.5,
length: 0.3
},
alarm: {
start: 5.6,
length: 5.9
}
};
// current sprite being played
var currentSprite = {};
// time update handler to ensure we stop when a sprite is complete
var onTimeUpdate = function() {
if (this.currentTime >= currentSprite.start + currentSprite.length) {
this.pause();
}
};
if (document.getElementById('audio-sprite')) {
audioSprite.addEventListener('timeupdate', onTimeUpdate, false);
}
var playSprite = function(id) {
if (document.getElementById('audio-sprite')) {
if (spriteData[id] && spriteData[id].length) {
currentSprite = spriteData[id];
audioSprite.currentTime = currentSprite.start;
audioSprite.play();
}
} else {
// nichts tun
}
};
Der Aufruf eines Audio-Sprites erfolgt nach folgendem Schema (JavaScript):
if (Bedingung: z. B. User betritt den Chatraum) {
playSprite('rein');
}
So weit, so gut? Leider nicht. iOS und Android spielen die Sprites mit JavaScript "play()" genau so wenig wie ein Audio mit autoplay-Attribut. Es ist zwingend eine User-Aktion, z. B. ein Klick o. ä. erforderlich. Dieses "Ähnliche" kann auch ein touch-Event sein. Wir legen also auf das Dokument ein touchstart-Event, und spielen, sobald der User den Monitor berührt (Daumendrück), den Sprite "stumm".
iOS oder Android erkennen, dass die Datei sprite.mp3 durch eine User-Aktion gestartet wurde, und akzeptieren nun auch Starten und Pausieren der Datei mittels JavaScript, um weitere, durch die Funktion playSprite() aufgerufene Audio-Sprites abzuspielen.
Das Funktionieren dieser Lösung ist also davon abhängig, dass der User nach dem Öffnen der Seite (z. B. des Chat) wenigstens einmal den Monitor berührt.
Der JavaScript-Code für touchstart
// touchstart nur einmal ausführen:
var enterPushed = true;
document.addEventListener("touchstart",function(){
if (enterPushed === true) {
playSprite('stumm');
enterPushed = false;
}
});
Als Demo dient der Chat. Die obigen JavaScript-Snippets sind in der Datei chat_js.php enthalten (im Download-Archiv des Chat).
Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.
1 Kommentar
Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.
so1234 schrieb am Donnerstag, 11.06.20 15:22 Uhr:
Hallo, wir haben den Chat grad vor kurzem installiert und finden ihn ganz toll. Was wir gerne ändern würden, ist, dass der Chat keine akustischen Signale von sich gibt bei neuen Chat-Zeilen, sondern visuelle (z.B. Blinken des Tabs), oder beide Optionen zum Auswählen. Wäre so ein Tab-Blinken überhaupt umsetzbar? LG