ZKreations
Beta
Usuário com poucas negociações! Use sempre o saldo do 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:
Inserir CODE, HTML ou 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:
Inserir CODE, HTML ou 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:
Inserir CODE, HTML ou PHP:
name: "Nombre canción", artist: "Cantante"Ejemplo:
Inserir CODE, HTML ou PHP:
name: "Death Trap For A Dreamer", artist: "Caitlin Plunkett"Ahora, en el campo "Url del sitio nuevo" agrega los siguiente:
Inserir CODE, HTML ou PHP:
url: "audio.mp3", cover_art_url: "imagen.jpg"Ejemplo:
Inserir CODE, HTML ou 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é.
