A lo largo de este post, podrás aprender a crear tu propio reproductor de música en HTML; a base de puros códigos. Así no tendrás la necesidad de la descarga de ningún programa y podrás usarlo tanto de manera online, como offline.
Reproductor de música en HTML
En la actualidad, podrás encontrar navegando en la web, cientos de programas especializados para la reproducción de música (o de cualquier tipo de audio); algunos mejores que otros y así, con más opciones y también más alternativas. Sin embargo, es posible que nosotros mismos, mediante el uso de códigos, podamos crear nuestro propio reproductor de música en HTML; claro está, que sea bastante sencillo, pero que cumpla su función.
No se necesita que seas un experto en códigos y programación para esta tarea, ya que la verdad, es algo bastante simple de hacer y muy fácil.
¿Qué es HTML?
Antes de comenzar con el contenido propiamente del artículo, creemos que es de suma importancia, que conozcas un poco acerca de lo que es HTML; algo de lo que probablemente hayas escuchado mencionar o leer en algún momento.
El HTML, significa HyperText Markup Language; el cual, es un lenguaje de códigos usados para el desarrollo de páginas web. De manera más específica, es el código que nos ayuda a montar toda la información, datos, contenido multimedia, texto y mucho más; en cuanto al diseño y estilo, queda de parte de los CSS, otro lenguaje de códigos.
Al estar leyendo este artículo, sabrás que es realizado mediante este mismo lenguaje de HTML; los navegadores web como Chrome, Microsoft Edge y demás, se encargan de «traducir» este código para mostrarnos el contenido normal de la página. Para que tengas una idea más clara, puedes probar en este momento el siguiente atajo, desde tu navegador de Chrome: Ctrl+Shift+I; esto abrirá la herramienta de desarrolladores y verás cómo luce realmente una página web, si ésta no es «traducida».
Ya dejando en claro, de manera sucinta lo que es el código de HTML; ahora pasaremos a mostrar cómo crear tu reproductor de música.
Reproductor de música en HTML, códigos
Para que veas cómo luce un reproductor de música en un navegador web, prueba arrastrando alguna pista que tengas, dentro del navegador; verás que este comenzará a reproducirla y te mostrará los controladores principales.
Como te dijimos, es algo bastante sencillo, que contará simplemente con el botón de Play/Pause, el navegador de tiempo, el tiempo en números y el controlador de volumen. Básicamente, todos los demás navegadores, cuentan con un diseño parecido.
Esto te servirá mucho, si de casualidad estás creando tu propia página web y/o un blog, y tienes la necesidad de insertar un audio; aunque igual, es posible que lo puedas crear para ti mismo. Te recomendamos que dispongas de algún programa de desarrollo de páginas web, para ayudarte, aunque con un mismo blog de notas, servirá.
Código para insertar el reproductor
Una vez que ya tengas el cuerpo de tu página web con HTML5; el código que te permitirá insertar el reproductor sencillo, será éste:
<audio src="../music/woman.mp3" controls="controls" type="audio/mpeg" preload="preload">
</audio>La etiqueta «<audio></audio>» es lo que nos va a permitir introducir nuestra pista, dentro de ella misma, habrán ciertos atributos. En este caso, el SRC, es la dirección de la carpeta donde se encuentra nuestra música; el Controls, es la que nos mostrará el panel de control sencillo; el Preload, es la carga en el búfer del archivo, para evitar que se trabe y, finalmente, el Autoplay, que puede ser opcional o no, pues este hace que nuestra pista de inicie de manera automática.
Los anteriores atributos, sí es necesario que estén presentes, para que nuestro reproductor de música en HTML, funcione de manera óptima.
Si te gusta y te llama mucho la atención esta parte del mundo de la informática, todo lo que tenga que ver con los códigos, la programación y demás; puedes visitar el siguiente artículo para comenzar a aprender más sobre éste y otros lenguajes de códigos: ¿Qué lenguaje de programación aprender?.
Código para crear una lista de música
En el apartado anterior, vimos simplemente cuál era el código para insertar un reproductor, con una ruta especificada, o mejor dicho, con un audio en específico; por lo que esto, no reproducirá más ninguna otra canción, que la que hayas seleccionado para el atributo «src»; así que si deseas otra pista, tendrías que ir al código fuente y cambiar la dirección del atributo o incluso, introducir otro reproductor, para colocar la nueva dirección de la carpeta.
No obstante, es posible introducir otro código, pero esta vez de Javascript, que te va a permitir introducir un playlist, para que puedas crear el tuyo propio.
Los mismos programas o en el mismo blog de notas, te va a permitir introducir este nuevo lenguaje de códigos. Se te va a crear un cuadro, con una lista de canciones, en el cual, mediante un click, puedes seleccionar la que quieres escuchar en el momento; puedes poner en la lista, tantas canciones como quieras, pues no hay límites en ella.
El código fuente necesario de Javascript, para poder crear tu propio playlist y ejecutar en tu reproductor de música en HTML; es el siguiente:
<script>
function cambiarTrack(track) {
var path = track.getAttribute("path")
viejo_audio = document.getElementById("reproductor")
audio_padre = viejo_audio.parentNode
audio_padre.removeChild(viejo_audio)
nuevo_audio = document.createElement("audio")
nuevo_audio.setAttribute("id","reproductor")
nuevo_audio.setAttribute("controls", "controls")
// nuevo_audio.setAttribute("autoplay", "autoplay")
source = document.createElement("source")
source.setAttribute("src", path)
source.setAttribute("type", "audio/mpeg")
source.setAttribute("id", "reproductorSource")
nuevo_audio.appendChild(source)
audio_padre.appendChild(nuevo_audio)}
function cargarReproductor() {
var select = document.getElementById("selectTrack")
var path = select.options[0].getAttribute("path")
nuevo_audio = document.createElement("audio")
nuevo_audio.setAttribute("id","reproductor")
nuevo_audio.setAttribute("controls", "controls")
source = document.createElement("source")
source.setAttribute("src", path)
source.setAttribute("type", "audio/mpeg")
source.setAttribute("id", "reproductorSource")
nuevo_audio.appendChild(source)
padre = document.getElementById("reproductorBox")
padre.appendChild(nuevo_audio)
}
</script>
<div id="reproductorBox"></div>
<select id = "selectTrack" multiple onchange="cambiarTrack(this.options[this.selectedIndex]);">
<option path="../music/take-on-me.mp3">Ah Ah - Take on me</option>
<option path="../music/dust-in-the-wind.mp3">Kansas - Dust in the wind</option>
<option path="../music/how-deep-is-your-love.mp3">Bee Geees - How deep is your love</option>
</select>
<script>cargarReproductor();</script>Es importante, que en cada etiqueta «option» que veas, introduzcas la dirección de la música con su nombre, tal como el ejemplo anterior; ya que es posible, que ocurra algún error a la hora de reproducir el audio.
En el siguiente vídeo de aquí abajo, podrás ver de manera más gráfica, todo lo que te explicamos en este artículo, en caso de que te hayas quedado con dudas. Además de que podrás personalizarlo y más, usando códigos y lenguajes de programación más complejos.