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

  • 0 Respuestas
  • 1930 Vistas

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

Conectado Harkonidaz

  • *
  • Ex-Staff
  • *****
  • Mensajes: 851
  • Actividad:
    0%
  • Country: 00
  • Reputación -2
    • 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. <You are not allowed to view links. Register or Login controls>
  2. <You are not allowed to view links. Register or Login src="song.mp3" type="audio/mp3">
  3. </You are not allowed to view links. Register or Login>
  4.  


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. <You are not allowed to view links. Register or Login controls>
  2.   <You are not allowed to view links. Register or Login src="song.mp3" type="audio/mp3" />
  3.   <You are not allowed to view links. Register or Login src="song.ogg" type="audio/ogg" />
  4. </You are not allowed to view links. Register or Login>


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: 2926
Ú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: 3037
Ú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: 3420
Ú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: 749
Ú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: 2653
Último mensaje Julio 27, 2018, 01:39:37 pm
por Mr.Kratos