SM2 Cassette Tape UI

Cassette tape terkahir dikenal diera tahun 90an sebelum adanya laserdisk,vcd,dvd dll,.. bagaimana cara kerja sebuah cassette ketika diputar, begitulah cara kerja pada audio player ini, yaitu ketika musik dimainkan maka ke dua gird yang berada didalamnya berputar begitu juga bantalan scroll pitanya juga ikut berputar,. ketika musik habis dimainkan maka gulungan pita yang ada berpindah ke gird sebelahnya,. bukan hanya itu,. ketika tombol rewind atau fast-forward ditekan maka suara akan terdengar lebih cepat begitu juga dengan gulungan pitanya semakin cepat berpindah pada gird satunya.
Bagaimana cara menerapkan pada blog?,.. untuk menerapkan pada blog,. gunakan semua kode dibawah ini :

<div class="black-micro dark clear texture tape">
<div class="rail-left"></div>
<div class="rail-right"></div>
<div class="rail-middle">
<div class="rail-middle-outline" style="border:none;background-color:transparent">
<div class="hole-1"></div>
<div class="hole-2"></div>
<div class="hole-3"></div>
<div class="hole-4"></div>
<div class="tape-pad-holder">
<div class="tape-pad"></div>
<div class="tape-pad-line"></div>
</div>
</div>
<div class="screw-bm"></div>
</div>
<div class="screw-tl"></div>
<div class="screw-tr"></div>
<div class="screw-bl"></div>
<div class="screw-br"></div>
<div class="screw-tm"></div>
<div class="left reel"></div>
<div class="left spokes"></div>
<div class="right reel"></div>
<div class="right spokes"></div>
<div class="progress-notches">
<div class="n1"></div>
<div class="n2"></div>
<div class="n3"></div>
<div class="n4"></div>
<div class="n5"></div>
<div class="n6"></div>
<div class="n7"></div>
<div class="n8"></div>
<div class="n9"></div>
</div>

<div class="controls">
<div class="bd">
<ul>
<li><a href="#" title="play/pause" class="play">◄</a></li>
<li><a href="#" title="rewind" class="rew">«</a></li>
<li><a href="#" title="fast-forward" class="ffwd">»</a></li>
<li><a href="#" title="stop" class="stop">■</a></li>
</ul>
</div>
</div>
</div> </center> <br/><br/><br/><div style="text-align: justify;">
Disini diisi kalimat yang akan anda tulis pada postingan saudara
</div>
<br /> <br /> Official Site : <a href="http://www.schillmania.com/projects/soundmanager2/" rel="nofollow" target="_blank">SoundManager 2</a> | Creative Audio Player In Blog by <a href="http://audioxplayer.blogspot.com/" rel="nofollow" target="_blank">Blog Audio Player</a>

copy semua kede tersebut diatas dan masukan pada postingan blog pada mode HTML, (Mohon untuk tidak menghapus link official site juga link Creative audio playernya).
Pada saat menerapkan pada blog,. mungkin temen-temen ingin menyematkan lagu kesukaannya. maka untuk menganti ulr.mp3-nya terletak pada file"cassette-tape-ui.js" silahkan diklik untuk melihat filenya,. dan cari code berikut :

if (soundManager.ok()) {
s = soundManager.createSound({
id: 'tapeSound', url: 'https://dl.dropbox.com/s/87ll3rlvvy1idco/Jem%20-%20Its%20Amazing.mp3',
multiShot: false,
whileplaying: function() {
for (var i=tapeUIs.length; i--;) {
// console.log(this.position, this.durationEstimate);
tapeUIs[i].setProgress(this.position/this.durationEstimate);
}
},

Tulisan berwarna biru diatas adalah Url.mp3-nya. Bagaimana membuat Url Mp3, CSS, JS,. dan lain lain silakan baca pada instructions yang ada diatas. Selamat Mencoba,....

Original Demo : Cassette Tape UI dan demo lainya : more demo
Official Site : Sound Manager2 | SM2 Cassette Tape UI Demo In Blog by Blog Audio Player

Musical

Add Comment