Embed Soundcloud to Website

Semua orang sudah tau tentang SoundCloud, dari orang awam yang menyebut situs musik online, para maniak Android akan menyebut alat pemutar musik.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:

  1. Menggunakan HTML5 <iframe> seperti yang digunakan oleh situs SondCloud.
  2. 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.

1
<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>

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.

1
2
3
<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>

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.

1
2
3
4
5
6
7
8
9
<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.

Leave a Reply

Your email address will not be published. Required fields are marked *