Controlli personalizzati per tag audio 5 HTML?

Mi sento come se stessi prendendo pillole pazze qui perché non riesco a capire come rendere il tag audio 5 HTML con controlli personalizzati.Controlli personalizzati per tag audio 5 HTML?

ho questo html finora, e funziona senza alcun problema:

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

Come faccio a farlo per visualizzare solo il pulsante di riproduzione, e forse quando si gioca, mostro il pulsante di pausa al suo posto.

Da quello che ho letto,

Per impostazione predefinita, l'elemento non esporrà alcun tipo di controlli del lettore. È possibile creare i propri controlli con semplici HTML vecchi, CSS e JavaScript. L'elemento ha metodi come play() e pause() e una proprietà di lettura/scrittura chiamata currentTime. Vi sono inoltre proprietà di lettura/scrittura volume e disattivate. Quindi hai davvero tutto ciò di cui hai bisogno per creare la tua interfaccia .
If you don’t want to build your own interface, you can tell the 
browser per visualizzare un set integrato di controlli. Per fare ciò, solo include l'attributo controls nel tag.

Ma non riesco a trovare alcun esempio di utilizzo di controlli personalizzati. Come si ottiene il pulsante di riproduzione?

fonte

2011-10-03 Levitikon

te Crea il tuo elementi in questo modo ...

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

e aggiungere alcune funzionalità:

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; 
};

In questo momento, il pulsante è un testo solo semplice ("play!" O "mettere in pausa! "), ma potresti fare praticamente tutto quello che volevi con i CSS. Invece di impostare innerHTML, imposta className e sei a posto!

fonte

2011-10-03 18:54:54 sdleihssirhc

Aaaaah, vedo .. – Levitikon

Nice !! Ho creato un jsfiddle da questo: http://jsfiddle.net/pLjM7/ –

Ho sperimentato l'uso di un'immagine invece del lettore. Imposta lo stile nel tag "audio" su "display: none; width: 0px; height: 0px;" (nessuno display non funziona su iPad, quindi le impostazioni aggiuntive larghezza-0 e altezza-0). Inoltre, non includere l'attributo "controlli" dovrebbe funzionare. (Diversi sistemi/browser del desktop & vs iOS tutti agire in modo diverso .....)

Esempio:

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

Il "javascript: null()" funziona su iPad in combinazione con "return false;" al contrario del solito "#".

Per ulteriori informazioni davvero utili: http://www.phon.ucl.ac.uk/home/mark/audio/play.htm

fonte

2012-11-14 01:57:37 Johnathan

Non devi impostare lo stile su "display: none;". Se guardi, hai un tag "controlli". Questo serve da booleano per indicare se il giocatore è mostrato o meno. Basta sbarazzarsi di questo e non dovrai includere alcun css in linea. – Booker

Tristemente il link 'più informazioni veramente utili' sopra sembra essere rotto, l'obiettivo evaporato. – Opsimath

se si desidera che il built-in play-tasto solo si potrebbe: attributo di classe di

uso autio-tag:

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

e in forma il css:

spero controls ha alcuni parametri, but not found any or misunderstood .. vedremo.

quindi utilizzare eventualmente audio's onplay - event per modificare il css secondo le proprie necessità. il pulsante di riproduzione diventerà il pulsante di pausa in controlli integrati

come altri hanno sottolineato, si può sempre fare il vostro proprio ....

fonte

2014-01-14 16:21:40 womd

Controlli personalizzati per tag audio 5 HTML?

risposta

Problemi correlati