Welche Optionen gibt es für Cross-Browser-kompatibles Audio?

Question

Ich verwende diese Funktion:

function playSound(file) { 

MyAudio = new Audio(file); 
MyAudio.play(); 

} 

Leider bin ich kämpfen, um einen Dateityp zu finden, die in allen Browsern funktionieren. Mp3 funktioniert in Chrome, Safari, IE aber nicht FF und Opera, während .ogg-Dateien scheinen nur in FF funktionieren.

Irgendwelche Vorschläge zu einem Weg um diese? Ich vermute, dass es keine Möglichkeit gibt, programmatisch zu erkennen, welcher Browser verwendet wird, und dann den entsprechenden Dateityp abzuspielen? Jede Beratung/Ideen geschätzt. Vielen Dank.

Answer 1

Frustrierend gibt es keinen universell spielbaren Typ. WAV kommt am nächsten, ist aber ziemlich groß und wird in IE9 nicht unterstützt. Sie müssen mehrere Typen verfügbar haben und einen Typ auswählen, den der Browser spielen kann.

Verwenden Sie dazu Feature-Erkennung, nicht Browser-Erkennung. Die Medientypen, die von jedem Browser unterstützt werden, ändern sich im Laufe der Zeit. Daher wird Ihr Code, der davon ausgeht, dass Firefox keine MP3-Dateien abspielen kann, in einigen Jahren veraltet sein, wenn Mozilla es anwendet (nachdem die Patente abgelaufen sind). Verwenden Sie canPlayType, was darauf hindeutet, ob ein bestimmtes Format unterstützt wird:

var audio = new Audio(); 
if(audio.canPlayType("audio/mpeg") == "probably") { 
    playSound("myMedia.mp3"); 
} else if(audio.canPlayType("audio/webm") == "probably") { 
    playSound("myMedia.webm"); 
} 
// do checks for other types... 

Auch, wenn Sie den Audio-Tag im HTML-Format schreiben, können Sie mehrere <source>-Tags verwenden, und der Browser die erste spielen sie kann:

Wenn Sie für Ogg Audiounterstützung testen möchten, möchten Sie wahrscheinlich speziell für Ogg Vorbis testen. Ogg ist ein "Container" -Format, das neben Vorbis und Theora hypothetically use other codecs (zB die Opus format) kann.Sie können wie so für Ogg Vorbis testen:

audio.canPlayType('audio/ogg; codecs="vorbis"') == "probably"; 

Beachten Sie, dass canPlayType drei möglichen Rückgabewerte hat:

• "wahrscheinlich" - der Medientyp an Sicherheit grenzender Wahrscheinlichkeit
gespielt werden kann
• " vielleicht " - der Medientyp könnte spielbar sein. Dies ist, was zurückgegeben wird, wenn Sie nach allgemeinen Ogg-Unterstützung in einem Browser fragen, hat Ogg-Unterstützung für bestimmte Codecs (z. B. Vorbis und Theora). Eine Ogg-Datei kann verwenden einen Codec, der nicht vom Browser unterstützt wird, also wenn Sie nicht den Codec angeben, kann der Browser nur vermuten, dass es könnte möglicherweise in der Lage sein, es zu spielen.
• „“(leerer String) - der Medientyp ist sicherlich nicht abspielbar

Wenn Sie wirklich für ogg Unterstützung testen wollte, dann anstelle von Tests für „wahrscheinlich“, Sie Test für eine nicht leere Zeichenfolge könnte (dh Test entweder für „wahrscheinlich“ oder „vielleicht“), etwa so:

// test for *any* Ogg codecs 
if(audio.canPlayType("audio/ogg") != "") { 
    playSound("myMedia.ogg"); 
} 

Sie sollten prüfen, was auch immer bestimmte Codecs Ihre Mediendatei verwendet, zum Beispiel mit 'audio/ogg; codecs="vorbis"' für Vorbis. Das Testen auf allgemeine Ogg-Unterstützung ist wahrscheinlich nicht sinnvoll.

Answer 2

Nun, siehe hier: jQuery Buzz extension. Habe es nie benutzt, aber gehört, dass es gut funktionieren sollte. Es ist in der Lage zu überprüfen, ob Ihr Browser ein Format unterstützt, wirklich nette Funktion.

Answer 3

Verwenden Sie webm für Chrome, Firefox und Opera + wav für Firefox, IE, Safari und Opera.

HTML:

JS:

var src = "myvideoname"; 
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1; 

if (is_chrome) { 
    $("#audio").attr('src', 'audio/' + src + '.webm') 
} 
else { 
    $("#audio").attr('src', 'audio/' + src + '.wav') 
} 

zu erklären:
Javascript Benutzer Browser herausfinden, und wenn es Chrome ist es dient webm und wenn es nicht als wav ist verwenden

Hinweis: Mit diesem Code benötigen Sie nur beide webm und wav Audio mit dem gleichen Namen in audio Ordner.

Hinweis 2: Code benötigt jQuery.