Reproductor de audio sencillo utilizando HTML, CSS, jQuery, 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>
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.12/plyr.css" />
<script
src="https://kit.fontawesome.com/cf0160c90b.js"
crossorigin="anonymous"
></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"
type="text/javascript"
></script>
<link rel="stylesheet" href="index.css" />
Insertar el código abajo de la etiqueta <body>
<section id="containerPlay">
<div id="containerAll"></div>
<input type="checkbox" id="list" />
<div id="imgCover">
<img
src="https://emtodolugarnet.files.wordpress.com/2020/12/whatsapp-image-2020-12-17-at-11.04.55.jpeg?w=1024"
/>
</div>
<div id="information">
<h1>RBD</h1>
<h2>Lista de canciones RBD</h2>
</div>
<div id="bodyPlay">
<audio class="js-player">
<source
src="https://docs.google.com/uc?export=download&id=1OGlxb_w5Gq_DFQ_28STBBMPUfOpuzWyx"
type="audio/mp3"
/>
</audio>
<button id="backward">
<i class="fa fa-backward" aria-hidden="true"></i>
</button>
<button id="forward">
<i class="fa fa-forward" aria-hidden="true"></i>
</button>
<div class="search">
<input
type="text"
name="searchMusic"
id="searchMusic"
placeholder="Buscar canción..."
/>
<i class="fa-solid fa-magnifying-glass"></i>
</div>
<div id="upDown">
<label for="list" class="list" id="cambio"
><i class="fa fa-chevron-down" aria-hidden="true"></i>
<i class="fa fa-chevron-up" aria-hidden="true"></i
></label>
</div>
<ul
id="playMuisc"
oncontextmenu="return false"
ondragstart="return false"
onselectstart="return false"
>
<li class="song">
<span
onclick="location.href='https://docs.google.com/uc?export=download&id=1WMNJYLTd6wpyjyMoo5OU853j6D9g0pNi' "
title="Download song"
class="enlace"
><i class="fa fa-download" aria-hidden="true"></i
></span>
<a
href="https://docs.google.com/uc?export=download&id=1WMNJYLTd6wpyjyMoo5OU853j6D9g0pNi"
title="Escuchar Aún Hay Algo"
><span class="numero-n">1</span
><span class="Nombre-artist">RBD</span>Aún Hay Algo<span
id="duration-music"
>03:35</span
></a
>
</li>
<li class="song">
<span
onclick="location.href='https://docs.google.com/uc?export=download&id=10jmDVoD8oKKDAN1EVHGiwiyUkwMXeQ2m' "
title="Download song"
class="enlace"
><i class="fa fa-download" aria-hidden="true"></i
></span>
<a
href="https://docs.google.com/uc?export=download&id=10jmDVoD8oKKDAN1EVHGiwiyUkwMXeQ2m"
title="Escuchar Celestial "
><span class="numero-n">2</span
><span class="Nombre-artist">RBD</span>Celestial<span
id="duration-music"
>03:27</span
></a
>
</li>
<li class="song">
<span
onclick="location.href='https://docs.google.com/uc?export=download&id=1MiLWPu97f1hDL1v_59dTi7fVgMko361O' "
title="Download song"
class="enlace"
><i class="fa fa-download" aria-hidden="true"></i
></span>
<a href="#" title="Escuchar Enséñame"
><span class="numero-n">3</span
><span class="Nombre-artist">RBD</span>Enséñame<span
id="duration-music"
>03:42</span
></a
>
</li>
<li class="song">
<span
onclick="location.href='https://docs.google.com/uc?export=download&id=1ZOJiI2ZtDBZXZAYPHf8o2jBw2tNjPX_d' "
title="Download song"
class="enlace"
><i class="fa fa-download" aria-hidden="true"></i
></span>
<a href="#" title="Escuchar Este Corazón"
><span class="numero-n">4</span
><span class="Nombre-artist">RBD</span>Este Corazón<span
id="duration-music"
>03:30</span
></a
>
</li>
<li class="song">
<span
onclick="location.href='https://docs.google.com/uc?export=download&id=1PUJSDEftyUiKXxy83VnmM7gIltUae3rF' "
title="Download song"
class="enlace"
><i class="fa fa-download" aria-hidden="true"></i
></span>
<a href="#" title="Escuchar Inalcanzable"
><span class="numero-n">5</span
><span class="Nombre-artist">RBD</span>Inalcanzable<span
id="duration-music"
>04:15</span
></a
>
</li>
<li class="song">
<span
onclick="location.href='https://docs.google.com/uc?export=download&id=1B87khvKVNNiuwHHYSYDTOGDqEeUmZg41' "
title="Download song"
class="enlace"
><i class="fa fa-download" aria-hidden="true"></i
></span>
<a href="#" title="Escuchar Nuestro Amor "
><span class="numero-n">6</span
><span class="Nombre-artist">RBD</span>Nuestro Amor<span
id="duration-music"
>03:36</span
></a
>
</li>
<li class="song">
<span
onclick="location.href='https://docs.google.com/uc?export=download&id=1wPqDXVHmdOCQebWJg015Bklz2K9chvD7' "
title="Download song"
class="enlace"
><i class="fa fa-download" aria-hidden="true"></i
></span>
<a href="#" title="Escuchar Qué Hay Detrás "
><span class="numero-n">7</span
><span class="Nombre-artist">RBD</span>Qué Hay Detrás<span
id="duration-music"
>03:18</span
></a
>
</li>
<li class="song">
<span
onclick="location.href='https://docs.google.com/uc?export=download&id=1A-7RyBiUHdB9DepYBFx6HWVA7LLACwCG' "
title="Download song"
class="enlace"
><i class="fa fa-download" aria-hidden="true"></i
></span>
<a href="#" title="Escuchar Rebelde "
><span class="numero-n">8</span
><span class="Nombre-artist">RBD</span>Rebelde<span
id="duration-music"
>03:34</span
></a
>
</li>
<li class="song">
<span
onclick="location.href='https://docs.google.com/uc?export=download&id=1JlOL7XpxDmXG1a87DGebTbri6dYQcUca' "
title="Download song"
class="enlace"
><i class="fa fa-download" aria-hidden="true"></i
></span>
<a href="#" title="Escuchar Sálvame"
><span class="numero-n">9</span
><span class="Nombre-artist">RBD</span>Sálvame<span
id="duration-music"
>03:45</span
></a
>
</li>
<li class="song">
<span
onclick="location.href='https://docs.google.com/uc?export=download&id=1G87e6jT3pqhEWXk_LBoaQiwZbgOSjVfA' "
title="Download song"
class="enlace"
><i class="fa fa-download" aria-hidden="true"></i
></span>
<a href="#" title="Escuchar Ser O Parecer"
><span class="numero-n">10</span
><span class="Nombre-artist">RBD</span>Ser O Parecer<span
id="duration-music"
>03:32</span
></a
>
</li>
<li class="song">
<span
onclick="location.href='https://docs.google.com/uc?export=download&id=1sVqGrJWUQcE3fjIq0T9zvOqSVHWpVRUa' "
title="Download song"
class="enlace"
><i class="fa fa-download" aria-hidden="true"></i
></span>
<a href="#" title="Escuchar Sólo Quédate En Silencio "
><span class="numero-n">11</span
><span class="Nombre-artist">RBD</span> Sólo Quédate En
Silencio<span id="duration-music">03:40</span></a
>
</li>
<li class="song">
<span
onclick="location.href='https://docs.google.com/uc?export=download&id=1Vd_0zWrbXyxXX9mlPw9bss3zsbaLBdyk' "
title="Download song"
class="enlace"
><i class="fa fa-download" aria-hidden="true"></i
></span>
<a href="#" title="Escuchar Tras De Mí "
><span class="numero-n">12</span
><span class="Nombre-artist">RBD</span>Tras De Mí<span
id="duration-music"
>03:12</span
></a
>
</li>
<li class="song">
<span
onclick="location.href='https://docs.google.com/uc?export=download&id=1qFGt_2BWYMwcE-hQyKZ-AWtpcstlyMFg' "
title="Download song"
class="enlace"
><i class="fa fa-download" aria-hidden="true"></i
></span>
<a href="#" title="Escuchar Un Poco De Tu Amor "
><span class="numero-n">13</span
><span class="Nombre-artist">RBD</span>Un Poco De Tu Amor<span
id="duration-music"
>03:26</span
></a
>
</li>
<li class="song">
<span
onclick="location.href='https://docs.google.com/uc?export=download&id=1CMMbqk-JUhGbProI2IhcqvEVFB2KD0L7' "
class="enlace"
><i class="fa fa-download" aria-hidden="true"></i
></span>
<a href="#"
><span class="numero-n">14</span
><span class="Nombre-artist"> RBD </span> Siempre He Estado
Aquí<span id="duration-music">03:10</span></a
>
</li>
</ul>
</div>
</section>
<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>
Para agregar estilo al reproductor, insertar el código arriba de la etiqueta </body>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
:root {
--main-bg-color: #0f0101;
--main-bg-body-color: orange;
--main-line-height: 64px;
--main-bg-controls: transparent;
--main-bg-color-control: #4a5464;
}
body {
background: radial-gradient(
35.36% 35.36% at 100% 25%,
#0000 66%,
#1b0606 68% 70%,
#0000 72%
)
26px 26px / calc(2 * 26px) calc(2 * 26px),
radial-gradient(
35.36% 35.36% at 0 75%,
#0000 66%,
#1b0606 68% 70%,
#0000 72%
)
26px 26px / calc(2 * 26px) calc(2 * 26px),
radial-gradient(
35.36% 35.36% at 100% 25%,
#0000 66%,
#1b0606 68% 70%,
#0000 72%
)
0 0 / calc(2 * 26px) calc(2 * 26px),
radial-gradient(
35.36% 35.36% at 0 75%,
#0000 66%,
#1b0606 68% 70%,
#0000 72%
)
0 0 / calc(2 * 26px) calc(2 * 26px),
repeating-conic-gradient(#0f0101 0 25%, #0000 0 50%) 0 0 / calc(2 * 26px)
calc(2 * 26px),
radial-gradient(#0000 66%, #1b0606 68% 70%, #0000 72%) 0 calc(26px / 2) /
26px 26px #0f0101;
}
.musicSearch {
display: none;
}
/*SEARCH*/
.search {
background: transparent;
position: absolute;
width: 30%;
left: 68%;
top: 20px;
transition: all 0.3s ease-in-out;
}
.search #searchMusic {
background: rgb(43 15 17);
width: 90%;
bottom: 17px;
border: none;
border-radius: 50px;
padding: 9px;
color: aliceblue;
outline: none;
}
.search .fa-magnifying-glass {
font-size: 14px;
color: rgb(138, 138, 138);
position: absolute;
top: 13px;
right: 55px;
}
#containerPlay {
width: 100%;
height: 90vh;
left: 50%;
top: 5%;
position: absolute;
transform: translateX(-50%);
border-radius: 8px;
background: transparent;
padding: 30px;
overflow: hidden;
}
#imgCover {
position: relative;
top: -28x;
}
#imgCover img {
width: 100px;
border-radius: 5px;
opacity: 0.9;
transition: all 0.3s ease-in-out;
box-shadow: 3px 3px 5px #000000, -3px -3px 5px #000000;
}
#information {
position: absolute;
top: 10%;
left: 200px;
color: rgb(238, 238, 238);
}
#information h2 {
font-size: 15px;
}
#bodyPlay .list .fa-chevron-down {
display: none;
}
/*AUDIO*/
.plyr--audio .plyr__controls {
position: relative;
background: transparent;
top: -11px;
}
.plyr__menu__container {
height: 120px;
overflow-y: scroll;
}
.plyr__controls .plyr__controls__item:first-child {
position: absolute;
z-index: -1;
left: 46px;
top: 39px;
cursor: auto;
}
.plyr__progress__buffer,
.plyr__progress input[type="range"] {
color: var(--main-bg-body-color);
}
.plyr__volume input[type="range"] {
color: var(--main-bg-body-color);
}
.plyr__volume {
position: absolute;
top: 39px;
left: 17%;
}
.plyr__menu {
display: none;
}
#backward {
position: relative;
background: none;
right: -7px;
top: -12px;
border: none;
width: 30px;
height: 30px;
font-size: 15px;
border-radius: 100%;
transition: all 0.4s ease-in-out;
color: var(--main-bg-color-control);
}
#forward {
position: relative;
background: transparent;
right: -51px;
top: -12px;
border: none;
width: 30px;
height: 30px;
font-size: 15px;
border-radius: 100%;
color: var(--main-bg-color-control);
transition: all 0.4s ease-in-out;
}
#backward #forward {
border: none;
background: none;
}
audio {
position: absolute;
}
#list {
display: none;
}
#upDown .list {
position: relative;
color: aliceblue;
left: 50%;
}
/*PLAYLIST*/
#playMuisc::-webkit-scrollbar {
display: none;
}
#playMuisc {
position: relative;
height: 100vh;
overflow-y: scroll;
border-radius: 8px;
user-select: none;
}
#playMuisc li {
list-style: none;
padding: 6px;
border-bottom: solid 1px #858383;
}
#playMuisc li a {
text-decoration: none;
display: block;
padding-bottom: 10px;
padding-left: 30px;
color: aliceblue;
border-radius: 8px;
cursor: auto;
font-size: 14px;
line-height: 40px;
}
.enlace {
position: absolute;
left: 86%;
line-height: var(--main-line-height);
font-size: 14px;
visibility: hidden;
color: aliceblue;
}
#duration-music {
position: absolute;
left: 93%;
line-height: var(--main-line-height);
}
.Nombre-artist {
position: absolute;
line-height: 90px;
left: 37px;
font-size: 13px;
}
.numero-n {
position: absolute;
left: 9px;
line-height: var(--main-line-height);
width: 20px;
height: 20px;
text-align: center;
}
/*HOVER LIST*/
#playMuisc li:hover .enlace .fa-download {
visibility: visible;
}
#playMuisc li a:hover {
color: var(--main-bg-body-color);
}
#playMuisc li a:hover .numero-n {
color: var(--main-bg-body-color);
visibility: hidden;
}
#playMuisc li a:hover .numero-n:before {
font-family: "Font Awesome 5 Free";
content: "\f01d ";
visibility: visible;
font-size: 20px;
}
.enlace {
color: var(--main-bg-body-color);
}
.enlace .fa-download {
padding: 10px;
border-radius: 50%;
}
.enlace .fa-download:active {
padding: 10px;
border-radius: 50%;
background: #285671;
box-shadow: inset 3px 3px 5px #254f68, inset -3px -3px 5px #2b5d7a;
}
/*HOVER CONTROLS*/
.plyr__controls .plyr__controls__item:first-child:hover {
background: var(--main-bg-controls);
border-radius: 100%;
}
#backward:hover {
background: var(--main-bg-controls);
color: white;
transition: all 0.4s ease-in-out;
}
#forward:hover {
background: var(--main-bg-controls);
color: white;
transition: all 0.4s ease-in-out;
}
.plyr--audio .plyr__control.plyr__tab-focus,
.plyr--audio .plyr__control:hover,
.plyr--audio .plyr__control[aria-expanded="true"] {
background: var(--main-bg-controls);
}
.enlace .fa-download:hover {
background: var(--main-bg-body-color);
color: aliceblue;
}
#upDown .list:hover {
color: var(--main-bg-body-color);
}
/*ACTIVE*/
#searchMusic:active {
background: #0d0d0d;
}
#playMuisc .active .numero-n:before {
font-family: "Font Awesome 5 Free";
content: "\f01d ";
visibility: visible;
font-size: 18px;
color: var(--main-bg-body-color);
}
#playMuisc .active:hover .enlace .fa-download {
background: #000000;
color: aliceblue;
}
#playMuisc .active .numero-n {
visibility: hidden;
}
/*MAGIC*/
#containerPlay > #list:checked ~ #imgCover {
height: 100vh;
width: 100%;
left: 0px;
overflow: hidden;
position: fixed;
top: 0px;
border-radius: 0px;
}
#containerPlay > #list:checked ~ #imgCover img {
width: 100%;
box-shadow: none;
left: 23px;
transition: all 0.3s ease-in;
border-radius: 20px;
filter: blur(15px);
}
#containerPlay > #list:checked ~ #bodyPlay {
background: #000000db;
position: absolute;
width: 100%;
height: 100vh;
left: 0px;
top: 0px;
overflow: hidden;
padding-left: 40px;
padding-right: 40px;
transition: all 0.3s ease-in;
}
#containerPlay > #list:checked ~ #bodyPlay #playMuisc {
position: relative;
height: 100vh;
}
#containerPlay > #list:checked ~ #bodyPlay .list .fa-chevron-up {
display: none;
}
#containerPlay > #list:checked ~ #bodyPlay .list .fa-chevron-down {
display: block;
}
#containerPlay > #list:checked ~ #bodyPlay .search {
visibility: hidden;
left: 200%;
}
/*RESPONSEVE*/
@media screen and (max-width: 700px) {
.plyr__volume {
left: 0px;
position: relative;
top: 0px;
}
.plyr__controls .plyr__controls__item:first-child {
top: 50px;
}
.search .fa-magnifying-glass {
display: none;
}
#duration-music {
visibility: hidden;
}
#duration-music:before {
font-family: "Font Awesome 5 Free";
color: whitesmoke;
content: "\f192";
visibility: visible;
}
#playMuisc .enlace .fa-download {
right: -30px;
}
#information {
left: 150px;
}
#information h1 {
font-size: 12px;
}
#information h2 {
font-size: 11px;
}
}
@media screen and (max-width: 400px) {
#duration-music {
display: none;
}
}
Agregar el siguiente código arriba de la etiqueta </body>el codigo da funcionamiento al buscador
document.addEventListener("keyup", (e) => {
if (e.target.matches("#searchMusic")) {
if (e.key === "Enter") e.target.value = "";
document.querySelectorAll(".song").forEach((songSerch) => {
songSerch.textContent.toLowerCase().includes(e.target.value.toLowerCase())
? songSerch.classList.remove("musicSearch")
: songSerch.classList.add("musicSearch");
});
}
});
Por último agregar el siguiente código arriba de la etiqueta </body>el codigo da funcionamiento al reproductor
var audio;
var playMuisc;
var tracks;
var current;
initaudio();
function initaudio() {
current = 0;
audio = $("audio");
playlist = $("#playMuisc");
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();
runaudio(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];
}
runaudio($(link), audio[0]);
});
}
function runaudio(link, player) {
player.src = link.attr("href");
par = link.parent();
par.addClass("active").siblings().removeClass("active");
audio[0].load();
audio[0].play();
}
Nota:
No olvide dejar su comentario