De hace unos años para acá, manipular elementos multimedia (audio y video) utilizando únicamente código html/css/javascript se ha vuelto una cosa de lo más facil e incluso placentera. Vamos que antes tenías que incrustar un reproductor probablemente hecho en flash y hacer magia negra para poder mandarle las canciones que querías que reprodujera, de pronto el navegador no tenía soporte para flash y todo era en vano.
No obstante con la llegada de HTML5 y los avances en mejorar javascript, la cosa se ha vuelto universal y esos problemas son cosa del pasado.
Ahora basta con jugar un poco con el código para lograr resultados asombrosos. Vamos a demostrarlo creando una playlist de canciones básica.
HTML5
Lo primero es crear un elemento audio con el primer track de la playlist cargado.
<audio id="audio" preload="auto" tabindex="0" controls="" >
<source src="https://s3-us-west-2.amazonaws.com/allmetalmixtapes/Saxon%20-%201984%20-%20Crusader/01%20-%20Crusader%20Prelude.mp3">
</audio>
para la parte de html yo elegiré crear una lista de canciones utilizando ul. Pero es decision de ustedes como quieran darle el estilo a su propio playlist.
<ul id="playlist">
<li class="active">
<a href="https://s3-us-west-2.amazonaws.com/allmetalmixtapes/Saxon%20-%201984%20-%20Crusader/01%20-%20Crusader%20Prelude.mp3">
Saxon - Crusader Prelude
</a>
</li>
<li>
<a href="https://s3-us-west-2.amazonaws.com/allmetalmixtapes/Saxon%20-%201984%20-%20Crusader/03%20-%20Little%20Bit%20Of%20What%20You%20Fancy.mp3">
Saxon - Little Bit Of What You Fancy
</a>
</li>
<li>
<a href="https://s3-us-west-2.amazonaws.com/allmetalmixtapes/Saxon%20-%201984%20-%20Crusader/04%20-%20Sailing%20To%20America.mp3">
Saxon - Sailing To America
</a>
</li>
<li>
<a href="https://s3-us-west-2.amazonaws.com/allmetalmixtapes/Saxon%20-%201984%20-%20Crusader/05%20-%20Set%20Me%20Free.mp3">
Saxon - Set Me Free
</a>
</li>
<li>
<a href="https://s3-us-west-2.amazonaws.com/allmetalmixtapes/Saxon%20-%201984%20-%20Crusader/06%20-%20Just%20Let%20Me%20Rock.mp3">
Saxon - Just Let Me Rock
</a>
</li>
</ul>
Bien en esta parte cabe resaltar que la referencia a la canción podemos poner la referencia al archivo con un path relativo, o bien una url completa en caso de que el archivo está alojado en otro dominio (e.j: amazon S3)
Esta parte es bastante simple y la pueden lograr como a ustedes mas les convenga, ya que es como el usuario interactuara con su list.
CSS
Ahora la parte de CSS es igual de importante que la de html, queda a discreción del usuario, este es solo un ejemplo muy básico de lo que podría ser.
#playlist, audio{
background:#666;
width:400px;
padding:20px;
list-style: none;
font-family: Arial, Helvetica, sans-serif;
}
a {
text-decoration:none;
}
.active a {
color:#5DB0E6;
text-decoration:none;
}
li a{
color:#eeeedd;
background:#333;
padding:5px;
display:block;
}
li a:hover{
text-decoration:none;
}
JavaScript
Ahora la parte realmente importante es cómo vamos a manejar dicho playlist y para ello usamos javascript.
init();
function init(){
var audio = document.getElementById('audio');
var playlist = document.getElementById('playlist');
var tracks = playlist.getElementsByTagName('a');
audio.volume = 0.10;
audio.play();
//Agregamos los eventos a los links que nos permitirán cambiar de canción
for(var track in tracks) {
var link = tracks[track];
if(typeof link === "function" || typeof link === "number") continue;
link.addEventListener('click', function(e) {
e.preventDefault();
var song = this.getAttribute('href');
run(song, audio, this);
});
}
//agregamos evento para reproducir la siguiente canción en la lista
//si la canción es la ultima reproducir la primera otra vez
audio.addEventListener('ended',function(e) {
for(var track in tracks) {
var link = tracks[track];
var nextTrack = parseInt(track) + 1;
if(typeof link === "function" || typeof link === "number") continue;
if(!this.src) this.src = tracks[0];
if(track == (tracks.length - 1)) nextTrack = 0;
console.log(nextTrack);
if(link.getAttribute('href') === this.src) {
var nextLink = tracks[nextTrack];
run(nextLink.getAttribute('href'), audio, nextLink);
break;
}
}
});
}
function run(song, audio, link){
var parent = link.parentElement;
//quitar el active de todos los elementos de la lista
var items = parent.parentElement.getElementsByTagName('li');
for(var item in items) {
if(items[item].classList)
items[item].classList.remove("active");
}
//agregar active a este elemento
parent.classList.add("active");
//tocar la cancion
audio.src = song;
audio.load();
audio.play();
}
ahora bien, hay dos funciones clave aquí, la función init, y la función run , vamos a explicar qué hace cada una.
init
Inicializa la playlist poniendo el elemento actual de la misma en 0, buscando el elemento de audio que cargó con la página (use un selector de jQuery, pero puede ser javascript nativo), y luego busca la lista de canciones que también cargó con la página. luego cuenta cuantos links a canciones hay en la lista para determinar el largo de la playlist (para saber cuando parar), y luego le pone un volumen default y comienza a reproducir la primera canción. Además de eso le agrega un listener al elemento audio para el evento de cuando una canción termina, este evento revisa si estamos en la última canción, de ser asi, comienza con la primera canción otra vez de lo contrario aumenta el valor de actual y sigue con la siguiente canción en la lista.
run
Esta función es llamada por la función init en el listener de cuando una canción termina y simplemente actualiza la fuente de audio del elemento audio de html5 resalta la canción que se está reproduciendo en la lista y comienza a reproducir la canción que recibe en el parámetro link.
Conclusión
El resultado de este su tutorial debería ser un playlist como el siguiente (click en el tab “Result”):
Espero que sea de su utilidad. Manos al código!
jkhjkhk
man, cuando elijo otra canción me manda a abrirlo aparte y no en el mismo reproductor :'(
Bueno, yo nuevamente, luego de tanto luchar, he conseguido solucionar el problema, con esto:
Llamando el script .js después de la etiqueta de cierre de body, debido a que si se coloca en la parte superior, se está tratando de llamar propiedades que aún no han sido creadas.
Saludos cordiales.
man, cuando elijo otra canción me manda a abrirlo aparte y no en el mismo reproductor :'(
la forma correcta es
body
todo el codigo de audio y link
debajo al ultimo se coloca el link de javascript
/body
saludos
eso me pasa a mi tambien como se arregla?
Se podria solucionar diciendo que cuando hagas click en el link se llame a una funcion y esa funcion cambie el atributo href del reproductor con metodo setAttribute y asi ya no se te cambiaria de reproductor ni pagina
Pero esto se puede hacer tmb con html4, donde ya existe la etiqueta audio
https://www.youtube.com/watch?v=tNzta6bWsGA
https://goo.gl/Sj0FXq
le falta el siguiente código arriba del script
Falta el siguiente código arriba del script — — asi funciona
“”
http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js’ type=’text/javascript’
Mezclas actual con current, el código no funciona 😉
[…] Si deseas crear un reproductor de música directamente en código tambien es facil, gracias a los estandares establecidos respecto al audio en páginas web. Checa este tutorial. […]
[…] un reproductor (que no es el de youtube) para reproducir algunos videos, o talvez quieres poner un reproductor de musica en el mismo, haces todo el codigo y comienzas a probar a ver si es responsive, y te das cuenta que […]
No sería más fácil para los ignorantes como yo colocar el código de principio a fin de manera que solo bastaría con copiar y pegar y solo editar los track?
¿Que estoy haciendo mal?, por favor escribirme a [email protected]
QUE ESTOY HACIENDO MAL? [email protected] \
Cancion 1
Cancion 2
Cancion 3
var audio;
var playlist;
var tracks;
var current;
//llamamos a la función init que creamos más abajo
init();
function init(){
actual = 0;
audio = $(‘#audio’);
playlist = $(‘#playlist’);
tracks = playlist.find(‘li a’);
len = tracks.length – 1;
audio[0].volume = .10;
audio[0].play();
playlist.find(‘a’).click(function(e){
e.preventDefault();
link = $(this);
actual = link.parent().index();
run(link, audio[0]);
});
audio[0].addEventListener(‘ended’,function(e){
actual++;
if(current == len){
current = 0;
link = playlist.find(‘a’)[3];
}else{
link = playlist.find(‘a’)[current];
}
run($(link),audio[3]);
});
}
function run(link, player){
player.src = link.attr(‘href’);
par = link.parent();
par.addClass(‘active’).siblings().removeClass(‘active’);
audio[0].load();
audio[0].play();
}
explica que es Jquery no es solo javascript y necesita activar las librerías.
Yo estoy buscando como hacerlo en javascript sin Jquery si alguno me ayuda lo agradezco.
Saludos.
Esto es la mayor guarrería que he visto.
Si vais a poner un código hacedlo bien y actualizarlo, porque mucha gente busca por internet, se agradece el esfuerzo, pero si al final no funciona para que sirve¿?
mas guarro que windowsMe? D:
Mira tenías razón, pero te aseguro que ese código lo hizo un lemur borracho (o yo cuando tenía mucho sueño).
Lo he actualizado y he colocado un fiddle con la demo para mejor entendimiento de la gente que visita este blog 🙂
Un saludo amigo!
Encontraron la solución? He probado de todo y no he podido lograr que se muestre en la misma ventana, Sigue saliendo en otra.
Hola, no pude evitar ver cuales eran los links de los audios y vi que provenían de Amazon web services, y quería preguntar… ¿Como configuró su cuenta? y ¿Es gratuito para usuarios ilimitados? y ¿por cuanto tiempo?
Saludos 🙂
Hola.
Si, la cuenta de AWS es gratuita de hacer y la mayoría de servicios tiene un nivel gratuito bastante generoso, y a partir de cierto uso ya te cobran según el nivel de uso.
Hola amigo, el ejemplo está super pero tengo un problema cuando uso los links de las canciones que están el amazon la reproducción automática de las canciones funciona bien pero cuando son archivos que tengo localmente las canciones no cambian al terminar la anterior, podrías orientarme con eso por favor
Hola, podrías poner algún fragmento de código para ayudarte?
Este seria el JavaScript
init();
function init(){
var audio = document.getElementById('audio');
var playlist = document.getElementById('playlist');
var tracks = playlist.getElementsByTagName('a');
audio.volume = 1;
audio.play();
//Agregamos los eventos a los links que nos permitirán cambiar de canción
for(var track in tracks) {
var link = tracks[track];
if(typeof link === "function" || typeof link === "number") continue;
link.addEventListener('click', function(e) {
e.preventDefault();
var song = this.getAttribute('href');
run(song, audio, this);
});
}
//agregamos evento para reproducir la siguiente canción en la lista
//si la canción es la ultima reproducir la primera otra vez
audio.addEventListener('ended',function(e) {
for(var track in tracks) {
var link = tracks[track];
var nextTrack = parseInt(track) + 1;
if(typeof link === "function" || typeof link === "number") continue;
if(!this.src) this.src = tracks[0];
if(track == (tracks.length - 1)) nextTrack = 0;
console.log(nextTrack);
if(link.getAttribute('href') === this.src) {
var nextLink = tracks[nextTrack];
run(nextLink.getAttribute('href'), audio, nextLink);
break;
}
}
});
}
function run(song, audio, link){
var parent = link.parentElement;
//quitar el active de todos los elementos de la lista
var items = parent.parentElement.getElementsByTagName('li');
for(var item in items) {
if(items[item].classList)
items[item].classList.remove("active");
}
//agregar active a este elemento
parent.classList.add("active");
//tocar la cancion
audio.src = song;
audio.load();
audio.play();
}
Ese es mi HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/estilo.css">
<title>Repro</title>
</head>
<body>
<audio id="audio" preload="auto" tabindex="0" controls="" >
<source src="https://s3-us-west-2.amazonaws.com/allmetalmixtapes/Saxon%20-%201984%20-%20Crusader/01%20-%20Crusader%20Prelude.mp3">
</audio>
<ul id="playlist">
<li class="active">
<a href="https://s3-us-west-2.amazonaws.com/allmetalmixtapes/Saxon%20-%201984%20-%20Crusader/01%20-%20Crusader%20Prelude.mp3">
Saxon - Crusader Prelude
</a>
</li>
<li>
<a href="https://s3-us-west-2.amazonaws.com/allmetalmixtapes/Saxon%20-%201984%20-%20Crusader/03%20-%20Little%20Bit%20Of%20What%20You%20Fancy.mp3">
Saxon - Little Bit Of What You Fancy
</a>
</li>
<li>
<a href="https://s3-us-west-2.amazonaws.com/allmetalmixtapes/Saxon%20-%201984%20-%20Crusader/04%20-%20Sailing%20To%20America.mp3">
Saxon - Sailing To America
</a>
</li>
<li>
<a href="https://s3-us-west-2.amazonaws.com/allmetalmixtapes/Saxon%20-%201984%20-%20Crusader/05%20-%20Set%20Me%20Free.mp3">
Saxon - Set Me Free
</a>
</li>
<li>
<a href="https://s3-us-west-2.amazonaws.com/allmetalmixtapes/Saxon%20-%201984%20-%20Crusader/06%20-%20Just%20Let%20Me%20Rock.mp3">
Saxon - Just Let Me Rock
</a>
</li>
</ul>
<script src="js/jquery.js"></script>
<script src="js/musica.js"></script>
</body>
</html>
Cundo los links son por ejemplo de amazon las canciones cambian solas pero al ser archivos locales no cambian =(
Buenas noches , tengo ya días tratando de reproducir mis videos locales .ogv con el reproductor pero no he podido hacer que se reprodusca toda la playlist me gustaría que me alumbraran con la solución a mi problema la pagina es extensión php ya que debajo del video colocare algo de código php para complementar, ademas no he podido hacer que se reproduzca el primer video al cargar la pagina
adjunto mi código HTML y js
quedo agradecido
HTML:
Javascript
[…] aqui hay un ejemplo bastante descriptivo Reproducir mp3 con javascript […]
Hola Ricardo,
Gracias por el Post, muy buena solución.
Hay dos cosas que te agradecería me ayudaras a resolver, primero, si no encuentra el video (404) que salte al siguiente y también que tenga algún efecto crossfade. Me ayudaría mucho, incluso si tiene algún costo me ayudes a perfeccionarlo, por favor claro.
Revisa estos dos eventos:
https://www.w3schools.com/tags/av_event_error.asp
https://www.w3schools.com/tags/av_event_ended.asp
En el evento error, pones que se pase al siguiente video.
En el evento ended, yo le haría hide al elemento video con js, fadeIn de un thumbnail con el primer cuadro del siguiente video, hide el thumbnail cuando el fadeIn termine y show el video otra vez y autoplay (el autoplay no funciona por defecto en dispositivos mobiles).
que nombre debe lllevar el archivo java script js y que nomvre el css y debe estar en archivos?
Los que usted desee. Solo hay que mantener las referencias correctamente.
Hola, y si no deseo los links de los audios y solo quiero enlazar mis propios de una carpeta creada?
como le hago para enlazar y cuando quiero escuchar otra musica no me lance a otra pagina?
con los links me funciona excelente
pero los audios de mi carpeta me lanza a otra ventana
ayuda pliss
creo que es en java la funcion link pero no se con que termino cambiarlo…
¿Estas usando algún .htaccess en la carpeta con tus archivos?
Normalmente el path absoluto funciona bien, como
/path/al/archivo/audio.mp3
hola, ayuda pongo todos los codigos como dices pero al apretar otra cancion se va a la misma pestaña pero no al reproductor y ademas termina una cancion y no manda a la otra, tambien puse todo antes de /body, puedes ayudarme porfa, gracias
como puedo cambiar de musica, dejando que cambie al finalizar la cancion
Excelente post te felicito, como seria si quisiera un botón para avanzar o retroceder la audio, y e intentado agregarle en la lista de reproducción algunos enlaces como un botón para descargar pero no funcionan, simplemente vuelven a reproducirse.
Puedes ver mi primero playlist:En w3scholls
Este es mi html:
<audio controls=”” id=”myAudio” src=”Puedes elegir un link de una música a dejarlo en blanco”></audio>
<!–El playlist–>
<a onclick=”shrek()”>Alls stars – Shrek</a>
<a onclick=”tu()”>31 Minutos – Theme</a>
<!–Javascript–>
<script>
function shrek(){
document.getElementById(“myAudio”).src=”https://cutt.ly/pdDYVnC”;}//He seleccionado el audio y con el src le cambié el atributo.
function tu(){
document.getElementById(“myAudio”).src=”https://n9.cl/-31m”;}//He seleccionado el audio y con el src le cambié el atributo.</script>
<!–CSS–>
.a:hover{background-color:#009CF5}
.a{cursor:pointer;display:block;background-color:#EFEFEF;width:150px;height:auto}
.a1{border:solid 1px #767676;border-top-right-radius:5px;border-top-left-radius:5px;padding:2px;border-bottom:none}
.a2{border:solid 1px #767676;border-top:none;border-bottom-right-radius:5px;border-bottom-left-radius:5px;padding:2px}
</style>
Hola. Muchas gracias por el código, me ha venido muy bien para actualizar unas cosillas. Mi pregunta es sobre que tengo que añadir para que no arranque automáticamente la playlist. Es decir, hasta que el visitante no le dé al play o escoja una canción del listado, no quiero que suene/arranque solo. Muchas gracias por adelantado.
yo le puce el js antes del cierre del body y le agregue un fondo y funcionan todos los linck con el mismo reproductor en mi blog https://djvirtualzur-miusic.blogspot.com/2023/03/grupo-red-late-mas-fuerte.html