Компактный плеер Soundcloud
Создал | Раздел все , для блоггера , интернет/программы | Дата: среда, Сентябрь 21, 2011
Сегодня я поделюсь, как можно вставить маленький флеш-плеер Soundcloud.com в блог. На сайте это является платным, но это можно сделать и бесплатно, если немного изменить исходный код плеера.
Маленький плеер выглядит очень компактно, и умеет разворачиваться после нажатия на кнопку. Чтобы этому научиться, нужно иметь некоторые знания в html-форматирвании.
После того, как музыка будет загружена на сайт (или выбрав чужую композицию), нужно скопировать html-код плеера (Embed Code).
Этот код доступен после нажатия на кнопку Share, на самом плеере. Embed-код нужно скопировать в простой редактор блога (или html редактор/исходный код). Если вставить этот код в визуальный редактор – тогда плеер не появится.
Исходный код плеера выглядит так:
<object height="81" width="100%"> <param name="movie" value="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F5736316"></param> <param name="allowscriptaccess" value="always"></param> <embed allowscriptaccess="always" height="81" src="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F5736316" type="application/x-shockwave-flash" width="100%"></embed> </object>
После вставки в блог, плеер выглядит так:
Чтобы плеер имел компактный вид, необходимо скопировать часть исходного кода из основного плеера, а точнее ссылку на композицию, эта ссылка начинается со слов http:… и заканчивается номером композиции.
Замечу, что ссылка имеет кодированные url коды (например, %3A), декодировать их не нужно, просто скопировать как есть.
В данном случае эта ссылка выглядит так:
<object height="81" width="100%"> <param name="movie" value="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F5736316"></param> <param name="allowscriptaccess" value="always"></param> <embed allowscriptaccess="always" height="81" src="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F5736316" type="application/x-shockwave-flash" width="100%"></embed> </object>
Красным цветом выделена ссылка на музыку из кода основного флеш-плеера, эту ссылку необходимо вставить в исходный код компактного плеера в двух местах:
<object height="18" width="100%">
<param name="movie" value="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F5736316&auto_play=false&player_type=tiny&font=Arial&color=336600&show_user=false&show_playcount=false">
<param name="allowscriptaccess" value="always">
<param name="wmode" value="transparent">
<embed wmode="transparent" allowscriptaccess="always" height="18" src="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F5736316&auto_play=false&player_type=tiny&font=Arial&color=666600&show_user=false&show_playcount=false" type="application/x-shockwave-flash" width="100%">
</object>
<param name="movie" value="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F5736316&auto_play=false&player_type=tiny&font=Arial&color=336600&show_user=false&show_playcount=false">
<param name="allowscriptaccess" value="always">
<param name="wmode" value="transparent">
<embed wmode="transparent" allowscriptaccess="always" height="18" src="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F5736316&auto_play=false&player_type=tiny&font=Arial&color=666600&show_user=false&show_playcount=false" type="application/x-shockwave-flash" width="100%">
</object>
После этого этот код можно добавить в блог (исходным html-кодом) и появится компактный плеер от Soundcloud.
Т.е. нужно скопировать ссылку на музыку из одного плеера в другой. Возможно, это уже было известно, но об этом способе я узнал самостоятельно, поэтому и написал.
Ты меня пугаешь :)А говоришь, что ничем не занимаешься
Огромное СПАСИБО мужик))
а можно ли сделать фон белым а не чёрным?
Димон, изменить цвета плеера можно изменяя значения color. в двух местах кода
скажите, пожалуйста, есть ли похожий плеер с weyvform?