Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.

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

  • 0 Respuestas
  • 1416 Vistas

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

Desconectado alexander1712

  • *
  • Underc0der
  • Mensajes: 850
  • Actividad:
    0%
  • Reputación -2
    • Ver Perfil
    • El blog del programador
    • Email
« en: Enero 26, 2013, 02:22:28 am »
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 »

 

¿Te gustó el post? COMPARTILO!



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

Iniciado por Mr.Kratos

Respuestas: 0
Vistas: 1566
Último mensaje Julio 21, 2018, 04:24:05 pm
por Mr.Kratos
[Tutorial] Como crear un google maps con marcadores

Iniciado por graphixx

Respuestas: 5
Vistas: 2272
Último mensaje Agosto 28, 2014, 10:52:04 am
por Cl0udswX
Curso CSS Avanzado [Aprende a crear animaciones para la web]

Iniciado por Mr.Kratos

Respuestas: 0
Vistas: 1560
Último mensaje Julio 30, 2018, 04:37:41 pm
por Mr.Kratos
Curso: JavaScript y jQuery [Crear Sitios y Apps Web]

Iniciado por Mr.Kratos

Respuestas: 0
Vistas: 1457
Último mensaje Julio 27, 2018, 01:39:37 pm
por Mr.Kratos
Crear un servidor local con appserv

Iniciado por ANTRAX

Respuestas: 7
Vistas: 3743
Último mensaje Agosto 09, 2010, 12:52:45 pm
por Dk.J@ck