web-dev-qa-db-fra.com

Contrôles personnalisés de balise audio HTML 5?

J'ai l'impression de prendre des pilules folles ici parce que je ne peux pas comprendre comment rendre la balise audio html 5 avec des contrôles personnalisés.

J'ai ce html jusqu'à présent, et cela ne fonctionne pas:

<audio controls preload='none'><source src='the url to the audio' type='audio/wav' /></audio>

Comment puis-je le faire pour afficher UNIQUEMENT le bouton de lecture, et peut-être lors de la lecture, afficher le bouton de pause à sa place.

D'après ce que j'ai lu,

Par défaut, l'élément n'exposera aucune sorte de commandes de lecteur. Vous pouvez créer vos propres contrôles avec du vieux HTML, CSS et JavaScript. L'élément a des méthodes comme play () et pause () et une propriété en lecture/écriture appelée currentTime. Il existe également un volume en lecture/écriture et des propriétés muettes. Vous avez donc vraiment tout ce dont vous avez besoin pour créer votre propre interface.

Si vous ne souhaitez pas créer votre propre interface, vous pouvez demander au navigateur d'afficher un ensemble de commandes intégré. Pour ce faire, incluez simplement l'attribut Controls dans votre balise.

Mais je ne trouve aucun exemple d'utilisation de contrôles personnalisés. Comment obtenez-vous juste le bouton de lecture?

html5html5-audio
26
Levitikon

Vous créez vos éléments comme ça ...

<audio id="yourAudio" preload='none'>
    <source src='the url to the audio' type='audio/wav' />
</audio>
<a href="#" id="audioControl">play!</a>

Et ajoutez des fonctionnalités:

var yourAudio = document.getElementById('yourAudio'),
    ctrl = document.getElementById('audioControl');

ctrl.onclick = function () {

    // Update the Button
    var pause = ctrl.innerHTML === 'pause!';
    ctrl.innerHTML = pause ? 'play!' : 'pause!';

    // Update the Audio
    var method = pause ? 'pause' : 'play';
    yourAudio[method]();

    // Prevent Default Action
    return false;
};

Pour le moment, le bouton n'est qu'un simple texte ("jouer!" Ou "mettre en pause!"), Mais vous pouvez faire à peu près tout ce que vous voulez avec CSS. Au lieu de définir le innerHTML, définissez le className et vous êtes prêt à partir!

36
sdleihssirhc

J'ai expérimenté l'utilisation d'un graphique à la place du lecteur. Définissez le style dans la balise 'audio' sur "display: none; width: 0px; height: 0px;" (aucun affichage ne fonctionne pas sur l'iPad, donc les paramètres supplémentaires largeur-0 et hauteur-0). De plus, ne pas inclure l'attribut "contrôles" devrait fonctionner. (différents systèmes/navigateurs et bureau vs iOS agissent tous différemment .....)

Par exemple:

<head>
<script>
function EvalSound(soundobj) {
  var thissound=document.getElementById(soundobj);
  thissound.play();
}
</script>
</head>

<body>
Click the speaker to hear the sound.  <a href="javascript:null()" onClick="EvalSound('sound1'); return false;">
<img src="sound_icon.png" alt="" title="sound_icon" width="" height="" class="" /></a>
<audio id="sound1" style="display: none; width: 0px; height: 0px;" src="sound.mp3" controls preload="auto" autobuffer>
</body>

Le "javascript: null ()" fonctionne sur iPad en conjonction avec "return false;" par opposition au "#" habituel.

Pour des informations plus utiles: http://www.phon.ucl.ac.uk/home/mark/audio/play.htm

5
Johnathan

si vous ne voulez que le bouton de lecture intégré, vous pouvez:

utilisez l'attribut de classe d'autio-tag:

 <audio controls preload='auto' class="audio_volume_only"><source src='the url to the 
audio' type='audio/mp3' /></audio>

et adapter le css:

 .audio_volume_only {
    width: 35px;
  }

j'espérais contrôles a quelques paramètres, mais pas trouvé ou mal compris .. nous verrons.

puis utilisez éventuellement onplay audio - événement pour modifier le css selon vos besoins. le bouton de lecture deviendra le bouton de pause dans les commandes intégrées

comme d'autres l'ont souligné, vous pouvez toujours créer le vôtre ...

4
womd