Code: jQuery

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:

Opción de descarga de audio.

Responsive.

Lista de reproducción.

Buscador.

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:

Code

febrero 27, 2023

Reproductor con HTML CSS jQuery JS

Instalar

abril 05, 2022

Script para evitar que el menú contextual funcione al momento de dar Clic derecho

Primer modo

Segundo modo