[HTML][MEDIO] Crear un reproductor de música utilizando HTML5

  • 0 Respuestas
  • 1966 Vistas

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado Tulkalex

  • *
  • Colaborador
  • *
  • Mensajes: 856
  • Actividad:
    36.67%
  • Country: 00
  • Reputación 5
    • Ver Perfil
    • MI github
    • Email
Crear un reproductor de música utilizando HTML5

El nuevo estándar HTML 5 nos proporciona nuevas etiquetas que facilitan mucho las cosas a la hora de crear nuestras aplicaciones. Una de ellas es la etiqueta “audio”, que nos permitirá crear un reproductor de música para el archivo que le indiquemos.

El problema que tiene actualmente HTML 5 es que no todos los navegadores implementan todas sus funcionalidades, por lo que si decidimos hacer uso de esta etiqueta, debemos de asegurarnos que funcione en todos los navegadores, y para ello utilizaremos un reproductor basado en Flash como respaldo para aquellos navegadores que no interpreten las nuevas etiquetas HTML 5.

Para utilizar el tag “audio”, solo debemos de hacer la llamada junto con el parámetro “controls”. Dentro de la etiqueta, debemos de añadir el tag “source”, donde se le indica la canción que debe de reproducir.

Código: HTML5
  1. <audio controls>
  2. <source src="song.mp3" type="audio/mp3">
  3.  


Con esto conseguiremos que el navegador cree un reproductor, y según el navegador que utilicemso, este tendrá una apariencia u otra.

Un problema que nos podemos encontrar, es que no se pueda interpretar la extensión que le hayamos indicado en el source. Para solucionarlo, podemos indicarle varias extensiones seguidas, hasta que encuentre una que pueda reproducir. Un ejemplo sería el siguiente.

Código: HTML5
  1. <audio controls>
  2.   <source src="song.mp3" type="audio/mp3" />
  3.   <source src="song.ogg" type="audio/ogg" />


Ahora para solucionar lo de las incompatibilidades de los navegadores, vamos a utilizar el reproductor WP Audio Player. La idea es mirar si se ha podido generar el reproductor mediante la etiqueta “audio”, de no ser así, entonces se generará mediante este reproductor. El código quedaría de la siguiente forma:

Código: Javascript
  1. <audio id="audioplayer" controls>
  2.   <source src="song.mp3" type="audio/mp3" />
  3.   <source src="song.ogg" type="audio/ogg" />
  4. </audio>
  5. <script type="text/javascript">
  6.     var audioTag = document.createElement('audio');
  7.     if (!(!!(audioTag.canPlayType) && ("no" != audioTag.canPlayType("audio/mpeg")) && ("" != audioTag.canPlayType("audio/mpeg")))) {
  8.         AudioPlayer.embed("audioplayer", {soundFile: "song.mp3"});
  9.     }
  10. </script>

De esta forma nos aseguramos de que en todos los navegadores se podrá reproducir el archivo que le indiquemos.
« Última modificación: Mayo 10, 2014, 02:28:19 pm por Destructor.cs »

 

Curso: [Academia WordPress 2016] [Aprende A Crear Sitiros Web De Verdad]

Iniciado por Mr.Kratos

Respuestas: 0
Vistas: 3076
Último mensaje Julio 21, 2018, 04:24:05 pm
por Mr.Kratos
Curso CSS Avanzado [Aprende a crear animaciones para la web]

Iniciado por Mr.Kratos

Respuestas: 0
Vistas: 3239
Último mensaje Julio 30, 2018, 04:37:41 pm
por Mr.Kratos
[Tutorial] Como crear un google maps con marcadores

Iniciado por graphixx

Respuestas: 5
Vistas: 3465
Último mensaje Agosto 28, 2014, 10:52:04 am
por Cl0udswX
Freedombone 4.0, una distribución para crear servidores domésticos

Iniciado por Dragora

Respuestas: 0
Vistas: 823
Último mensaje Agosto 15, 2019, 01:19:44 am
por Dragora
Curso: JavaScript y jQuery [Crear Sitios y Apps Web]

Iniciado por Mr.Kratos

Respuestas: 0
Vistas: 2783
Último mensaje Julio 27, 2018, 01:39:37 pm
por Mr.Kratos