Vers l'arrière et de la croix-navigateur compatible de jouer des fichiers audio

J'ai besoin de la lecture de fichiers audio dans de nombreux différents navigateurs et différentes versions. L'ancien système produit des 4 bits de fichiers WAV, qui de nombreux navigateurs ne peuvent pas gérer. Tous les fichiers contiennent synthétisée ou enregistrée à la voix humaine. De toute façon je vais avoir besoin de le remplacer. Donc mes questions sont:

1) quel est le meilleur format de fichier à utiliser pour les fichiers audio, en ce qui concerne la compatibilité, de la taille et de la qualité?

2) quelle est la meilleure façon d'utiliser HTML5 et en restant à l'arrière-compatible?

Nous avons besoin pour prendre en charge Internet Explorer, versions 6, 7, 8 et 9; Firefox, Chrome et Safari.

Mise à jour: a finalement obtenu ce travail pour IE 6 à 9, Firefox et google Chrome; ne l'ai pas testé Safari encore. J'ai appris que Safari pour windows, Quicktime et IE nécessite windows media player.

InformationsquelleAutor David | 2013-04-29
  1. 11

    Voici ce que j'utilise:

    <audio autoplay>
    <source src="/static/sound/SOUND.mp3" type="audio/mpeg">
    <source src="/static/sound/SOUND.ogg" type="audio/ogg">
    <source src="/static/sound/SOUND.wav" type="audio/wav">
    <source src="/static/sound/SOUND.aiff" type="audio/x-aiff">
    <object>
        <param name="autostart" value="true">
        <param name="src" value="/static/sound/SOUND.mp3">
        <param name="autoplay" value="true">
        <param name="controller" value="false">
        <embed src="/static/sound/SOUND.mp3" controller="false" autoplay="true" autostart="true" type="audio/mpeg"></embed>
    </object>
</audio>

    J'ai la même clip audio en MP3, OGG, WAV et AIFF et puis de laisser le navigateur de choisir qui il veut jouer. Le audio balise HTML5, le object balise est pour les systèmes plus anciens, et embed fonctionne sur certains systèmes qui ne supporte pas la balise object.

    Je mettre cela à partir de quelques informations sur quelques sites, mais malheureusement, j'ai oublié l'URL.

    Mise à JOUR

    Depuis, j'ai passé à l'aide de howler.js pour ce genre de choses. Il gère automatiquement tous les navigateurs problèmes liés au son. Malheureusement, il ne prend pas en charge IE 6 à 8, mais j'ai renoncé à les soutenir ceux de toute façon.

    • les navigateurs qui avez-vous testé ce sur? J'ai essayé cela avec les non-optimales: Chrome et IE 6,7,8 joue un fichier MP3, pas de problème. Firefox et Opera avec succès revient à un fichier OGG. Cependant, Safari ne parvient pas et revient à la balise object, échoue à nouveau et revient à la balise embed; et affiche le message "le plugin manquant". IE9 revient au moins à la balise object.
    • Je vais jeter un oeil, mais je pense que j'ai mis le fichier aiff en y spécifiquement pour les Mac. BTW, le navigateur ne prend pas nécessairement essayer de les clips audio dans l'ordre qu'il trouve une liste... Généralement les navigateurs ont une préférence pour un particulier de codage et de recherche en premier. Je suis sûr que l'ordre n'a pas d'importance.
    • k.. juste testé. Il a bien fonctionné dans Safari. Êtes-vous sûr que vous avez inclus un fichier aiff?
    • J'ai appris plusieurs choses. Safari pour windows, Quicktime, c'est à dire windows media player, pour lire des fichiers audio à l'aide de la <audio> ou <embed> balises. Aussi, il est utile que si vous utilisez non corrompu .les fichiers mp3!
    • merci fonctionne très bien, avec la même marque vers le haut, puis-je utiliser jquery à jouer toutes les 10 secondes ? parce que <audio autoplay loop> répète très rapide
    • rien de ce qui est dans ma réponse est jquery... Mais que jquery est capable de déclencher des événements, alors peut-être vous pouvez créer une 10 de la deuxième boucle. Cependant, vous pouvez regarder la howler.js

    InformationsquelleAutor Tim Tisdall
  2. 5

    Avec le HTML5 audio balise, vous pouvez spécifier audio différents types de tenter de charge parce que chaque navigateur permet de types différents. Il y a un beau tableau de compatibilité sur cette page: http://html5doctor.com/native-audio-in-the-browser/

    Le code ci-dessous fonctionne avec la plupart des navigateurs. Il tente d'abord le nouveau HTML5 audio méthode, puis retombe sur le embed méthode.

    <audio width="100" height="100" autoplay="" controls="" tabindex="0">
<source type="audio/mpeg" src="songs/All-My-Life.mp3"></source>
<source type="audio/ogg" src="songs/All-My-Life.ogg"></source>
<source type="audio/wav" src="songs/All-My-Life.wav"></source>
<embed width="100" height="50" src="songs/All-My-Life.mp3">
</audio>
    • Le lien de l'URL suggère également l'ajout d'un flash de secours qui peut être une bonne idée.
    • Il y a des gens qui n'ont pas flash.
    • la 3ème source balise de type="audio/wav", je crois? Même quand je fixe qu'il ne joue pas dans IE9.
    • donc pourquoi il est une option de secours... peut-être en dernier recours?
    • vous savez ce qu'est un "secours" à droite...? flash player est presque une nécessité de secours après le navigateur natif de la lecture. seul un ignorant, l'homme pense que toutes les personnes qui ont un navigateur qui prennent en charge uniquement votre cherrypicked de la technologie
    • Je vois ce que tu veux dire. Mais finalement, je n'ai pas besoin d'ajouter du Flash pour la accepté de répondre pour obtenir une solution de travail. Pouvez-vous donner un exemple où le Flash est nécessaire?
    • Parfait il fonctionne comme un charme!

    InformationsquelleAutor Vektor