Comment intégrer de l'audio à l'intérieur d'un site web?

Vous pouvez utiliser beaucoup de choses.

• Si vous êtes un junkie, vous pouvez utiliser le HTML5 <audio> tag:

Voici l'officiel de la spécification du W3C pour la balise audio.

Utilisation:

<audio controls>
 <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4"
         type='audio/mp4'>
 <!-- The next two lines are only executed if the browser doesn't support MP4 files -->
 <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga"
         type='audio/ogg; codecs=vorbis'>
 <!-- The next line will only be executed if the browser doesn't support the <audio> tag-->
 <p>Your user agent does not support the HTML5 Audio element.</p>
</audio>

jsFiddle ici.

• Ou, si vous voulez soutenir les anciens navigateurs, vous pouvez utiliser beaucoup de l'audio gratuit flash joueurs disponibles. Tels que:

  • Dewplayer
  • Lecteur MP3 (nom ennuyeux... droit? 🙂 )
  • Site Web De Lecteur De Musique (encore plus ennuyeux... à droite?),
  • Zanorg Joueur

Remarque: je ne sais pas qui sont les meilleur, que je n'ai jamais utilisé une (encore).

---

Mise à JOUR: Comme mentionné dans une autre réponse du commentaire, vous êtes en utilisant XHTML 1.0 Transitional. Vous pourriez être en mesure d'obtenir <audio> de travailler avec certains hack.

---

Mise à JOUR 2: je viens de me rappeler une autre façon de faire de la lecture de l'audio. Cette sera travail en XHTML!!! C'est entièrement conforme aux normes.

Vous utilisez cette JavaScript:

var aud = document.createElement("iframe");
aud.setAttribute('src', "http://yoursite.com/youraudio.mp4"); //replace with actual file path
aud.setAttribute('width', '1px');
aud.setAttribute('height', '1px');
aud.setAttribute('scrolling', 'no');
aud.style.border = "0px";
document.body.appendChild(aud);

C'est ma réponse à l'autre question.

---

Mise à JOUR 3: Pour personnaliser les contrôles, vous pouvez utiliser quelque chose comme cette.

OriginalL'auteur

Voici une solution pour rendre accessibles lecteur audio avec valide xHTML et non-intrusive javascript grâce à W3C Web Audio API :

Quoi faire :

1. Si le navigateur est capable de lire, puis nous de contrôle de l'affichage
2. Si le navigateur n'est pas capable de lire, nous venons de rendre un lien vers le fichier

Tout d'abord, on vérifie si le navigateur implémente l'API Web Audio:

if (typeof Audio === 'undefined') {
    //abort
}

Puis nous instancier un Audio objet:

var player = new Audio('mysong.ogg');

Ensuite, nous pouvons vérifier si le navigateur est capable de décoder ce type de fichier :

if(!player.canPlayType('audio/ogg')) {
    //abort
}

Ou même s'il peut jouer du codec :

if(!player.canPlayType('audio/ogg; codecs="vorbis"')) {
    //abort
}

Ensuite, nous pouvons utiliser player.play(), player.pause();

J'ai fait un petit plugin JQuery que j'ai appelé nanodio pour tester cela.

Vous pouvez vérifier la façon dont il fonctionne sur ma page de démonstration (désolé, mais le texte est en français :p )

Suffit de cliquer sur un lien à jouer, et cliquez à nouveau pour faire une pause. Si le navigateur ne peut lire nativement, il le sera. Si il ne peut pas, il faut télécharger le fichier.

C'est juste un petit exemple, mais vous pouvez l'améliorer et de l'utiliser n'importe quel élément de votre page comme un bouton de commande ou de générer sur la volée avec javascript... tout ce que vous voulez.

OriginalL'auteur

Si vous êtes en utilisant le HTML 5, il est le <audio> élément.

Sur MDN:

La audio élément est utilisé pour intégrer son contenu dans un document HTML ou XHTML. L'élément audio a été ajouté dans le cadre de HTML5.

---

Mise à jour:

Dans l'ordre de lecture des fichiers audio dans le navigateur en versions HTML avant le 5 (y compris le XHTML), vous devez utiliser l'un des nombreux flash des lecteurs audio.

OriginalL'auteur