Reproducir música en cualquier navegador web

Altavoz plateado

Cómo incluir un reproductor de audio en una página web de manera tal que se pueda escuchar en los navegadores web más populares

Introducción

Para que la música se pueda escuchar en el navegador web Google Chrome y Microsoft Internet Explorer necesitamos que esté en formato MP3. Y para que se pueda oir en el navegador Mozilla Firefox el formato de audio tiene que ser OGG

En la página web Online-Convert.com podemos realizar la conversión entre un formato de audio y otro

Modo de empleo

  1. Supongamos que tenemos la música Rumba.mp3
  2. En Online-Convert.com convertimos el audio a Rumba.ogg
  3. Inserta el siguiente código HTML en tu página web
    <audio controls="controls" loop="loop" preload="auto">
    <source src="Rumba.ogg" type="audio/ogg" />
    <source src="Rumba.mp3" type="audio/mp3" />
    Tu navegador no puede reproducir la música
    </audio>

Parámetros de la etiqueta <audio>

ParámetroExplicación
autoplayReproducción automática: No es necesario darle al botón Play
loopModo continuo: Al acabar la música vuelve a empezar
controlsMuestra los controles: El volumen y los botón Play y Pause
preload="none"No se descarga la música hasta que tiene que sonar
preload="auto"Se utiliza un báfer: Se descarga antes de sonar
preload="metadata"Sólo se descarga previamente los metadatos

Imágenes de ejemplo del reproductor de audio:

Altavoz Munny

En Firefox:
Audio en Firefox

En Chrome:
Audio en Chrome

Controles mediante JavaScript

<audio id="musica">
<source src="Rumba.ogg" type="audio/ogg" />
<source src="Rumba.mp3" type="audio/mp3" />
Tu navegador no puede reproducir la música
</audio>
<div>
<button onclick="document.getElementById('musica').play()">Reproduce</button>
<button onclick="document.getElementById('musica').pause()">Pausa</button>
<button onclick="document.getElementById('musica').volume+=0.1">Subir volumen</button>
<button onclick="document.getElementById('musica').volume-=0.1">Bajar volumen</button>
</div>

Comentarios

Proinf.net, ©2003-2017 ci 3.1.5 (CC) Esta obra está bajo una licencia de Creative Commons Este software está sujeto a la CC-GNU GPL