Instruction :
Pres,.
button power on
And click title song to load it on the turntable.
TITLE SONG
Bagaimana memainkan music DJ (disc jockey) begitulah kesan yang muncul ketika anda memutar SM2 Turntable UI audio player ini,. selain memiliki tombol power on/of, tombol star/stop juga terdapat Tonearm yang terus bergerak dari pingiran CD terus ketengah hingga akhir lagu yang dimainkan begitu juga pada piringan CD yang terus berputar saat lagu dimainkan.
Untuk menerapkan pada blog silahkan ke
SoundManager2, untuk mendownload filenya dan Upload hasil extrac file tersebut ke dropbox atau langsung diuplaod file zip tersebut jika melalui web based FTP Client
gunakan kesemua kode dibawah ini dan diterapkan pada postingan blog pada mode HTML, namun sebaiknya bacalah terlebih dahulu instructions yang ada diatas
<script type="text/javascript" src="URL/script/soundmanager2.js"></script>
<script src="URL/script/turntable.js"></script>
<script src="URLscript/turntable-app.js"></script>
<link rel="stylesheet" href="URL/css/turntable.css" />
<div style="position:relative;text-align:center">
<!-- note: inline-block is just for centering -->
<div id="turntable-large" class="turntable has-slipmat" style="display:inline-block">
<div class="frame"></div>
<div class="table-bg"></div>
<!-- image that sets the base dimensions-->
<img src="URL/tt_case_and_lighting.png" alt="" class="stub" />
<div class="bd">
<div class="platter"></div>
<div class="slipmat-holder">
<div class="slipmat"></div>
</div>
<div class="record-holder">
<div class="record"></div>
<div class="record-grooves"></div>
<div class="label"></div>
</div>
<div class="spindle"></div>
<div class="power-light"></div>
<a href="#" class="power-dial" data-method="powerToggle"></a>
<a href="#" class="button start-stop" data-method="toggle"></a>
<a href="#" class="button speed-33 on"></a>
<a href="#" class="button speed-45"></a>
<div class="light light-on"></div>
<a href="#" class="button light"></a>
<div class="tonearm-holder">
<div class="tonearm"></div>
</div>
</div>
</div>
</div>
<div>
<p class="indent" style="margin-top:-3%">Click a link to load it on the turntable.</p>
<ul>
<li><a data-artwork="URL/JPG" data-turntable="turntable-large" href="URL/Mp3"><b>JUDUL LAGU</b> - ARTIS</a>
</li>
<li><a data-artwork="URL/JPG" data-turntable="turntable-large" href="URL/Mp3"><b>JUDUL LAGU</b> - ARTIS</a>
</li>
</ul>
Membangun Kerangka Audio Player
Jika mengupload file yang didownload tadi ke dropbox maka anda harus secara manual membangun kerangka audio player ini yang terdiri dari file JPG dan PNG. Buka file Truntable.CSS,.. masukan Url.jpg atau Url.png yang telah diupload tadi ke file Truntable.CSS,.. sesuaikan nama dan filenya,. jika semua url telah dimasukan silahkan disave.
Setelah semua Url/js, Url/Css diatas telah anda masukan termasuk Ulr.mp3 judul dan nama artis, silahkan publikasihkan postingan saudara dan lihat hasilnya,.
Original Demo :
Turntable UI
