Quelles sont les options disponibles pour l'audio compatible avec plusieurs navigateurs?

Question

J'utilise cette fonction:

function playSound(file) { 

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

} 

Malheureusement, je me bats pour trouver un type de fichier qui fonctionne dans tous les navigateurs. Mp3 fonctionne dans Chrome, Safari, IE mais pas FF et Opera, tandis que les fichiers .ogg ne semblent fonctionner que dans FF.

Des suggestions pour contourner le problème? Je présume qu'il n'y a aucun moyen de détecter par programme quel navigateur est utilisé et ensuite de jouer le type de fichier approprié? Tout conseil/idées apprécié. Merci.

Answer 1

Frustrant, il n'y a pas de type jouable universellement. WAV se rapproche le plus, mais il est assez volumineux et n'est pas supporté par IE9. Vous devez avoir plusieurs types disponibles et choisir un type que le navigateur peut lire.

Pour cela, utilisez détection de fonction, et non la détection du navigateur. Les types de média supportés par chaque navigateur changeront au fil du temps, donc votre code qui suppose que Firefox ne peut pas lire MP3 sera probablement obsolète dans quelques années, quand Mozilla l'adoptera (après l'expiration des brevets). Utilisez canPlayType, qui indique si un format donné est pris en charge:

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

En outre, si vous écrivez la balise audio au format HTML, vous pouvez utiliser plusieurs <source> balises, et le navigateur va jouer le premier il peut:

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

Si vous souhaitez tester la prise en charge audio Ogg, vous devez tester spécifiquement Ogg Vorbis. Ogg est un format "conteneur" qui peut hypothetically use other codecs en plus de Vorbis et Theora (par exemple, le Opus format).Vous pouvez tester Ogg Vorbis comme ceci:

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

Notez que canPlayType a trois valeurs de retour possibles:

• "probablement" - le type de support peut certainement être joué
• " peut-être " - le type de média pourrait être jouable. C'est ce qui est retourné quand vous posez des questions sur le support général Ogg dans un navigateur qui prend en charge Ogg pour des codecs spécifiques (c'est-à-dire Vorbis et Theora). Un fichier Ogg peut utiliser un codec qui n'est pas pris en charge par le navigateur, donc si vous ne spécifiez pas le codec, le navigateur peut seulement deviner qu'il pourrait être capable de le lire.
• ""(la chaîne vide) - le type de support est certainement pas jouable

Si vous voulez vraiment tester le soutien ogg, puis au lieu de test pour "probablement", vous pourrait tester une chaîne non vide (c.-à-test soit « probablement » ou « peut-être »), comme ceci:

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

Vous devez tester pour tout codec spécifique de votre fichier multimédia utilise, par exemple, avec 'audio/ogg; codecs="vorbis"' pour Vorbis. Les tests pour le support Ogg général ne seront probablement pas utiles.

Answer 2

Eh bien, voir ici: jQuery Buzz extension. Je ne l'ai jamais utilisé, mais j'ai entendu dire que ça devrait fonctionner correctement. Il est capable de vérifier si votre navigateur prend en charge un format, fonctionnalité vraiment soigné.

Answer 3

Utilisez webm pour Chrome, Firefox et Opera + wav pour Firefox, IE, Safari et 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') 
} 

Pour expliquer brièvement:
Javascript trouver des utilisateurs navigateur et s'il est Chrome, il sert webm et si ce n'est pas qu'elle utilise wav

Note: En utilisant ce code, vous n'avez besoin que de l'audio webm et wav avec le même nom dans le dossier audio.

Remarque 2: Le code a besoin de jQuery.