cari

Rumah >hujung hadapan web >tutorial js >Menggunakan API SoundCloud dengan SDK JavaScript

Menggunakan API SoundCloud dengan SDK JavaScript

Christopher Nolan
Christopher Nolanasal
2025-02-18 11:20:10376semak imbas

Menggunakan API SoundCloud dengan SDK JavaScript

Takeaways Key

    API SoundCloud membolehkan pemaju mengakses hampir semua data yang mereka perlukan. API adalah koleksi URL yang menyediakan akses kepada data dari pelayan SoundCloud, manakala SDK (Kit Pembangunan Perisian) adalah perpustakaan pra-ditulis untuk menanyakan API.
    • Terdapat dua versi SDK yang ada. Perbezaan utama di antara mereka adalah bagaimana mereka mengembalikan data apabila permintaan tak segerak dibuat kepada API. Versi terkini mengembalikan janji, sementara yang lain memerlukan fungsi panggil balik sebagai parameter.
    • Untuk memulakan pertanyaan API SoundCloud menggunakan JavaScript, SDK JavaScript yang disediakan oleh SoundCloud perlu dimuat turun. Untuk fungsi pengguna login, versi lama SDK disyorkan kerana ia lebih stabil.
    • Data dari API SoundCloud boleh diakses dengan permintaan GET yang mudah. Data khusus pengguna boleh didapati menggunakan titik akhir /saya, tetapi hanya jika pengguna log masuk ke laman web menggunakan akaun SoundCloud mereka.
    • Menanyakan API dari sisi klien dapat menyelamatkan pemaju dari kerumitan back-end. SDK memudahkan proses, membolehkan penciptaan aplikasi web yang lebih berkuasa dan mesra pengguna.
Artikel ini dikaji semula oleh Jamie Shields dan Wern Ancheta. Terima kasih kepada semua pengulas rakan sebaya SitePoint untuk membuat kandungan SitePoint yang terbaik! SoundCloud telah menyediakan API yang membolehkan pemaju mendapatkan hampir semua data yang mereka mahu. Tetapi penggunaannya boleh mengelirukan, terutamanya untuk pemula, kerana pada masa ini dokumentasi API SoundCloud dan contoh -contoh menggunakan versi yang berbeza dari SDK (Kit Pembangunan Perisian).

Apakah perbezaan antara API dan SDK? Pada asasnya, API adalah koleksi URL yang menyediakan akses kepada data dari pelayan SoundCloud, dan SDK adalah perpustakaan pra-ditulis (atau klien) untuk menanyakan API. Untuk mengetahui lebih lanjut lihat perbincangan ini.

Dalam tutorial ini, kami akan belajar bagaimana untuk mengakses API SoundCloud dan bagaimana untuk memudahkan proses menggunakan SDK. Kami akan berjalan walaupun menubuhkan SDK dan kemudian menulis JavaScript untuk mendapatkan data, bermain audio dan banyak lagi dari SoundCloud.

Bermula

Mengetahui konsep dan kerja HTTP dan API akan membantu. Jika anda ingin mengetahui lebih lanjut mengenai API, saya cadangkan kursus pendek ini: Pengenalan kepada API. Sedikit pengetahuan tentang JavaScript Asynchronous, janji dan panggilan balik juga akan membantu. JQuery digunakan dalam contoh kod kami, jadi mengetahui asas -asas tidak akan menyakitkan.

Untuk memulakan pertanyaan API SoundCloud menggunakan JavaScript, kita perlu memuat turun SDK JavaScript yang disediakan oleh SoundCloud. Seperti yang dinyatakan sebelum ini, terdapat dua versi SDK yang berbeza.

versi SDK yang mana yang hendak digunakan?

Perbezaan utama di antara mereka adalah bagaimana mereka mengembalikan data apabila permintaan tak segerak dibuat kepada API. Versi terkini mengembalikan janji, sementara yang lain memerlukan fungsi panggil balik sebagai parameter.

Satu masalah yang saya perhatikan, ialah dengan versi SDK yang digunakan oleh dokumentasi, nampaknya ada masalah dengan fungsi pengguna login, kerana tetingkap pop-up tidak ditutup secara automatik.

Jadi, demi kesederhanaan, dan kerana ia lebih stabil, kita akan menggunakan versi lama dalam contoh -contoh sepanjang tutorial ini. Versi ini memerlukan fungsi panggil balik untuk permintaan tak segerak.

menggunakan soundcloud Api

Setup Dokumen HTML Asas

Kami akan membuat halaman HTML asas yang akan berfungsi sebagai laman utama kami. Kami juga akan memasukkan SDK di sini, jadi kami boleh menggunakan fungsinya. 

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>Include SDK - Using SoundCloud API<span><span></title</span>></span>
</span>    <span><span><span><script</span> src<span>="//connect.soundcloud.com/sdk.js"</span>></span><span><span></script</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

Perhatikan bahawa kami telah memasukkan SDK di halaman kami terus dari pelayan Soundcloud. Anda juga boleh memuat turun SDK dan merujuknya seperti: 

<span><span><span><script</span> src<span>="sdk.js"</span>></span><span><span></script</span>></span>
</span>

untuk menguji jika SDK dimuatkan di laman web anda dengan betul:

  • Buka halaman dalam penyemak imbas (Chrome disyorkan).
  • Buka konsol pemaju dalam penyemak imbas ( shift ctrl J , dalam krom).
  • Dalam konsol, taip SC dan tekan Enter. SC adalah objek yang dicipta oleh SDK yang kami sertakan.
Jika ralat yang tidak ditentukan muncul maka ia tidak dimuatkan dengan betul. Cuba menyegarkan dan pastikan laluan ke fail SDK (sdk.js) betul.

Daftar aplikasi SoundCloud

Untuk mendaftarkan aplikasi SoundCloud, semua yang anda perlukan adalah akaun SoundCloud. Jika anda tidak mempunyai satu, teruskan dan buat satu. Dengan mendaftarkan aplikasi, pelayan SoundCloud akan dapat mengesahkan permintaan kami, jadi tidak ada orang lain yang dapat membuat permintaan bagi pihak kami.

Nota: Kami boleh melangkau langkah ini, jika kami tidak akan menggunakan ciri pengguna login di laman web kami. Ia akan dijelaskan di bahagian seterusnya.

  • Buka halaman aplikasi SoundCloud. Di sini mana -mana aplikasi yang telah kami buat akan disenaraikan. Pastikan anda log masuk ke akaun SoundCloud anda.

    Nota: Anda tidak perlu membuat akaun berasingan untuk tujuan ini. Anda boleh menggunakan akaun yang sama yang anda gunakan untuk tujuan peribadi.

  • Klik pada

    Daftar aplikasi baru butang. Menggunakan API SoundCloud dengan SDK JavaScript

    • Beri nama dan terima dasar pemaju SoundCloud dengan memeriksa kotak semak.

  • Menggunakan API SoundCloud dengan SDK JavaScript

    klik pada butang Big
    • Daftar
  • , untuk melengkapkan pendaftaran aplikasi.

Selepas kami berjaya mendaftar, kami akan diarahkan ke halaman tetapan aplikasi kami yang baru dibuat. Di sana kami akan menemui id klien aplikasi kami , yang akan digunakan untuk memberi kuasa kepada permintaan kami. Kami boleh meninggalkan laman web dan panggil balik medan buat masa ini. Kami akan sampai ke sana kemudian.

Inisialisasi klien

Dengan "memulakan klien", kami bermaksud menjadikan pelanggan bersedia untuk menukar data antara dirinya dan SoundCloud API. Kami boleh melakukannya dalam dokumen HTML asas kami, yang kami buat sebelum ini, atau dalam fail .js luaran.

sintaks JavaScript untuk berbuat demikian ialah: 

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>Include SDK - Using SoundCloud API<span><span></title</span>></span>
</span>    <span><span><span><script</span> src<span>="//connect.soundcloud.com/sdk.js"</span>></span><span><span></script</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

mari kita memecahkannya:

  • klien_id diberikan kepada kami apabila kami mendaftarkan aplikasi kami.
  • callback_url adalah url untuk callback.html, fail html yang dipanggil selepas pengguna telah log masuk. Kami akan menciptanya tidak lama lagi.

Sekarang, selepas permulaan, kami bersedia untuk menanyakan API SoundCloud. Mari kita lihat beberapa contoh apa yang boleh kita lakukan.

Contoh

Jika kita membuka konsol penyemak imbas dan jenis sc., Senarai kaedah yang berkaitan dengan objek SC akan muncul. Sc.get (Uri, callback) adalah salah satu daripada mereka, yang digunakan untuk membuat permintaan untuk API.

Mendapatkan senarai trek

Untuk mendapatkan senarai trek rawak, kita boleh menggunakan sc.get () seperti ini: 

<span><span><span><script</span> src<span>="sdk.js"</span>></span><span><span></script</span>></span>
</span>

Lihat trek penyenaraian pen oleh SitePoint (@SitePoint) pada codepen.

Apa ini, ialah ia menanyakan titik akhir /trek dan menjangkakan fungsi panggil balik. Sambutan disimpan dalam parameter tindak balas panggilan balik, yang merupakan pelbagai objek JavaScript dengan pelbagai sifat, tajuk menjadi salah satu daripada mereka. Kita boleh konsol.log (respons [0]) dan bukannya gelung untuk melihat keseluruhan objek dan sifatnya. Kemudian kita akan tahu sifat mana yang kita akses kepada.

Notis, dalam contoh ini kami tidak menetapkan URL panggil balik semasa permulaan. Ini kerana di sini tidak mengapa jika kita menentukan atau tidak. Sama ada kod kami akan berfungsi. Tetapi apabila kita akan melaksanakan fungsi pengguna login, ia akan menjadi penting dan akan diperlukan supaya tidak ada orang lain yang boleh menggunakan id klien kami.

membenamkan trek

Objek SC menawarkan kaedah lain, sc.oembed (url, pilihan, panggilan balik), yang membenamkan pemain SoundCloud di laman web kami dan membolehkan kami memainkan lagu pilihan kami. 

<span>SC.initialize({
</span>  <span>client_id: "CLIENT_ID",
</span>  <span>redirect_uri: "CALLBACK_URL"
</span><span>});
</span>
Lihat pen yang membenamkan trek oleh SitePoint (@SitePoint) pada Codepen.

mari kita memecahkannya:

  • Pertama kita memberikan URL lengkap trek yang kita mahu mainkan.
  • Dalam parameter pilihan, kami menetapkan beberapa pilihan untuk pemain. Lihat lebih lanjut di sini.
  • Dalam fungsi panggil balik, kami menggantikan kandungan elemen (#player) di halaman kami dengan kod HTML untuk pemain (res.html).

Trik ini boleh digunakan untuk membenamkan lagu atau muzik di laman web.

Melaksanakan Login Pengguna

Untuk pelaksanaan fungsi pengguna login, kita perlu mempunyai URL panggil balik untuk tujuan kebenaran. Ini adalah keperluan protokol OAuth. Sekiranya anda ingin tahu, inilah penjelasan yang mudah: OAuth 2 dipermudahkan. Oleh itu, mari kita teruskan dan kemas kini tetapan aplikasi untuk memasukkan URL panggil balik callback.html, yang kini akan kita buat.

Buat halaman panggil balik

Selepas pengguna telah log masuk, tetingkap pop timbul mengalihkan ke fail ini. Dalam kes kami, kami akan menamakannya callback.html dan ia akan tinggal di direktori yang sama dengan halaman rumah kami (index.html). Ini adalah fail yang perlu kami berikan dalam medan panggil balik dalam tetapan aplikasi kami.

Menggunakan API SoundCloud dengan SDK JavaScript

Kod yang perlu kita gunakan dalam fail panggil balik disediakan dalam dokumentasi. Walau bagaimanapun, dokumentasi itu agak ketinggalan zaman, jadi kami akan mengubahnya sedikit untuk memenuhi piawaian moden.

anda boleh mengubahsuai mesej dan reka bentuknya sebanyak yang anda mahu, tetapi buat masa ini, kami akan menyimpannya semudah mungkin: 

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>Include SDK - Using SoundCloud API<span><span></title</span>></span>
</span>    <span><span><span><script</span> src<span>="//connect.soundcloud.com/sdk.js"</span>></span><span><span></script</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>
Melog masuk pengguna dalam

sc.Connect (Callback) adalah kaedah untuk melaksanakan ciri pengguna-login. Ia membuka tetingkap pop timbul, mendorong pengguna untuk log masuk ke akaun SoundCloud mereka. Penggunaan asas adalah seperti di bawah: 

<span><span><span><script</span> src<span>="sdk.js"</span>></span><span><span></script</span>></span>
</span>
Contoh yang lebih menarik adalah: 

<span>SC.initialize({
</span>  <span>client_id: "CLIENT_ID",
</span>  <span>redirect_uri: "CALLBACK_URL"
</span><span>});
</span>
mari kita memecahkannya:

    Selepas pengguna telah log masuk, mereka akan diarahkan ke callback.html, yang kami buat sebelum ini.
    • maka tetingkap pop timbul akan ditutup secara automatik, seperti yang kita dapat meneka dengan membaca kod dalam callback.html.
    • Selepas itu, fungsi panggil balik kami akan dipanggil, di mana permintaan mendapatkan ke titik akhir /saya dibuat menggunakan kaedah sc.get ().
    • Sebaik sahaja permintaan GET selesai, fungsi panggil baliknya akan dilaksanakan dan mesej selamat datang akan log masuk ke konsol.
Perhatikan bahawa permintaan kepada /saya akan mengembalikan data mengenai pengguna yang sedang dilog masuk. Oleh itu, menggunakannya sebelum pengguna telah log masuk akan menghasilkan mesej ralat.

Bermain dengan data pengguna

Apabila pengguna telah log masuk, terdapat lebih banyak lagi yang boleh kita lakukan. Untuk menunjukkan beberapa kuasa, saya telah membuat laman web demo di GitHub. Anda boleh mencari kod sumber di sini dan melihatnya dalam tindakan di sini.

mari kita berjalan melalui dua fail. Di index.html, empat div adalah penting, kerana mereka dapat diisi dengan data pengguna selepas pengguna telah log masuk: 

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>Include SDK - Using SoundCloud API<span><span></title</span>></span>
</span>    <span><span><span><script</span> src<span>="//connect.soundcloud.com/sdk.js"</span>></span><span><span></script</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

Fail paling penting seterusnya ialah Script.js: Semua sihir berlaku di sini. Kebanyakan kod itu akan menjadi biasa kepada kami, tetapi mari berjalan dengan cepat: 

<span><span><span><script</span> src<span>="sdk.js"</span>></span><span><span></script</span>></span>
</span>
  • Pertama kita memulakan aplikasi kami. Perhatikan, kali ini kami mempunyai redirect_uri yang ditentukan sebagai halaman callback.html kami. URL atau URI ini sepadan dengan URL yang telah kami tentukan dalam tetapan aplikasi kami. 
<span>SC.initialize({
</span>  <span>client_id: "CLIENT_ID",
</span>  <span>redirect_uri: "CALLBACK_URL"
</span><span>});
</span>
  • Kemudian kami melampirkan pengendali acara klik ke butang #Login. Yang apabila diklik, akan melaksanakan sc.connect (callback) yang membuka tetingkap pop timbul yang mendorong pengguna untuk log masuk.
  • Selepas pengguna telah log masuk, tetingkap pop timbul ditutup. Kemudian fungsi panggil balik sc.Connect () akan dilaksanakan. Di dalam fungsi panggil balik, kami membuat permintaan GET ke titik akhir /saya yang mengembalikan objek pengguna yang sedang dilog masuk. Dalam panggilan balik permintaan GET yang kami buat, kami menyimpan permalink pengguna dalam pembolehubah user_perma, yang ditakrifkan dalam skop global, jadi kami boleh menggunakannya kemudian.
  • Fungsi setui (), getTracks () dan getPlayLists (), sediakan UI, senaraikan trek pengguna dan senaraikan senarai main pengguna masing -masing. Fungsi ini ditakrifkan dalam fail yang sama. 
<span>SC.get("/tracks", function(response) {
</span>  <span>for (var i = 0; i < response.length; i++) {
</span>    <span>$("ul").append("<li>" + response[i].title + "</li>");
</span>  <span>}
</span><span>});
</span>
  • Apabila mana -mana nama trek atau senarai main akan diklik, fungsi Play () dilaksanakan, yang membenamkan pemain audio di halaman kami menggunakan kaedah sc.oembed (), untuk trek atau senarai main itu.
Terdapat banyak lagi yang boleh kita lakukan, seperti mendapatkan atau mengemas kini keterangan pengguna, mendapatkan avatar pengguna, melihat siapa pengguna mengikuti dan kegemaran mereka.

Ringkasan

    Gunakan versi lama SDK, jika ciri pengguna-login digunakan. Ia stabil, dan data dikembalikan menggunakan fungsi panggil balik.
    • Jika ciri pengguna login tidak digunakan, versi baru SDK boleh digunakan. Ia menggunakan janji untuk mengembalikan data.
    • data dari API SoundCloud boleh diakses dengan permintaan GET yang mudah. ​​
    • Data khusus pengguna boleh diperolehi menggunakan titik akhir /saya, tetapi hanya jika pengguna log masuk ke laman web kami menggunakan akaun SoundCloud mereka.
Menanyakan API dari sisi klien adalah alat yang berkuasa kerana ia menyelamatkan kita dari kerumitan back-end. SDK menjadikan kehidupan kita lebih mudah. Selepas mempelajari asas-asasnya, kami boleh membuat aplikasi web yang lebih berkuasa dan mesra pengguna. Lihat beberapa contoh apa yang mungkin, dan lihat dokumentasi SoundCloud rasmi untuk mengetahui lebih lanjut mengenai kaedah API lanjutan yang tersedia.

Saya suka mendengar daripada anda tentang perkara yang telah anda bina (atau merancang untuk membina) dengan SDK SoundCloud. Beritahu saya dalam komen!

Soalan Lazim (Soalan Lazim) Mengenai Menggunakan API SoundCloud dengan JavaScript SDK

Apakah prasyarat untuk menggunakan API SoundCloud dengan JavaScript SDK? Anda juga perlu mempunyai akaun SoundCloud dan aplikasi berdaftar di SoundCloud. Permohonan berdaftar akan memberi anda ID pelanggan, yang diperlukan untuk membuat permintaan API. SoundCloud, anda perlu log masuk ke akaun SoundCloud anda dan menavigasi ke bahagian 'Apps'. Di sini, anda boleh membuat aplikasi baru dengan memberikan butiran yang diperlukan seperti nama aplikasi, keterangan, laman web, dan redirect URI. Setelah aplikasi dibuat, anda akan diberikan id klien. Kaedah sc.initialize dan lulus dalam objek dengan ID pelanggan anda. Berikut adalah contoh:

sc.initialize ({

client_id: 'your_client_id'

}); >

Bagaimana saya membuat permintaan API untuk SoundCloud?

Anda boleh membuat permintaan API untuk SoundCloud menggunakan kaedah sc.get. Kaedah ini mengambil dua parameter: titik akhir dan fungsi panggil balik. Titik akhir adalah URL sumber API yang anda ingin akses, dan fungsi panggil balik dilaksanakan apabila tindak balas API diterima. Membuat permintaan API, kesilapan boleh dikendalikan menggunakan kaedah tangkapan. Kaedah ini mengambil fungsi sebagai parameter, yang dilaksanakan apabila ralat berlaku. Objek Ralat diserahkan kepada fungsi ini, membolehkan anda mengendalikan ralat dengan sewajarnya. Perlu menggunakan kaedah sc.stream. Kaedah ini mengambil URI trek sebagai parameter dan mengembalikan objek aliran. Anda kemudian boleh menggunakan kaedah main di objek ini untuk memainkan trek. objek. Untuk meneruskan trek, anda boleh menggunakan kaedah main sekali lagi.

Bagaimana saya mendapatkan butiran trek? kaedah dan lulus URI trek sebagai parameter. Tanggapan API akan mengandungi butiran trek.

Bagaimana saya mencari trek?

Untuk mencari trek, anda boleh menggunakan kaedah sc.get dan lulus '/trek' sebagai titik akhir. Anda juga boleh lulus parameter pertanyaan untuk menapis trek. Contohnya, untuk mencari trek dengan tajuk 'My Track', anda boleh menggunakan kod berikut:

sc.get ('/tracks', {q: 'my track'}). Kemudian (fungsi (trek) { console.log (trek); ); Kaedah sc.get dan lulus '/users/{user_id}/tracks' sebagai titik akhir. Ganti '{user_id}' dengan ID pengguna. Tindak balas API akan mengandungi trek pengguna.

Atas ialah kandungan terperinci Menggunakan API SoundCloud dengan SDK JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript jquery chrome html Array Object Resource if for while checkbox include require try catch Directory Error Logging Filter register break using Event Collection JS console undefined function this promise github http ui issue embedding Access Other
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Cari coretan kod JavaScript dengan fungsi dengan COCYLLEArtikel seterusnya：Cari coretan kod JavaScript dengan fungsi dengan COCYLLE

Artikel berkaitan

Lihat lagi