Как да вградите динамично малката версия на плейъра Soundcloud с помощта на JS SDK?

Създавам уебсайт за музикален композитор. Той би искал да публикува мостри от работата си чрез Soundcloud и да вгради някои от тези мостри на уебсайта си. Той има Premium акаунт.

Бих искал да направя това възможно най-лесно за него (той не е маниак). По принцип бих искал да му позволя само да копира и постави URL адреса на песента от адресната лента на браузъра и моето приложение да свърши останалото вместо него.

Това всъщност е сравнително лесно да се направи - и аз успешно го накарах да работи със стандартната версия на плейъра. Но не мога да намеря работещ начин за програмно вграждане на малката версия на плейъра. Не се споменава нищо за малкия плейър в справката за Soundcloud oEmbed и самото задаване на параметъра maxheight на 18 не го прави за мен.

Проблемът е, че всъщност трябва да генерирам вграждането на всяка страница, тъй като същата песен, вградена в началната страница, трябва да бъде изобразена с помощта на малкия плейър, докато на подстраница трябва да е пълният стандартен плейър - следователно не мога просто да му позволя да копира и постави кода за вграждане от soundcloud в моето приложение, защото тогава ще имам наличен код за вграждане на малък плейър или стандартен код на плейър, а не и двата. Копирането и поставянето на два различни кода за вграждане за една и съща песен изглежда твърде трудно за такова просто нещо.

Друго нещо е, че не мога правилно да тествам това, тъй като самият аз нямам Premium акаунт и нямам достъп до неговия акаунт.. би било страхотно, ако имаше начин разработчиците да се „подиграват“ на Premium акаунт за цели за развитие...

Благодаря за всяка помощ!

Дан


sdk soundcloud oembed
person Dan Kadera    schedule 15.02.2013    source източник

Отговори (1)


arrow_upward
5
arrow_downward

За съжаление, /oembed работи само за обикновена джаджа (HTML5 на flash) в момента.

Можете обаче сами да създадете html за който и да е от тях. Ето един шаблон за вграждане на малка джаджа:

<object height="18" width="100%">
  <param name="movie" value="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F{trackId}&player_type=tiny{widgetParams}"></param>
  <param name="allowscriptaccess" value="always"></param>
  <param name="wmode" value="transparent"></param>
  <embed wmode="transparent" allowscriptaccess="always" height="18" width="100%" src="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F{trackId}&player_type=tiny{widgetParams}"></embed>
</object>

И шаблонът за обикновена джаджа:

<iframe width="100%" height="166" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F{trackId}{widgetParams}"></iframe>

Трябва да ги поставите в низове (без прекъсвания на редове) и да извършите променлива интерполация върху тези низове. Не съм сигурен какъв език използвате, но повечето езици имат това вградено.

За JavaScript, който пиша през повечето време, можете да използвате supplant функция на Дъглас Крокфорд.

Променливите са trackId, за която стойността трябва да е положително цяло число и widgetParams, за която стойността трябва да бъде нещо като &color=ff6600&auto_play=false, тоест key=value двойки с префикс &. Използвал съм { и } като разделители за променливи, които да интерполирам в моя пример, но може, разбира се, да бъде каквото вашият език или машина за шаблони изисква да бъде.

За да може вашият клиент просто да ви даде URL адрес на песен, ще трябва да направите заявка за API до /resolve крайна точка, за да извлечете ID на песен от URL адреса на песен (постоянна връзка). Трябва да се регистрирате като разработчик, за да имате client_id за оторизиране на заявки към API. Описах как да го направя в JavaScript в друг отговор тук.

Ако предпочитате да не правите заявки към API, можете също да помолите клиента си да ви даде кода за вграждане, който лесно може да извлече от всеки звук или набор в SoundCloud, като натиснете бутона „споделяне“, и след това извлечете звука или задайте ID с помощта на регулярен израз.

Ето пример как би работило това за вмъкване на малка джаджа (също използвайки SoundCloud JS SDK) http://jsbin.com/OLUloX/1/edit

person Misha Reyzlin    schedule 15.02.2013
comment
Леле, изумена съм! Толкова много подробности.. Благодаря много, това е перфектно! Вече използвам API за разрешаване на постоянната връзка, за да получа заглавието на песента, като го адаптирам, за да получа API. url ще бъде лесно и HTML може лесно да се сглоби от страна на клиента с Javascript, точно както посочихте. Приемам отговора ви, въпреки че съм малко загрижен за възможни бъдещи промени в Soundcloud, които могат да нарушат това решение, но това е грижа за все още непредвидимо бъдеще :o) Благодаря много отново! - person Dan Kadera; 16.02.2013
comment
И само бърз отчет: работи като чар! Всъщност това решение работи ТОЛКОВА добре, че мога да вграждам песни от моя непремиум акаунт, използвайки малката версия на плейъра, за която вярвах, че е опция само за премиум...? Така че може би има грешка, която сме открили... ;o) - person Dan Kadera; 16.02.2013
comment
този пример е идеален, но как мога да създам списък с играчи от определен плейлист? - person João Paulo Fricks; 08.05.2015