Home » Article » Javascript » Source Code Html Untuk Meng-Embed Audio Soundcloud Di Website

Source Code HTML untuk meng-Embed audio SoundCloud di website

f_huda19   07 April 2016   18:29:52   0 Suka   Favorit

Cara memasang pemutar musik soundcloud di situs web atau blog


cara memasang pemutar musik soundcloud di web atau blog, embed musik audio soundcloud

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:

  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.

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

ParameterNilai DefaultDeskripsi
auto_playfalseAudio akan bermain otomatis ketika telah dimuat.
buyingtrueMenampilkan/menyembunyikan tombol pembelian.
likingtrueMenampilkan/menyembunyikan tombol like.
downloadtrueMenampilkan/menyembunyikan tombol download.
sharingtrueMenampilkan/menyembunyikan tombol share/dialog.
show_artworktrueMenampilkan/menyembunyikan artwork.
show_commentstrueMenampilkan/menyembunyikan komentar.
show_playcounttrueMenampilkan/menyembunyikan jumlah pemutaran audio.
show_usertrueMenampilkan/menyembunyikan nama pengunggah.
start_track0Pilih 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>

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.

KOMENTAR

Gus

Gus 13 May 16

Widih Mantap Mas, Ini Kaya Grabber Gitu Ya! Keren, Dan Yang Lebih Keren Situs Sampean Ini Beuh Tema Dan Artikelnya Ajib.. Oleh Karena Itu Bolehkah Saya Minta Tema Sampean Punya Ini, Keren Soalnya Mas!

Kalau Boleh Balas Komentar Disini Aja, Situs Sampean Sudah Saya Bookmark Jadi Bisa Tetep Berkunjung Disini, Oiya Apa Sampean Ada Facebook Atau Twitter.

f_huda19

Admin 17 May 16

maaf mas, temanya limited edition hhe.. twitter saya @f_huda19

tess

tess 25 May 16

gan ,buat tutor donk yg lengkap , dari awal buat wap kaya punya agan gimana sampe jadi , tutornya simpel kaga apa asal lengkap ...
,soal'a ane bingung kalau tutor'a kaga bertahap ^_^

paesal

paesal 29 Sep 16

itu kode HTML5 <iframe> nya kok tidak sama sperti parameternya mas, ada beberapa parameter yang tidak tertulis didalam kodenya mas, boleh tidak saya dikirimkan kode html5 <frame> yang lengkap seperti dari kode html5 soundcloud.?

KIRIM KOMENTAR