Reproductor de audio sencillo utilizando HTML, CSS, JS, con lista de reproducción, iconos insertados a través de Font awesome a continuación una lista detallada del reproductor:
Instalar
Primeramente debemos Insertar el código abajo de la etiqueta <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.12/plyr.css"/><!--CSS audio-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script><!--Libreria jQuery js-->
<script src="https://kit.fontawesome.com/cf0160c90b.js" crossorigin="anonymous"></script><!--font-awesome-->
Insertar el código abajo de la etiqueta <body>
<div class="pantalla" id="pantalla" >
<button id="ellipsis"><i class="fa fa-ellipsis-v" aria-hidden="true"></i>
<div class="ellipsis">
<li class="switch" id="switch"></li>
<li class="switch_Neumorphism" id="switch_Neumorphism"></li>
</div>
</button>
<div class="screen">
<div class="ecualizador" id="ecualizador"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKm5JraOQvzCzKnhhBd7dKN6hZ1c1PDgL-JhHtLcewYrELd6ZWqEQa9CtfP8juJ0F9cxEEp643mBaqhQqYPiSb__fk-xiDWDV-7ztfRH4trSqDcwDit5NIVBEmht7FGfCoaEnMaoAnLM1lA8-UrLNeN8SAT3ckjQvPmcsjILR2NBGrxAIpjLRvIcIi/s320/equalizador.gif" >
</div>
<div class="cover_info">
<div class="caratula_img" id="caratula">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEhZSQguaq4sxxiG74tLMbPW43fXM36BncLcjeByGlcLfEtvkApyGvq1eJ8d5ksRcRJo_A4MdjO1jf-p3u1Sk-ssicbOoHWXqXaMHWdHUAh-ycuorSGR5V0yLrGmvyF2KsNjMgZfQvX2buVgDSYLbzwCzCnM_LriwCgC9gPNtDsQJArYm-yOfoQgY9hD">
</div>
<div class="informacion">
<h1>Lagrimas desordenadas </h1>
<h2> Melendi </h2>
</div>
</div>
<div id="player" oncontextmenu="return false" ondragstart="return false" >
<ul id="playlist">
<li> <a href="https://docs.google.com/uc?export=download&id=1OGlxb_w5Gq_DFQ_28STBBMPUfOpuzWyx"><span class="numero-n">1</span><span class="Nombre-artist"> Melendi </span> Tu jardín con enanitos<span id="duration-music">03:59</span ><span onclick="location.href='https://docs.google.com/uc?export=download&id=1OGlxb_w5Gq_DFQ_28STBBMPUfOpuzWyx' "title="Download song" class="enlace"><i class="fa fa-download" aria-hidden="true"></i></span></a></li>
<li> <a href="https://docs.google.com/uc?export=download&id=18zrxsPgC2zZZ7lGuAdd_nneuGBKjecYX"><span class="numero-n">2</span><span class="Nombre-artist"> Melendi </span> Lágrimas desordenadas<span id="duration-music">03:51</span ><span onclick="location.href='https://docs.google.com/uc?export=download&id=18zrxsPgC2zZZ7lGuAdd_nneuGBKjecYX' "title="Download song" class="enlace"><i class="fa fa-download" aria-hidden="true"></i></span></a></li>
<li> <a href="https://docs.google.com/uc?export=download&id=15MvB1Y0PNunKH3ZBAUzGjXLGmQ6a9A4u"><span class="numero-n">3</span><span class="Nombre-artist"> Melendi </span> Cheque al portamor<span id="duration-music">04:55</span ><span onclick="location.href='https://docs.google.com/uc?export=download&id=15MvB1Y0PNunKH3ZBAUzGjXLGmQ6a9A4u' "title="Download song" class="enlace"><i class="fa fa-download" aria-hidden="true"></i></span></a></li>
<li class="mySlides"> <a href="https://docs.google.com/uc?export=download&id=1h6glZ0eslWhfroLpJQKpc8Q-wJ_PwY-f"><span class="numero-n">4</span><span class="Nombre-artist"> Melendi </span> Tu lista de enemigos<span id="duration-music">04:02</span ><span onclick="location.href='https://docs.google.com/uc?export=download&id=1h6glZ0eslWhfroLpJQKpc8Q-wJ_PwY-f' "title="Download song" class="enlace"><i class="fa fa-download" aria-hidden="true"></i></span></a></li>
<li><a href="https://docs.google.com/uc?export=download&id=1DHL8HIE77unkFe1mgAUqHi6qRM_S1TU-"><span class="numero-n">5</span><span class="Nombre-artist"> Melendi </span> Aprendiz de caballero<span id="duration-music">04:04</span ><span onclick="location.href='https://docs.google.com/uc?export=download&id=1DHL8HIE77unkFe1mgAUqHi6qRM_S1TU-' "title="Download song" class="enlace"><i class="fa fa-download" aria-hidden="true"></i></span></a></li>
<li><a href="https://docs.google.com/uc?export=download&id=1pyqIwYXKpAuBuZw6oamMr3sK-Jw5aunF"><span class="numero-n">6</span><span class="Nombre-artist"> Melendi </span> Autofotos<span id="duration-music">03:31</span ><span onclick="location.href='https://docs.google.com/uc?export=download&id=1pyqIwYXKpAuBuZw6oamMr3sK-Jw5aunF' "title="Download song" class="enlace"><i class="fa fa-download" aria-hidden="true"></i></span></a></li>
<li><a href="https://docs.google.com/uc?export=download&id=1Z9X-DmHMVsDERSSMgB29ToyXxaQV3Co-"><span class="numero-n">7</span><span class="Nombre-artist"> Melendi </span> Mi primer beso<span id="duration-music">04:16</span ><span onclick="location.href='https://docs.google.com/uc?export=download&id=1Z9X-DmHMVsDERSSMgB29ToyXxaQV3Co-' "title="Download song" class="enlace"><i class="fa fa-download" aria-hidden="true"></i></span></a></li>
<li><a href="https://docs.google.com/uc?export=download&id=1SMEXXaEhTlihh03BEs45eOmHoFo41x1l"><span class="numero-n">8</span><span class="Nombre-artist"> Melendi </span> La tortura de Lyss<span id="duration-music">03:55</span ><span onclick="location.href='https://docs.google.com/uc?export=download&id=1SMEXXaEhTlihh03BEs45eOmHoFo41x1l' "title="Download song" class="enlace"><i class="fa fa-download" aria-hidden="true"></i></span></a></li>
<li><a href="https://docs.google.com/uc?export=download&id=1JP5avEGnNZueCMViPGuLd8hxMSxUONuA"><span class="numero-n">9</span><span class="Nombre-artist"> Melendi </span> De pequeño fue el Coco<span id="duration-music">04:03</span ><span onclick="location.href='https://docs.google.com/uc?export=download&id=1JP5avEGnNZueCMViPGuLd8hxMSxUONuA' "title="Download song" class="enlace"><i class="fa fa-download" aria-hidden="true"></i></span></a></li>
<li><a href="https://docs.google.com/uc?export=download&id=1yiy8BeLIVWvTAPNMc7nVzlV6-MzDlVrU"><span class="numero-n">10</span><span class="Nombre-artist"> Melendi </span> Gatos celestes<span id="duration-music">03:47</span ><span onclick="location.href='https://docs.google.com/uc?export=download&id=1yiy8BeLIVWvTAPNMc7nVzlV6-MzDlVrU' "title="Download song" class="enlace"><i class="fa fa-download" aria-hidden="true"></i></span></a></li>
<li><a href="https://docs.google.com/uc?export=download&id=1FuvJIM6GHIG3F4ACKoBIpa3zH0Bz9OCP"><span class="numero-n">11</span><span class="Nombre-artist"> Melendi </span> De repente desperté<span id="duration-music">05:10</span ><span onclick="location.href='https://docs.google.com/uc?export=download&id=1FuvJIM6GHIG3F4ACKoBIpa3zH0Bz9OCP' "title="Download song" class="enlace"><i class="fa fa-download" aria-hidden="true"></i></span></a></li>
<br>
</ul>
</div>
</div>
<div class="Reproductor-audio">
<audio class='js-player'>
<source src="https://docs.google.com/uc?export=download&id=1OGlxb_w5Gq_DFQ_28STBBMPUfOpuzWyx" type="audio/mp3">
</audio>
<div class="botones-audio">
<button type="button" data-tiempo="-30" class="fast_boton"><i class="fa fa-fast-forward fa-flip-horizontal" aria-hidden="true"></i></button>
<button type="button" class="replay" onclick="reload()"><i class="fa fa-square" aria-hidden="true"></i></button>
<button type="button" class="control_song" id="control_song" onclick="control()"><i class="fa fa-play" aria-hidden="true"></i></button>
<button type="button" data-tiempo="30" class="fast_boton"><i class="fa fa-fast-forward" aria-hidden="true"></i></button>
</div>
</div>
</div>
Para agregar estilo al reproductor, insertar el código arriba de la etiqueta </body>
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Anek+Odia:wght@200&family=Raleway:wght@100&display=swap');
body{background:#fff; transition: all 0.9s ease-in}
.pantalla{
width:80%;
position: relative;
margin-left: 9%;
overflow: hidden;
font-family: sans-serif;
border-radius: 10px;
user-select: none;}
.ecualizador{
position: absolute;
z-index: 9;
display: none;
transform:rotate(180deg);
top: -6px}
.screen{
background:#ededed;
border-radius: 10px 10px 0px 0px }
.caratula_img img{
position: relative;
width: 45%;
border-radius: 10px 0px 0px 0px;}
.informacion{
position:absolute;
float: left; top: 0%;
left: 46%; color:#212429;
line-height: 6px}
.informacion h1{
font-size: 20px}
.informacion h2{
font-size: 15px}
.titulo_numero{
background:none;
position: relative;
color:#000;
right: -2%}
#playlist{
background:#ededed;
position: absolute;
width:52.4%;
height:77%;
overflow-x: hidden;
top: 44px;
left: 45%;
}
#playlist::-webkit-scrollbar {
width: 15px;}
#playlist::-webkit-scrollbar-track {
background:transparent; }
#playlist::-webkit-scrollbar-thumb {
background:#6c6a6a;}
#playlist::-webkit-scrollbar-thumb:hover {
background:#a2a0a0;}
#playlist li{
width: 109%;
position: relative;
list-style: none;
display: block;
padding-left: 10px;
left: -8%;
transition: all 0.2s ease-in;}
#playlist li a{
font-size: 14px;
left: 20px;
color:#212429;
padding: 15px;
display: block;
text-decoration: none;
position:relative;}
#playlist li .numero-n{
position:absolute;
left: -12px;}
#playlist li #duration-music{
float:right;
right: 35px;
position: relative}
#playlist li .Nombre-artist{
position: absolute;
top: 30px;
opacity: .5;
left: 16px;
font-size: 12px;
padding-top:2px ;}
#playlist li .enlace{
display: none;
float: right;
background:none;
position: relative;
right: 45px;
transition: all 0.2s ease;}
.footer .creditos{
position:relative;}
/*Reproductor*/
.Reproductor-audio{
background:#ededed;
width: 100%;
height:60px;
position: relative;
top: 0px;
margin: 0px;
padding: 0px;}
.plyr--audio{
position:relative;
background:#2a1f2400;
height: 25px;
top: 0px}
.plyr--audio .plyr__controls{
background:transparent;
width: 85%;
float: right;
position: relative;}
.plyr__volume input[type=range]{color: #101010}
.plyr--audio .plyr__control[aria-expanded=true]{color: #212429}
.plyr--full-ui a, .plyr--full-ui button{color: #e5e5e5;}
.plyr--audio .plyr__control[aria-expanded=false]{display: none}
.plyr__controls .plyr__controls__item:first-child{display: none}
.plyr--full-ui a, .plyr--full-ui button, .plyr--full-ui input, .plyr--full-ui label{color:#212429}
.botones-audio{
position:absolute;
left: 1%;
top: 9px;}
.botones-audio .control_song{
background: none;
color:#212429;
width: 35px;
height: 35px;
border-radius: 100%;
padding:10px;
border:solid 0px;
font-size: 14px}
.botones-audio .fast_boton{
background: none;
color:#212429;
width: 35px;
height: 35px;
border-radius: 100%;
padding:10px;
border:solid 0px;
font-size: 14px}
.botones-audio .replay{
background: none;
color:#212429;
width: 35px;
height: 35px;
border-radius:100%;
padding:10px;
border:solid 0px;
font-size: 14px}
/*HOVER*/
.plyr--audio .plyr__control.plyr__tab-focus, .plyr--audio .plyr__control:hover, .plyr--audio .plyr__control[aria-expanded=true]{background: transparent; color: #3f51b5}
#playlist li:hover{
background:#858585;
transition: all 0.2s ease-in; }
#playlist li a:hover{color: #000 }
#playlist li:hover .enlace{display: block; color:white;}
#playlist .fa-download:hover{color:black;}
#playlist li:hover .numero-n{color: transparent}
#playlist li:hover .numero-n:before {color: whitesmoke;content: "\25B6";}
/*ELLIPSIS*/
#ellipsis{display: relative; float: right; background: none; color:#212429; border: none; margin: 10px}
.ellipsis{
background:none;
display: none;
position: absolute;
width: 30px;
right: 25px;
top: 12px}
.ellipsis li{list-style: none; height: 15px; border-radius: 10px;}
.switch{background:rgb(26,20,23) }
.switch {
background: #2f3130;
border-radius: 1000px;
border: none;
position: relative;
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
outline: none;
}
.switch::after {
content: "";
display: block;
width: 15px;
height: 15px;
position: absolute;
background: #F1F1F1;
top: -1px;
left: 0;
right: unset;
border-radius: 100px;
border: solid 1px #2f3130;
-webkit-transition: .3s ease all;
transition: .3s ease all;
-webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2);}
.switch.active {
background:#fff;}
.switch.active::after {
right: 0;
left: unset;
background: #2f3130;
border: solid 1px #F1F1F1 ;}
.switch span {
width: 30px;
height: 30px;
line-height: 30px;
display: block;
background: none;
color: #fff;
}
/*ACTIVE*/
#playlist .active .numero-n:before {
color:#212429;
font-weight: 600;
content: "\275A \275A";}
.botones-audio .control_song:active{
box-shadow: inset 2px 2px 4px #0b0b0b,
inset -2px -2px 4px #191919;}
.botones-audio .fast_boton:active{
box-shadow: inset 2px 2px 4px #0b0b0b,
inset -2px -2px 4px #191919;}
.botones-audio .fast1_boton:active{
box-shadow: inset 2px 2px 4px #0b0b0b,
inset -2px -2px 4px #191919;}
.botones-audio .replay:active{box-shadow: inset 2px 2px 4px #0b0b0b,
inset -2px -2px 4px #191919;}
#playlist li:active{
box-shadow: inset 9px 9px 18px #5d5b5b,
inset -9px -9px 18px #7b7979;}
#playlist .active:hover .numero-n:before{
color: whitesmoke;
content: "\275A \275A";}
.plyr--audio .plyr__control.plyr__tab-focus, .plyr--audio .plyr__control:active, .plyr--audio .plyr__control[aria-expanded=true]{
box-shadow: inset 2px 2px 4px #0b0b0b;
inset -2px -2px 4px #191919;
border-radius: 100%;}
/*BEFORE*/
#playlist .active {background:#ada7a7; font-weight: 500; }
#playlist .active .numero-n{color: transparent}
/*DARK*/
body.dark{background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtz1EIKaJXJl3QDvGQOaVBrTgLVONGSVLZCwpBdnoTrgFT0JlKgElaB4To6LXCwRrUJRGbSo-rdFP6_iiEmFOKdex8kRRvY0H-ZtFA-C0LLsh8NDz69iYGlBMeK8oFkD4DTQBQFkGvANv-JpIOHS3cJc2dcZ_jloPtDZWEzPxKNa1liIcJz4cIFhhjrQ/s640/CD-Art.png); transition: all 0.9s ease-in}
body.dark .screen{background:#222429a8; }
body.dark #ellipsis{color:#ededed}
body.dark .informacion{color:#ededed;}
body.dark #playlist{background:transparent}
body.dark .Reproductor-audio{background:#222429a8}
body.dark #playlist li a{color:#ededed }
/*AUDIO*/
body.dark .plyr__progress__buffer, .plyr__progress input[type=range] {color:#101010;}
body.dark .plyr--full-ui a, .plyr--full-ui button { color:#ada7a7 ;}
body.dark .plyr__controls .plyr__controls__item:first-child{ color: #ada7a7;}
body.dark .botones-audio .fast_boton{background: none; color:#ada7a7; }
body.dark .botones-audio .control_song{background: none; color:#ada7a7; }
body.dark .botones-audio .replay{background: none; color:#ada7a7;}
/*DARK ACTIVE*/
/*MEDIA SCREEN*/
@media screen and (max-width:1075px){
.plyr--audio .plyr__controls {width: 81%;}}
@media screen and (max-width:990px){
.plyr--audio .plyr__controls {width: 75%;}}
@media screen and (max-width:990px){
.pantalla { width: 100%; margin-left: 0%;}}
@media screen and (max-width:860px){
#playlist{top: 42px; height: 73%;}}
@media screen and (max-width:700px){
#playlist{background: transparent; position: relative; left: 0px;width: 95%; height: 400px;top: 0px;}
.informacion {
top: 15%;
left: 47%;
height: 80px}
body.dark.Reproductor-audio{
top:-16px;
background: #000000}
.Reproductor-audio{
top:-16px; }
.botones-audio{
left: 40%;
top: 25px;}
body.dark .Reproductor-audio{
top:-16px;
background: #000000}
.plyr__volume{display: none}
.plyr--audio .plyr__controls{width: 100%;}}
@media screen and (max-width:600px){.informacion h1{font-size: 90%}}
@media screen and (max-width:450px){
.botones-audio{left: 31%; }
.informacion{}
.caratula_img img{ }#ellipsis {}}
@media screen and (max-width:360px){
.plyr__controls .plyr__controls__item.plyr__time{font-size: 10px}
#playlist{ left: -16px;}
.botones-audio{left: 27%; top: 25px;}
.informacion{display: none}
#duration-music{display: none}}
</style>
Por último agregar el siguiente código arriba de la etiqueta </body>
<script>
//<![CDATA[
var audio;
var playlist;
var tracks;
var current;
var ecualizador;
var icon_play ='<i class="fa fa-play" aria-hidden="true"></i>';
var icon_pause ='<i class="fa fa-pause" aria-hidden="true"></i>';
let control_song =document.getElementsByTagName("audio")[0];
let sound = false;
const botonesTiempo = document.querySelectorAll('[data-tiempo]');
init();
function init(){
current = 0;
audio = $('audio');
playlist = $('#playlist');
tracks = playlist.find('li a');
len = tracks.length - 1;
audio[0].volume = 1;
playlist.find('a').click(function(e){
e.preventDefault();
link = $(this);
current = link.parent().index();
run(link, audio[0]);
});
audio[0].addEventListener('ended',function(e){
current++;
if(current > len){
current = 0;
link = playlist.find('a')[0];
}else{
link = playlist.find('a')[current];
}
run($(link),audio[0]);
});
}
function run(link, player){
player.src = link.attr('href');
par = link.parent();
par.addClass('active').siblings().removeClass('active');
document.getElementById('ecualizador').style.display="block";
document.getElementById('control_song').innerHTML= icon_pause;
audio[0].load();
audio[0].play();
}
function next(){
player.src = link.attr('href');
par = link.parent();
par.addClass('active').siblings().removeClass('active');
audio[0].load();
audio[0].play();}
function control(){
if(!sound){
audio[0].play();
document.getElementById('control_song').innerHTML= icon_pause;
document.getElementById('ecualizador').style.display="block";
document.getElementById('control_song').innerHTML= icon_pause;
par.addClass('active');
sound = true;
}else{
audio[0].pause();
document.getElementById('control_song').innerHTML= icon_play;
par.removeClass('active');
document.getElementById('ecualizador').style.display="none";
sound = false;
}
}
function reload() {
control_song.load();
document.getElementById('control_song').innerHTML= icon_play;
document.getElementById('ecualizador').style.display="none";
par.removeClass('active');}
function saltar() {
control_song.currentTime += parseFloat(this.dataset.tiempo);}
botonesTiempo.forEach(button => button.addEventListener('click', saltar));
$(document).ready(function(){
$("#pantalla").on("auxclick", function(e){
return false;
});
$("#pantalla").on("contextmenu", function(e){
return false;
});
$(".caratula_img").on("dragstart", function(e){
return false;
});
$("#ellipsis").click(function(e){
$(".ellipsis").toggle("low")
});
});
//dark
const btnSwitch = document.querySelector('#switch');
btnSwitch.addEventListener('click', () => {
document.body.classList.toggle('dark');
btnSwitch.classList.toggle('active');
// Guardamos el modo en localstorage.
if(document.body.classList.contains('dark')){
localStorage.setItem('dark-mode', 'true');
} else {
localStorage.setItem('dark-mode', 'false');
}
});
// Obtenemos el modo actual.
if(localStorage.getItem('dark-mode') === 'true'){
document.body.classList.add('dark');
btnSwitch.classList.add('active');
}else{
document.body.classList.remove('dark');
btnSwitch.classList.remove('active');
}
//]]>
</script>
<!--JS Audio-->
<script src="https://cdn.plyr.io/3.6.12/plyr.polyfilled.js"></script>
<script>//<![CDATA[
const players = Array.from(document.querySelectorAll('.js-player')).map(player => new Plyr(player));
//]]>
</script>
Nota:
No olvide dejar su comentario