HTML5 es una de las tecnologias en el ambito web que esta logrando captar publico cada vez mayor, el motivo de esto es que HTML5 posee una gran ventaja sobre otras otras tecnologias en lo que consta a reproductores tanto de audio como video ya que esto permite no solo la carga rapida de un archivo sino que a su vez es soportado casi en un 90% de dispositivos moviles.
En este apartado del Blog mediante los codigos html vamos a crear un reproductor de audio HTML5 he instalarlo en el blog, para ser ciertos no es complicado hacerlo en Blogger, el unico problema es donde se va alojar el archivo de audio, para esto vamos a utilizar Dropbox como Hosting de archivos publicos; para aprender como vean el siguiente video:
una vez visto el video sobre Dropbox vamos a pasar a hacer el reproductor Html5; para eso vamos a ver el siguiente video en el cual aprenderemos como hacerlo:
bien pues ya en esta parte debemos aver aprendido como hacer el reproductor:
1. en una entrada ponemos en siguiente codigo:
<audio src" la url de tu archivo " controls></audio>
2.El atributo controls se pone para que se muestren los controles, asi como este hay algunos atributos mas, dentro de los mas importantes estan:
controls : mostrar controles del reproductor.
autoplay : reproduccion automatica.
src : para especificar la direccion del achivo.
loop : reproducir infinitamente la musica.
* para conocer algunos detalles mas nos dirigimos a la pagina de W3C
3. Para que el reproductor pueda reproducir el audio correctamente es recomendable pasar el archivo de audio al formato ".wav" para hacer esto pueden utlizar conversores de formato de archivos, ya que la compatibilidad del archivo es muy importante con algunos exploradores. en la pagina de la W3C pueden iformarse de este detalle.
4. La forma correcta para que pueda ser soportado en difetentes navegadores el reproductor es introduciendo el codigo con dos audios de diferentes formatos. y un texto que se muestra si el navegador es muy antiguo:
<audio controls>
<source src="horse.wav" type="audio/wav">
<source src="horse.mp3" type="audio/mp3">
tu navegador no soporta HTML5.
</audio>
* al final el reproductor analizaria internamente que archivo es preferible reproducir dependiendo del navegafor y si lo soporta.
5. preview:
