ZKreations
Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Buenas tardes amigos, en esta ocasión he desarrollado este widget basandome completamente en el gadget "Lista de enlaces" de blogger y un script open source llamado amplitude.
Demostracion
A mi me encanta hacer cosas ligeras, es decir, si se puede hacer con puro html pues eso usaré, asi mismo, si se puede ahcer con javascript puro, entonces ignorare las frameworks, y en este caso amplitude.js cumple esa condición, esta escrito en vanillajs y es muy ligero, además, no es un reproductor en si, pero te da todo lo necesario para armarlo usando html5.
Entonces ya tengo la "función" y la plataforma que sería Blogger, lo que sigue es simplemente usar un widget que más se le parezca a la lista de reproducción, por eso elegí el widget "Lista de enlaces". Ya teniendo todas las piezas armé el widget y te cuento como obtenerlo.
Instalar
Dirígete a tu panel de administración en blogger, clic en la opcion "Temas" y el botón "Personalizar". Ya en el diseñador de plantillas de Blogger, dirígete a las opciones avanzadas y escoge "CSS Personalizado", allí pega el siguiente código:
Insertar CODE, HTML o PHP:
/*!* 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}
/*endcode*/Presiona el botón "Aplicar" para que los cambios se guarden y ahora vamos a volver al panel de administración en Blogger, la opción "Temas" pero esta vez presiona el boton "Editar html", busca </b:section> y arriba de eso pega el siguiente código:
Insertar CODE, HTML o PHP:
<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 estara instalado pero no sera visible hasta que agregues al menos un elemento a la lista.
Necesitaras obligatoriamente subir los archivos de audio a algun hosting. Si no cuentas con uno, utiliza enlaces de descarga directa con Google Drive (recomendado). También puedes usar Onedrive y obtener el enlace directo.
Cuando ya tengas los enlaces ve a "Diseño" y edita el widget "Amplitude zero", al hacerlo veras lo siguiente:
El campo "Nuevo nombre del sitio" se llena con los siguientes datos Json:
Insertar CODE, HTML o PHP:
name: "Nombre canción", artist: "Cantante"Ejemplo:
Insertar CODE, HTML o PHP:
name: "Death Trap For A Dreamer", artist: "Caitlin Plunkett"Ahora, en el campo "Url del sitio nuevo" agrega los siguiente:
Insertar CODE, HTML o PHP:
url: "audio.mp3", cover_art_url: "imagen.jpg"Ejemplo:
Insertar CODE, HTML o PHP:
url: "https://drive.google.com/uc?export=download&id=1gWuSru3KHhIIMLZ1ydNmHKF957yMjmd8", cover_art_url: "https://i.imgur.com/DnDygih.jpg"Sólo name: y url: son obligatorios, los datos restantes se pueden omitir si asi se desea. También puedes agregar tantos elementos a la lista como desees, no hay límites.
Si tienen alguna duda o quieren saber mas de este widget, les recomiendo visitar mi aporte original en zkreations. Cualquier duda tambien dejenla en los comentarios, asi mismo, si experimentan algún problema yo los ayudaré.
