Cómo colocar control audio html en una página web

Cómo colocar control audio html en una página web

Seguro que a continuación de estas líneas verás que se presenta un control que permite la reproducción de audio. (De preferencia en formato mp3)

Para la reproducción es necesario que tengas una dirección url de un archivo de audio tipo mp3.  Es decir, necesita que el archivo de audio esté subido en algún servidor y lógicamente no pierda su extensión. (.mp3)

El código está escrito en HTML5 el cual lo permite actualmente la mayoría de los exploradores, y es el siguiente:

<audio src="dirección_url_del_audio.mp3" id="MediaPlayer1" autoplay="autoplay" controls="controls" loop="loop"> < /audio>

En el código puedes ver que se insertan ciertos parámetros para la reproducción, por ejemplo:

autoplay=”autoplay”  (Si deseas que se reproduzca automáticamente).

controls=”controls”  (Si deseas que el control se muestre).

loop=”loop”   (Si deseas que reproduzca de manera continua).

Sin embargo, para todos los casos, si deseas cambiar la acción, puedes quitar el parámetro por completo o dejar solamente las comillas vacías, por ejemplo:

Si no deseas que se reproduzca automáticamente el audio, los siguientes códigos harían lo mismo….

<audio src="dirección_url_del_audio.mp3" id="MediaPlayer1" controls="controls" loop="loop"> < /audio>

<audio src="dirección_url_del_audio.mp3" id="MediaPlayer1" autoplay="" controls="controls" loop="loop"> < /audio>

Como te fijarás, en el primero se elimina por completo el autoplay=”autoplay”  y en el segundo sigue el parámetro pero las comillas contienen vacío  autoplay=” ”.   Puede que te resulte mejor, eliminar el parámetro.

Si deseas cambiarle su posición o el tamaño en cuanto a su ancho puedes utilizar un poco de CSS, por ejemplo:

Alineación a la izquierda.

<audio autoplay="autoplay" controls="controls" id="MediaPlayer1" loop="loop" src="dirección_url_del_audio.mp3" style="float: left; width: 400px;">
< /audio>

Alineación a la derecha

<audio autoplay="autoplay" controls="controls" id="MediaPlayer1" loop="loop" src="dirección_url_del_audio.mp3" style="float: right; width: 400px;">
< /audio>

Centrado con un div

<div style="margin-left: auto; margin-right: auto; width: 400px;">
<audio autoplay="autoplay" controls="controls" id="MediaPlayer1" loop="loop" src="dirección_url_del_audio.mp3">
< /audio>
</div>

Lógicamente, debes cambiar los valores de width según tus requerimientos

OJO: Puede ser que el explorador que utilices ignore que lo configures de esta manera y no veas los cambios.

Si deseas ver accionado el control según se requiere puedes visitar el Blog Bienvenido Animador,  Por ejemplo, aquí puedes ver la entrada de ”el pollito pio”.

Por otra parte, no debes olvidar que si deseas insertar el código en un blog realizado por ejemplo en Blogger, debes hacerlo entrando a redacción en modo HTML.  Sin embargo no debe generarte problemas porque Blogger si lo admite.

Espero que este pequeño truquillo de codificación html te sirva y puedas insertarlo en tu blog o página que manejes.

Ojo: Es muy probable que en ciertos exploradores no puedas ver el cambio en su formato, por ejemplo el ancho, pero es funcional y reproduce el audio.  Prueba observando en Internet explorer y Mozilla Firefox.

Quizás también te interese:

• Letras saltantes (Jumping letters) con javascript
• Pantalla con color de fondo aleatorio.