Quali opzioni ci sono per l'audio compatibile con il browser incrociato?

Question

sto usando questa funzione:

function playSound(file) { 

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

} 

Purtroppo, sto lottando per trovare un tipo di file che funziona in tutti i browser. Mp3 funziona in Chrome, Safari, IE ma non in FF e Opera, mentre i file .ogg sembrano funzionare solo in FF.

Qualche suggerimento su come aggirare questo? Presumo che non ci sia modo di rilevare a livello di codice quale browser viene utilizzato e quindi riprodurre il tipo di file appropriato? Qualsiasi consiglio/idea apprezzata. Grazie.

Answer 1

Frustrante, non esiste un tipo universalmente riproducibile. WAV è il più vicino, ma è abbastanza grande e non è supportato in IE9. Avrai bisogno di avere più tipi disponibili e scegliere un tipo che il browser può riprodurre.

Per fare ciò, utilizzare il rilevamento della funzione , non il rilevamento del browser. I tipi di file multimediali supportati da ogni browser cambieranno nel tempo, quindi il codice che presuppone che Firefox non possa riprodurre MP3 sarà probabilmente superato da qualche anno, quando Mozilla lo adotterà (dopo la scadenza dei brevetti). Utilizzare canPlayType, che indica se un determinato formato è supportato:

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... 

Inoltre, se si sta scrivendo il tag audio in formato HTML, è possibile utilizzare più <source> tag, e il browser giocherà il primo che può:

<audio controls="controls"> 
    <source src="mymedia.ogg" type="audio/ogg" /> 
    <source src="mymedia.mp3" type="audio/mpeg" /> 
    Update your browser! This sentence is fallback content for browsers that do not support the audio element at all. 
</audio> 

Se si desidera testare il supporto audio Ogg, probabilmente si desidera testare specificamente Ogg Vorbis. Ogg è un formato "contenitore" che può contenere hypothetically use other codecs oltre a Vorbis e Theora (ad esempio, Opus format).È possibile verificare per Ogg Vorbis in questo modo:

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

Nota che canPlayType ha tre possibili valori di ritorno:

• "probabilmente" - il tipo di supporto può quasi certamente essere giocato
• " forse " - il tipo di supporto potrebbe essere compatibile con. Questo è ciò che viene restituito quando si chiede del supporto generale di Ogg in un browser che supporta Ogg per codec specifici (ad esempio Vorbis e Theora). Un file Ogg può utilizzare un codec che non è supportato dal browser, quindi se non si specifica il codec, il browser può solo supporre che sia in grado di riprodurlo.
• ""(la stringa vuota) - il tipo di supporto non è certamente giocabile

Se si voleva davvero per verificare il supporto ogg, allora invece di prova per "probabilmente", è potrebbe verificare una stringa non vuota (cioè di prova sia per "probabilmente" o "forse"), in questo modo:

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

Si dovrebbe provare per qualsiasi codec specifico file multimediale utilizza, ad esempio, con 'audio/ogg; codecs="vorbis"' per Vorbis. Non è probabile che i test per il supporto Ogg generale siano utili.

Answer 2

Bene, vedere qui: jQuery Buzz extension. Non l'ho mai usato, ma ho sentito che dovrebbe funzionare bene. È in grado di verificare se il tuo browser supporta alcuni formati, funzionalità davvero accurata.

Answer 3

Usa webm per Chrome, Firefox e Opera + wav per Firefox, IE, Safari e 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') 
} 

da spiegare:
Javascript scoprire browser degli utenti e se è Chrome serve webm e se non è quello che uso wav

Nota: Utilizzando questo codice è necessario solo l'audio sia webm e wav con lo stesso nome nella cartella audio.

Nota 2: Il codice richiede jQuery.