Widget reproductor de musica con lista de reproducción

Widget lista de reproducción para blogger reproductor html5 de musica para blogger

Demostración

Seguimos con los reproductores html5 para Blogger, en este caso de audio. He desarrollado este widget basado en el gadget "Lista de enlaces" de blogger y la libreria open source amplitude.


Amplitude.js está escrito en vanilla js (sin dependencias) y te permite controlar completamente el aspecto de un reproductor de audio en html5, es decir, no es un reproductor como tal, pero te da todo lo necesario para armar uno. Recomiendo visitar el repositorio en github del proyecto, así como leer la documentación oficial.


Instalar

Nos vamos a dirigir a nuestro panel de administración en blogger, a la sección "Temas" y presionamos el botón "Personalizar". Ya en el diseñador de plantillas de Blogger, nos vamos a opciones avanzadas y escogemos "CSS Personalizado", allí pegaremos el siguiente código:


/*!
* Theme: Amplitude Zero
* by zkreations
*/[class*=" ampli-"]:before,[class^=ampli-]:before,[data-icon]:before{font-family:amplitude-zero!important;font-style:normal!important;font-weight:400!important;font-variant:normal!important;text-transform:none!important;speak:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@font-face{font-family:amplitude-zero;src:url(data:application/font-woff;charset=utf-8;base64,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) format("woff");font-weight:400;font-style:normal}[data-icon]:before{content:attr(data-icon)}.ampli-play:before{content:"\61"}.ampli-repeat:before{content:"\63"}.ampli-shuffle:before{content:"\64"}.ampli-prev:before{content:"\65"}.ampli-next:before{content:"\66"}.ampli-pause:before{content:"\67"}.ampli-volume:before{content:"\62"}.amplitude-muted .ampli-volume-off,.amplitude-playing .ampli-pause{display:block}.amplitude-muted .ampli-volume-up,.amplitude-not-muted .ampli-volume-off,.amplitude-paused .ampli-pause,.amplitude-playing .ampli-play,.amplitude-song-container.amplitude-paused .ampli-volume{display:none}.amplitude-song-container,.amplitude-zero__controls,.amplitude-zero__play-controls,.amplitude-zero__time{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.amplitude-zero__metaInfo{position:absolute;bottom:0;padding:1.5em;right:0;left:0;color:#fff;background-image:-webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.65));background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.65))}.amplitude-zero__coverInfo{position:relative;min-height:100px}.amplitude-zero__metaInfo .song-name{font-size:1.2em;font-weight:500}.amplitude-zero__metaInfo .song-artist-album{opacity:.8}.amplitude-zero__time{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;background-color:#eaeaea;font-weight:700;color:rgba(0,0,0,.5)}.amplitude-zero__progress{height:5px;width:100%;margin:0 1em}.amplitude-zero .amplitude-song-played-progress{background-color:#CFD8DC;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:5px;display:block;cursor:pointer;border:none}.amplitude-zero .amplitude-song-played-progress:not([value]){background-color:#313252}.amplitude-zero [value]::-webkit-progress-bar{background-color:#CFD8DC}.amplitude-zero [value]::-moz-progress-bar{background-color:#00a0ff}.amplitude-zero [value]::-webkit-progress-value{background-color:#00a0ff}.amplitude-zero__controls,.amplitude-zero__time{padding:1.2em 1.5em;border-bottom:1px solid rgba(0,0,0,.05)}.amplitude-zero__controls ::before{display:block;position:relative;top:2px}.amplitude-zero__controls [class*=amplitude]{cursor:pointer;opacity:.5;font-size:1.5em;margin-right:5px;-webkit-transition:.5s;transition:.5s}.amplitude-zero__controls [class*=amplitude]:hover{opacity:.75}.amplitude-zero__controls .amplitude-repeat-on,.amplitude-zero__controls .amplitude-shuffle-on{opacity:.9}.amplitude-zero__controls .amplitude-next,.amplitude-zero__controls .amplitude-play-pause,.amplitude-zero__controls .amplitude-prev{background:rgba(0,0,0,.1);border-radius:50%;padding:5px}.amplitude-zero__controls .amplitude-repeat{margin-left:10px}.amplitude-zero{background-color:#f7f7f7;line-height:16px}.amplitude-zero__mainInfo img{width:100%}.amplitude-zero__controls{padding:.75em 1em}.amplitude-song-container{background:#eceff1;border-top:1px solid #B0BEC5;padding:.8em 1em;cursor:pointer;-webkit-transition:background .5s;transition:background .5s}.song-meta-data .song-title{display:block;font-weight:500;color:#455A64;margin-bottom:2px}.song-meta-data{padding-left:1em}.song-meta-data .song-artist{font-weight:500;opacity:.5}.amplitude-song-container i::before{font-size:1.2em;opacity:.5;display:block}.amplitude-song-container.amplitude-playing,.amplitude-song-container:hover{background:#CFD8DC}.amplitude-zero__playlist{max-height:286px;overflow-y:auto}.amplitude-zero__playlist::-webkit-scrollbar{width:5px}.amplitude-zero__playlist::-webkit-scrollbar-track{width:5px}.amplitude-zero__playlist::-webkit-scrollbar-thumb{width:5px;background:#90A4AE}
/*end-code*/

No olvides presionar el botón "Aplicar" para que los cambios se guarden. Ahora vamos a regresar a la pestaña "Temas" y presionamos el botón "Editar HTML", buscamos </b:section> (aparecerá varias veces pero cualquiera sirve) y arriba de eso pegamos el siguiente código:


<b:widget id='LinkList105' title='Amplitude zero' type='LinkList'>
   <b:includable id='main'>
      <b:if cond='data:title.length != 0'><h2><data:title/></h2></b:if>
      <div class='widget-content'>
      <div class='amplitude-zero'>
      <!-- Amplitude github.com/521dimensions/amplitudejs | amplitude zero widget by https://zkreations.com -->
      <div class='amplitude-zero__mainInfo'>
         <div class='amplitude-zero__coverInfo'>
            <img amplitude-main-song-info='true' amplitude-song-info='cover_art_url'/>
            <div class='amplitude-zero__metaInfo'>
               <span amplitude-main-song-info='true' amplitude-song-info='name' class='song-name'/>
               <div class='song-artist-album'><span amplitude-main-song-info='true' amplitude-song-info='artist'/></div>
            </div><!-- .amplitude-zero__metaInfo -->
         </div><!-- .amplitude-zero__coverInfo -->
         <div class='amplitude-zero__time'>
            <span class='current-time'>
               <span amplitude-main-current-minutes='true' class='amplitude-current-minutes'/>:<span amplitude-main-current-seconds='true' class='amplitude-current-seconds'/>
            </span>
            <div class='amplitude-zero__progress'>
               <progress amplitude-main-song-played-progress='true' class='amplitude-song-played-progress' id='song-played-progress'/>
            </div>
            <span class='duration'>
               <span amplitude-main-duration-minutes='true' class='amplitude-duration-minutes'/>:<span amplitude-main-duration-seconds='true' class='amplitude-duration-seconds'/>
            </span>
      </div>
      </div><!-- .amplitude-zero__mainInfo -->
      <div class='amplitude-zero__controls'>
         <!-- controls -->
         <div class='amplitude-prev'><i class='ampli-prev'/></div>
         <div amplitude-main-play-pause='true' class='amplitude-play-pause'><i class='ampli-play'/><i class='ampli-pause'/></div>
         <div class='amplitude-next'><i class='ampli-next'/></div>
         <!-- options -->
         <div class='amplitude-repeat'><i class='ampli-repeat'/></div>
         <div class='amplitude-shuffle amplitude-shuffle-off'><i class='ampli-shuffle'/></div>
      </div><!-- .amplitude-zero__controls -->
      <div class='amplitude-zero__playlist'>
      <b:loop index='plist' values='data:links' var='e'>
      <div class='song amplitude-song-container amplitude-play-pause amplitude-paused' expr:amplitude-song-index='data:plist'>
         <i class='ampli-play'/><i class='ampli-volume'/>
         <b:with expr:value='"{" + data:e.name + "}"' var='info'>
            <div class='song-meta-data'><span class='song-title'><data:info.name/></span><span class='song-artist'><data:info.artist/></span></div>
         </b:with>
      </div>
      </b:loop>
      </div><!-- .amplitude-zero__playlist -->
      <script src='https://cdn.jsdelivr.net/npm/amplitudejs@3.2.3/dist/amplitude.min.js' type='text/javascript'/>
      <script>//<![CDATA[
Amplitude.init({"songs": [/*]]>*/<b:loop values='data:links' var='i'>{<data:i.name/>,<data:i.target/>},</b:loop>/*<![CDATA[*/], "volume": 100});
document.getElementById('song-played-progress').addEventListener('click', function( e ){var offset = this.getBoundingClientRect();var x = e.pageX - offset.left; Amplitude.setSongPlayedPercentage( ( parseFloat( x ) / parseFloat( this.offsetWidth) ) * 100 );});//]]></script>
      </div><!-- .amplitude-zero -->
   </div>
   </b:includable>
</b:widget>

Guarda los cambios y listo, el widget ya estara instalado, pero no sera visible hasta que agregues al menos un elemento a la lista de reproducción en formato JSON, pero controlable desde el widget "Lista de enlaces".


Agregar elementos a la lista

Primero que todo, necesitamos subir nuestros archivos de audio a algun hosting. Si no cuentas con uno, puedes utilizar enlaces de descarga directa con Google Drive (recomendado). La otra opción es subir tus audios a Onedrive y hacer lo mismo.


Cuando ya cuentes con los enlaces hacia tus archivos de audio, solo necesitas agregar estos datos a la lista de reproducción. Para ello ve a "Diseño" y edita el widget "Amplitude zero", hasta este punto veras lo siguiente:


agregar elementos lista de enlaces

En el campo "Nuevo nombre del sitio" Los datos Json que debes agregar son los siguientes:


name: "Nombre canción", artist: "Cantante"

Noten como tanto el parametro name: y artist: contienen datos del tipo string, por eso el texto está entre comillas dobles. Ahora, en el campo "Url del sitio nuevo" agregan lo siguiente:


url: "audio.mp3", cover_art_url: "imagen.jpg"

En el siguiente ejemplo, estoy agregando la canción Death Trap For A Dreamer de la cantante Caitlin Plunkett, por lo tanto al reemplazar los datos correspondientes me quedaria de la siguiente manera:


name: "Death Trap For A Dreamer", artist: "Caitlin Plunkett"

url: "https://drive.google.com/uc?export=download&id=1gWuSru3KHhIIMLZ1ydNmHKF957yMjmd8", cover_art_url: "https://i.imgur.com/DnDygih.jpg"

Puedes agregar todos los elementos que quieras a la lista de reproducción, no hay límites.


Valores obligatorios

En total, los datos JSON utilizados en cada elemento de la lista son name:, artist:, url: y cover_art_url:. De los cuales sólo name: y url: son obligatorios, los restantes se pueden omitir.


Tambien es posible agregar mas datos a la lista, pero para ello es necesario leer la documentación oficial de Amplitude.js.


Eso a sido todo de momento amigos. Si este aporte te ha sido de utilidad, por favor no olvides compartir en las redes sociales, eso ayudaría a mas personas y también lo agradeceria mucho.

Quizás te interese