- 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.
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.
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.
Beri nama dan terima dasar pemaju SoundCloud dengan memeriksa kotak semak.
-
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.
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.
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.
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.
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) {
Atas ialah kandungan terperinci Menggunakan API SoundCloud dengan SDK JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Java vs JavaScript: Membersihkan kekeliruan
Jun 20, 2025 am 12:27 AM
Java dan JavaScript adalah bahasa pengaturcaraan yang berbeza, masing -masing sesuai untuk senario aplikasi yang berbeza. Java digunakan untuk pembangunan aplikasi perusahaan dan mudah alih yang besar, sementara JavaScript digunakan terutamanya untuk pembangunan laman web.
Komen JavaScript: Penjelasan ringkas
Jun 19, 2025 am 12:40 AM
JavaScriptcommentsareessentialformaintaining,reading,andguidingcodeexecution.1)Single-linecommentsareusedforquickexplanations.2)Multi-linecommentsexplaincomplexlogicorprovidedetaileddocumentation.3)Inlinecommentsclarifyspecificpartsofcode.Bestpractic
Bagaimana untuk bekerja dengan tarikh dan masa di JS?
Jul 01, 2025 am 01:27 AM
Titik berikut harus diperhatikan apabila tarikh pemprosesan dan masa di JavaScript: 1. Terdapat banyak cara untuk membuat objek tarikh. Adalah disyorkan untuk menggunakan rentetan format ISO untuk memastikan keserasian; 2. Dapatkan dan tetapkan maklumat masa boleh diperoleh dan tetapkan kaedah, dan ambil perhatian bahawa bulan bermula dari 0; 3. Tarikh pemformatan secara manual memerlukan rentetan, dan perpustakaan pihak ketiga juga boleh digunakan; 4. Adalah disyorkan untuk menggunakan perpustakaan yang menyokong zon masa, seperti Luxon. Menguasai perkara -perkara utama ini secara berkesan dapat mengelakkan kesilapan yang sama.
Kenapa anda harus meletakkan tag di bahagian bawah ?
Jul 02, 2025 am 01:22 AM
PlacingtagsatthebottomofablogpostorwebpageservespracticalpurposesforSEO,userexperience,anddesign.1.IthelpswithSEObyallowingsearchenginestoaccesskeyword-relevanttagswithoutclutteringthemaincontent.2.Itimprovesuserexperiencebykeepingthefocusonthearticl
JavaScript vs Java: Perbandingan Komprehensif untuk Pemaju
Jun 20, 2025 am 12:21 AM
JavaScriptispreferredforwebdevelopment, whersjavaisbetterforlarge-scalebackendsystemsandandroidapps.1) javascriptexcelsinceleatinginteractiveWebexperienceswithitsdynamicnatureanddommanipulation.2) javaoffersstrongyblectionandobjection
JavaScript: Meneroka jenis data untuk pengekodan yang cekap
Jun 20, 2025 am 12:46 AM
JavascripthassevenfundamentalDatypes: nombor, rentetan, boolean, undefined, null, objek, andsymbol.1) numberuseadouble-precisionformat, bergunaforwidevaluangesbutbecautiouswithfloating-pointarithmetic.2)
Apakah peristiwa yang menggelegak dan menangkap di Dom?
Jul 02, 2025 am 01:19 AM
Penangkapan dan gelembung acara adalah dua peringkat penyebaran acara di Dom. Tangkap adalah dari lapisan atas ke elemen sasaran, dan gelembung adalah dari elemen sasaran ke lapisan atas. 1. Penangkapan acara dilaksanakan dengan menetapkan parameter useCapture addeventlistener kepada benar; 2. Bubble acara adalah tingkah laku lalai, useCapture ditetapkan kepada palsu atau ditinggalkan; 3. Penyebaran acara boleh digunakan untuk mencegah penyebaran acara; 4. Acara menggelegak menyokong delegasi acara untuk meningkatkan kecekapan pemprosesan kandungan dinamik; 5. Penangkapan boleh digunakan untuk memintas peristiwa terlebih dahulu, seperti pemprosesan pembalakan atau ralat. Memahami kedua -dua fasa ini membantu mengawal masa dan bagaimana JavaScript bertindak balas terhadap operasi pengguna.
Apa perbezaan antara Java dan JavaScript?
Jun 17, 2025 am 09:17 AM
Java dan JavaScript adalah bahasa pengaturcaraan yang berbeza. 1.Java adalah bahasa yang ditaip dan disusun secara statik, sesuai untuk aplikasi perusahaan dan sistem besar. 2. JavaScript adalah jenis dinamik dan bahasa yang ditafsirkan, terutamanya digunakan untuk interaksi web dan pembangunan front-end.
