Html 5 controles personalizados de etiqueta de audio?

Siento que estoy tomando pastillas locas aquí porque no puedo entender cómo renderizar la etiqueta de audio html 5 con controles personalizados.Html 5 controles personalizados de etiqueta de audio?

tengo unas pocas cosas html hasta el momento, y funciona sin problemas:

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

¿Cómo consigo para que muestre únicamente el botón de reproducción, y quizás cuando se juega, muestro el botón de pausa en su lugar.

Por lo que leo,

Por defecto, el elemento no se exponga a cualquier tipo de controles del reproductor. Puede crear sus propios controles con HTML simple, CSS y JavaScript. El elemento tiene métodos como play() y pause() y una propiedad de lectura/escritura llamada currentTime. También hay volumen de lectura/escritura y propiedades silenciadas. Así que realmente tiene todo lo que necesita para construir su propia interfaz.
If you don’t want to build your own interface, you can tell the 
navegador para mostrar un conjunto incorporado de controles. Para hacer esto, solo incluye el atributo de controles en su etiqueta.

Pero no puedo encontrar ningún ejemplo de uso de controles personalizados. ¿Cómo se obtiene solo el botón de reproducción?

Fuente

2011-10-03 Levitikon

Usted crea sus elementos así ...

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

y añadir algunas funciones:

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 este momento, el botón es sólo de texto simple ("jugar!" O "pausa! "), pero podrías hacer casi cualquier cosa que quisieras con CSS. En lugar de configurar el innerHTML, configure el className y listo.

Fuente

2011-10-03 18:54:54 sdleihssirhc

Aaaaah, veo .. – Levitikon

Nice !! Creé un jsfiddle de esto: http://jsfiddle.net/pLjM7/ –

He estado experimentando con el uso de un gráfico en lugar del reproductor. Establezca el estilo dentro de la etiqueta 'audio' en "display: none; width: 0px; height: 0px;" (mostrar ninguno no funciona en el iPad, por lo tanto, la configuración adicional de ancho 0 y altura 0). Además, no incluir el atributo "controles" debería funcionar. (Diferentes sistemas de escritorio/Navegadores & vs iOS todos actúan de manera diferente .....)

Ej:

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

El "javascript: null()" que funciona en el iPad en conjunción con "return false;" a diferencia del "#" habitual.

Para obtener más información realmente útil: http://www.phon.ucl.ac.uk/home/mark/audio/play.htm

Fuente

2012-11-14 01:57:37 Johnathan

No tiene que configurar el estilo para "mostrar: ninguno;". Si miras, tienes una etiqueta de "controles". Esto sirve como un booleano para designar si el jugador se muestra o no. Solo deshazte de eso y no tendrás que incluir ningún CSS en línea. – Booker

Lamentablemente, el enlace 'más información realmente útil' parece estar roto, el objetivo se evaporó. – Opsimath

si desea que la incorporada en el botón play sólo le podría: atributo de clase de

uso Autio-tag:

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

y en forma el css:

.audio_volume_only { 
    width: 35px; 
    }

esperaba controls tiene algunos parámetros, but not found any or misunderstood .. ya veremos.

entonces posiblemente use audio's onplay - event para cambiar el CSS a su necesidad. el botón de reproducción se convertirá en el botón de pausa en los controles incorporados en

como otros señalaron, siempre se puede hacer su propio ....

Fuente

2014-01-14 16:21:40 womd

Html 5 controles personalizados de etiqueta de audio?

Respuesta

Cuestiones relacionadas