Como poner musica en tu página web con HTML5
Esta simple opción de poner musica en tu página web se consiste en agregar la etiqueta audio con la url de la musica en mp3.
Ahora como ponemos musica, es facil, ponemos la fuente dentro de audio.
Cita: <audio><source></source></audio>
Ahora vamos a saber como ponemos musica, hacemo lo siguiente.
Ponemos el tipo de audio y la dirección de la musica.
Cita: <source type="audio/mpeg" src="La musica en terminación .mp3"></source>
type="audio/mpge" || De esta menera selecionamos el tipo del audio.
src="link de la pagina en mp3" || Ponemos el enlace directo de tu musica en mp3.
Va a quedar de esta manera.
Cita: <audio><source type="audio/mpeg" src="La musica en terminación .mp3"></source></audio>
Desde aqui, ya tenemos musica.
Ahora pasemos a la edición.
- Poner autoreproducción. (autoplay)
En la parte de audio, vamos a poner autoplay.
Cita: <audio autoplay><source type="audio/mpeg" src="La musica en terminación .mp3"></source></audio>
- Poner Repetir la misma canción. (loop)
En la misma parte del audio, ponemos loop
Cita: <audio loop><source type="audio/mpeg" src="La musica en terminación .mp3"></source></audio>
- Como poner controles al reproductor. (controls)
usamos la palabra clase que es, controls
Cita: <audio controls><source type="audio/mpeg" src="La musica en terminación .mp3"></source></audio>
- Cambiar el estilo y agregar un reproductor con botones de play - pause - pausa y subida de volumenes.
Dentro del audio ponemos la id de player.
Cita: <audio id="player"><source type="audio/mpeg" src="La musica en terminación .mp3"></source></audio>
Ahora creamos un div con los siguientes acesos.
Cita: <div>
<button onclick="document.getElementById('player').play();">Reproducir</button>
</div>
Son documentos en cual hace que los cambios que usemos por ejemplo el de play si no tenemos el código autoplay agregado, ya podamos reproducir la musica cuando el oyente quiera.
Para eso en la id ponemos player y damos a play para que el aceso del reproductor se efectue correctamente cuando apretamos.
Vamos hacer lo mismo valores con los botones pause - volume
Código: <div>
<button onclick="document.getElementById('player').play();">Reproducir</button>
<button onclick="document.getElementById('player').pause();">Pausar</button>
<button onclick="document.getElementById('player').volume += 0.1;">Subir</button>
<button onclick="document.getElementById('player').volume -= 0.1;">Bajar</button>
</div>
Haciendo estos paso podemos ya poner reproductor de musica, tambien funciónaria la musica en formato .ogg
Las musicas en mp3 la pueden conseguir subiendolas a un servidor que aloje archivos mp3 o tambien desde páginas donde dejen enlaces directo en mp3 como lo es beemp3.com.
Tutorial de página + Generador
Con estos simples pasos que usamos con html5, podremos colocar musica de manera facil y rapida en nuestra página web.
Saludos. ______________  |
