web-dev-qa-db-fra.com

Incorporation d'un lecteur multimédia dans un site Web à l'aide de HTML

Ce que je veux faire, c'est intégrer des fichiers musicaux dans un site Web (avoir quelque chose comme un petit lecteur mp3 sur le site). Je veux que le public puisse jouer, arrêter etc. les chansons en utilisant des contrôleurs sur mesure.

Comment coder ces boutons personnalisés pour qu'ils fonctionnent tous correctement?

htmlembedaudio-player
12
Vetaxili

Vous pouvez utiliser beaucoup de choses.

  • Si vous êtes accro aux standards, vous pouvez utiliser le HTML5 <audio> tag:

Voici la spécification officielle du W3C pour la balise audio .

Usage:

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

Remarque: Je ne sais pas quels sont les meilleurs, car je n'en ai jamais (encore) utilisé.

MISE À JOUR: Comme mentionné dans le commentaire d'une autre réponse, vous utilisez XHTML 1.0 Transitional. Vous pourrez peut-être obtenir <audio> pour travailler avec un hack.

MISE À JOUR 2: Je viens juste de me souvenir d'une autre façon de lire l'audio. Cela fonctionnera en XHTML !!! Ceci est entièrement conforme aux normes.

Vous utilisez ce 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);

Ceci est ma réponse à une autre question.

MISE À JOUR 3: Pour personnaliser les contrôles, vous pouvez utiliser quelque chose comme this .

28
Anish Gupta

Certainement l'élément HTML5 est la voie à suivre. Il existe au moins un support de base dans les versions les plus récentes de presque tous les navigateurs:

http://caniuse.com/#feat=audio

Et cela permet de spécifier quoi faire lorsque l'élément n'est pas supporté par le navigateur. Par exemple, vous pouvez ajouter un lien vers un fichier en faisant:

<audio controls src="intro.mp3">
   <a href="intro.mp3">Introduction to HTML5 (10:12) - MP3 - 3.2MB</a>
</audio>

Vous pouvez trouver ces exemples et plus d'informations sur l'élément audio dans le lien suivant:

http://hacks.mozilla.org/2012/04/enhanceyourhtml5appwithaudio/

Enfin, la bonne nouvelle est que le Derby du mois d'avril de mozilla concerne cet élément, ce qui va probablement fournir de nombreux exemples de la façon de tirer le meilleur parti de cet élément:

http://hacks.mozilla.org/2012/04/april-dev-derby-show-us-what-you-can-do-with-html5-audio/

4
txominpelu

Voici une solution pour rendre un lecteur audio accessible avec xHTML valide et javascript non intrusif grâce à W3C Web Audio API :

Que faire :

  1. Si le navigateur est capable de lire, nous affichons des commandes
  2. Si le navigateur n'est pas capable de lire, nous rendons simplement un lien vers le fichier

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

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

Ensuite, nous instancions un objet Audio:

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 lire le 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 comment cela fonctionne sur ma page de démonstration (désolé, mais le texte est en français: p)

Cliquez simplement sur un lien pour jouer, puis cliquez à nouveau pour faire une pause. Si le navigateur peut le lire nativement, il le fera. Si ce n'est pas le cas, il devrait télécharger le fichier.

Ce n'est qu'un petit exemple, mais vous pouvez l'améliorer pour utiliser n'importe quel élément de votre page comme bouton de contrôle ou en générer à la volée avec javascript ... Tout ce que vous voulez.

1
Charles-Édouard Coste
<html>

<head>
  <H1>
      Automatically play music files on your website when a page loads
    </H1>
</head>

<body>
  <embed src="YourMusic.mp3" autostart="true" loop="true" width="2" height="0">
  </embed>
</body>

</html>
1
Qais Yousuf

J'ai trouvé que soit IE ou Chrome étouffé sur la plupart d'entre eux, soit ils nécessitaient des bibliothèques externes. Je voulais juste lire un MP3, et j'ai trouvé le page http://www.w3schools.com/html/html_sounds.asp très utile.

<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
  <embed height="50" width="100" src="horse.mp3">
</audio>

A fonctionné pour moi dans les navigateurs que j'ai essayés, mais je n'avais pas certains des anciens autour à ce moment.

0
Karl Henselin

Si vous utilisez HTML 5, il y a le <audio> élément.

Activé MDN :

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

Mise à jour:

Afin de lire l'audio dans le navigateur dans les versions HTML antérieures à 5 (y compris XHTML), vous devez utiliser l'un des nombreux lecteurs audio flash.

0
Oded