¿Es posible grabar etiquetas de audio html5?

Question

No he encontrado ningún recurso sobre cómo hacerlo ... incluso cambiar el color del reproductor sería bueno :)

Answer 1

Sí! La etiqueta de audio HTML5 con el atributo "controles" usa el reproductor predeterminado del navegador. Puede personalizarlo a su gusto si no usa los controles del navegador, sino que activa sus propios controles y habla con la API de audio a través de javascript.

Afortunadamente, otras personas ya lo han hecho. Mi jugador favorito en este momento es jPlayer, es muy fácil de usar y funciona muy bien. Echale un vistazo.

Answer 2

La apariencia de la etiqueta depende del navegador, pero puede ocultarla, compilar su propia interfaz y controlar la reproducción utilizando Javascript.

Answer 3

Para cambiar sólo el color del jugador, simplemente dirigirse al audio de la etiqueta en su archivo css, por ejemplo, en uno de mis sitios que el jugador se hizo invisible (blanca en blanco) por lo que añade:

audio { 
    background-color: #95B9C7; 
} 

Esto cambió el jugador a azul claro.

Answer 4

Si quieres estilo de los navegadores estándar de reproductor de música en el CSS:

audio { 
    enter code here; 
} 

Answer 5

Ken estaba en lo cierto también.

una etiqueta css:

audio { 

} 

le conseguirá algunos resultados. parece que no quiere que el jugador tenga una altura superior o inferior a 25px, pero el ancho puede acortarse o alargarse hasta cierto punto.

esto fue lo suficientemente bueno para mí; vea este ejemplo (advertencia, el audio se reproduce automáticamente): www.thenewyorkerdeliinc.com

Answer 6

Debe crear su propio reproductor que interactúe con el elemento de audio HTML5. Este tutorial le ayudará http://alexkatz.me/html5-audio/building-a-custom-html5-audio-player-with-javascript/

Answer 7

<audio> 

audio::-webkit-media-controls-panel 

audio::-webkit-media-controls-mute-button 

audio::-webkit-media-controls-play-button 

audio::-webkit-media-controls-timeline-container 

audio::-webkit-media-controls-current-time-display 

audio::-webkit-media-controls-time-remaining-display 

audio::-webkit-media-controls-timeline 

audio::-webkit-media-controls-volume-slider-container 

audio::-webkit-media-controls-volume-slider 

audio::-webkit-media-controls-seek-back-button 

audio::-webkit-media-controls-seek-forward-button 

audio::-webkit-media-controls-fullscreen-button 

audio::-webkit-media-controls-rewind-button 

audio::-webkit-media-controls-return-to-realtime-button 

audio::-webkit-media-controls-toggle-closed-captions-button 

Answer 8

Sí: Puede ocultar la interfaz de usuario incorporada en el navegador (quitando el atributo controls de audio) y en su lugar construir su propia interfaz y controlar la reproducción usando Javascript (source):

<audio id="player" src="vincent.mp3"></audio> 
<div> 
    <button onclick="document.getElementById('player').play()">Play</button> 
    <button onclick="document.getElementById('player').pause()">Pause</button> 
    <button onclick="document.getElementById('player').volume += 0.1">Vol+ </button> 
    <button onclick="document.getElementById('player').volume -= 0.1">Vol- </button> 
</div> 

Puede agregar clases CSS a cada uno de los elementos (en este caso, div + button s) y darles el estilo que desee.

Propiedades adicionales & métodos de HTMLAudioElement La interfaz de JavaScript se puede encontrar en here.