Musica Con HTML5

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.

<audio></audio>

Ahora como ponemos musica, es facil, ponemos la fuente dentro de audio.

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

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

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

<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

<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

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

<audio id="player"><source type="audio/mpeg" src="La musica en terminación .mp3"></source></audio>

Ahora creamos un div con los siguientes acesos.

<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

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