Blogger için html5 oynatıcılara devam ediyoruz, bu sefer ses. Bu widget blogger "Link listesi" gadget ve açık kaynak amplitude kütüphanesine dayanılarak geliştirilmiştir.
Amplitude.js, vanilla js (bağımlılık yok) ile yazılmıştır ve bir html5 ses oynatıcısının görünümünü ve hissini vererek tamamen kontrol etmenizi sağlar. Yani, bu bir oynatıcı değildir. Ancak size bir tane oluşturmak için ihtiyacınız olan her şeyi verir. Projenin github deposunu ziyaret etmenizi ve resmi belgeleri okumanızı tavsiye ederim.
Kurulum
Blogger'daki yönetim panelimizden, "Tema" bölümüne gideceğiz ve "Özel" düğmesine basacağız. Blogger şablon tasarımcısına girdikten sonra, gelişmiş seçeneklere gidiyoruz ve "Özel CSS" yi seçiyoruz, oraya aşağıdaki kodu yapıştırıyoruz:
/*!
* Tema: 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}
/*kod-sonu*/Değişiklikleri kaydetmek için "Uygula" düğmesine basın. Şimdi "Tema" sekmesine geri dönelim ve "HTML'yi Düzenle" düğmesine basalım, </b:section> (uygun olan) seçeneğini arayalım ve bunun üzerine aşağıdaki kodu yapıştıralım:
<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>Widget yüklenecek, ancak çalma listesine JSON biçiminde en az bir öğe ekleyene kadar görünür olmayacak, ancak "Bağlantı Listesi" widget'ından kontrol edilebilecektir.
Listeye öğe ekleme
Öncelikle ses dosyalarımızı bir hostinge yüklememiz gerekiyor. Eğer yoksa, Google Drive ile doğrudan indirme bağlantılarını kullanabilirsiniz (önerilir). Diğer seçenek ise ses dosyalarınızı Onedrive'a yüklemek ve aynı işlemi yapmaktır.
Ses dosyalarınızın bağlantılarını aldıktan sonra, bunları çalma listesine eklemeniz yeterlidir. Bunu yapmak için "Düzen"'e gidin ve "Amplitude zero" widget'ını düzenleyin, bu noktada aşağıdakileri göreceksiniz:
"Yeni site adı" alanına eklenecek Json verileri aşağıdaki gibidir:
name: "Şarkı adı", artist: "Şarkıcı"Hem name: hem de artist: parametrelerinin nasıl dize verisi içerdiğine dikkat edin, bu yüzden metin çift tırnak içine alınmıştır. Şimdi, "Yeni sitenin URL'si" alanına aşağıdakileri ekleyin:
url: "audio.mp3", cover_art_url: "imagen.jpg"Aşağıdaki örnekte, şarkıcı Caitlin Plunkett'in Death Trap For A Dreamer şarkısını ekliyorum, bu nedenle ilgili verilerin son hali şu şekilde görünecektir:
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"Çalma listesine istediğiniz kadar öğe ekleyebilirsiniz, herhangi bir sınırlama yoktur.
Zorunlu değerler
Toplamda, her liste öğesinde kullanılan JSON verileri name:, artist:, url: ve cover_art_url: şeklindedir. Bunlardan sadece name: ve url: zorunludur, geri kalanı atlanabilir.
Listeye daha fazla veri eklemek de mümkündür, ancak bunun için Amplitude.js resmi belgelerini okumanız gerekir.
Şimdilik hepsi bu kadar. Bu sizin için yararlı olduysa, lütfen sosyal ağlarda paylaşıp, daha fazla insana yardımcı olun.
