Búsqueda en el Foro:
Buscar


« Ver tema anterior :: Ver siguiente tema »  
Autor Mensaje
Mensaje24-08-2013, 21:23 (UTC)    
Título del mensaje: Poner 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.

Código:
<audio></audio>


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.
______________
Mensaje24-08-2013, 22:20 (UTC)    
Título del mensaje:

¡¡ Muy bueno Master esta increible !!
______________
Mensaje24-08-2013, 22:26 (UTC)    
Título del mensaje:

exelente!! master...eso si estubo bueno..saludos!!
______________
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group