Html 5 balise audio contrôles personnalisés?

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 il ne fonctionne pas de problème:

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

Comment faire pour qu'il n'affiche que le bouton play, et peut-être lors de la lecture, affiche le bouton pause à sa place.

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

Par défaut, l'élément ne sera pas exposer n'importe quelle sorte de contrôle de joueur. Vous pouvez créer vos propres contrôles avec de vieux HTML, CSS, et JavaScript. L'élément a des méthodes comme jouer() et pause() et un la propriété read / write s'appelle currentTime. Il y a aussi lire / écrire le volume et les propriétés de mouture. Donc tu as vraiment tout ce qu'il faut pour construire votre propre interface.

If you don’t want to build your own interface, you can tell the

navigateur pour afficher un ensemble de contrôles. Pour ce faire, il suffit incluez l'attribut controls dans votre balise.

mais je ne trouve aucun exemple d'utilisation de commandes personnalisées. Comment tu obtiens le bouton play?

25
demandé sur Levitikon 2011-10-03 21:55:24
la source

3 ответов

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

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

et ajouter quelques 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;
};

en ce moment, le bouton est un simple texte ("play!"ou" pause!"), mais vous pouvez faire à peu près tout ce que vous voulez avec CSS. Au lieu de mettre le innerHTML , mettez le className et vous êtes bon pour aller!

35
répondu sdleihssirhc 2011-10-03 22:54:54
la source

j'ai expérimenté l'utilisation d'un graphique à la place du lecteur. Définissez le style dans la balise' audio 'à" display: none; width: 0px; height: 0px; " (display none ne fonctionne pas sur iPad, donc les paramètres supplémentaires width-0 et height-0). De plus, ne pas inclure l'attribut "contrôles" devrait fonctionner. (différents systèmes / navigateurs et postes de travail par rapport à 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;" contrairement à l'habituel "#".

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

5
répondu Johnathan 2012-11-14 06:11:48
la source

si vous voulez le bouton play intégré seulement vous pouvez:

utiliser l'attribut de classe de Autio-tag:

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

et correspondre à la css:

 .audio_volume_only {
    width: 35px;
  }

j'espère contrôles a quelques paramètres, mais pas trouvé ou mal compris .. nous allons le voir.

puis éventuellement utiliser audio onplay-event pour changer le css à votre besoin. le bouton play deviendra le bouton pause dans les commandes intégrées

comme d'autres l'ont souligné, vous pouvez toujours faire votre propre....

2
répondu womd 2017-05-23 15:25:39
la source

Autres questions sur