Home
Guestbook
About
Message
FeedCara memasang pemutar musik soundcloud di situs web atau blog
Semua orang sudah tau tentang SoundCloud, dari orang awam yang menyebut situs musik online, para maniak Android akan menyebut alat pemutar musik, atau seorang wapper yang menyebutnya sumber grab. Tapi menurut Wikipedia SoundCloud adalah sebuah platform distribusi suara secara online yang memungkinkan kolaborasi, promosi, dan distribusi dari rekaman suara.
Pada kesempatan ini Admin akan memberikan contoh embed audio SoundCloud dengan mudah. Jika kamu lagi cari-cari tutorial memasang audio dari SoundCloud di website, silahkan ikuti langkah-langkah berikut. Untuk meng-Embed audio dari SoundCloud ada dua cara yang dapat kamu gunakan, yaitu:
Menggunakan HTML5 <iframe> seperti yang digunakan oleh situs SondCloud.
Costum audio player dengan elemen <audio> dan atau JavaScript.
Cara pertama cocok digunakan buat kamu yang suka dengan cara instan. Tapi jangan salah, walaupun hanya menggunakan elemen <iframe> tapi kita dapat mengontrol audio tersebut menggunakan JavaScript.
<iframe src="https://w.soundcloud.com/player?visual=true&url=http://api.soundcloud.com/tracks/(audio id)&show_artwork=true&show_comments=false&color=393c39" style="width:100%;height:240px;overflow:hidden;border:none"></iframe>
DEMO
Kode SoundCloud di atas memiliki parameter sebagai berikut:
| Parameter | Nilai Default | Deskripsi |
|---|---|---|
| auto_play | false | Audio akan bermain otomatis ketika telah dimuat. |
| buying | true | Menampilkan/menyembunyikan tombol pembelian. |
| liking | true | Menampilkan/menyembunyikan tombol like. |
| download | true | Menampilkan/menyembunyikan tombol download. |
| sharing | true | Menampilkan/menyembunyikan tombol share/dialog. |
| show_artwork | true | Menampilkan/menyembunyikan artwork. |
| show_comments | true | Menampilkan/menyembunyikan komentar. |
| show_playcount | true | Menampilkan/menyembunyikan jumlah pemutaran audio. |
| show_user | true | Menampilkan/menyembunyikan nama pengunggah. |
| start_track | 0 | Pilih trek di dalam playlist, mulai dari 0 sampai jumlah playlist. |
Kamu juga bisa menggunakan elemen <audio> jika itu yang kamu inginkan. Maka akan menjadi seperti dibawah ini.
<audio id="player" style="width:100%" controls> <source type="audio/mpeg" src="http://api.soundcloud.com/tracks/(audio id)/stream?client_id=(client id)"></source> </audio>
DEMO
Jika kamu mulai bosan dengan tampilan default dari elemen <audio> tenang saja, mungkin artikel yang satu ini bermanfaat "Beberapa JavaScript library untuk memutar Video atau Audio di website".
Berikut ini Admin akan memberikan contoh embed audio SoundCloud menggunakan JavaScript library. Cara ini tentu agak rumit, tapi setidaknya ini akan lebih baik untuk orang-orang anti mainstream. Ada dua tahap yang harus dikerjakan. Pertama kita buat elemen pemutar audio. Selanjutnya mengontrol element pemutar audio tersebut dengan JavaScript library. Bingung? dibawah ini contohnya.
<audio id="player" preload="none" style="width:100%">
<source type="audio/mpeg" src="http://api.soundcloud.com/tracks/(audio id)/stream?client_id=(client id)"></source>
</audio>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//mediaelementjs.com/js/mejs-2.20.0/mediaelement-and-player.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#player").mediaelementplayer(); });
</script>
Mungkin link berikut ini dapat membantumu untuk membuat pemutar audio sesuai selera MediaElement.js. Selamat mencoba... Semoga berhasil.
