Как сделать HTML-5 плеер для радио

Опубликовано: 13.07.2014

Давно не писал, исправляюсь. Решил я сделать аудиоплеер для онлайн-радио с собственным оформлением. В поисках информации о том, как это сделать с наименьшим геморроем наткнулся на библиотеку jQuery jPlayer. Она сильно облегчает жизнь. Вот так выглядит страница прослушивания, скоро она заменит старую на радио ЮмоRock:

Кастомный плеер для онлайн-радио
Скачиваем jQuery и jPlayer с сайта и приступаем.

Да, кстати, кавычки тут преобразуются, их нужно будет заменить на нормальные. Подключаем

<script src=”js/jquery.js”></script><script src=”js/jquery.jplayer.min.js”></script>

Там еще в папке JS файл SWF нужно оставить, остальное можно удалить.
Добавляем HTML (для плеера файлов надо больше дивов, но так как нам нужен плеер для потока, я их выпилил, если что в документации все написано)

<div id=”jquery_jplayer_1″ class=”jp-jplayer”></div>
<div id=”jp_container_1″ class=”jp-audio”>
<div class=”jp-type-single”>
<div class=”jp-gui jp-interface”>
<ul class=”jp-controls”>
<li><a class=”jp-play” tabindex=”1″>play</a></li>
<li><a class=”jp-pause” tabindex=”1″>pause</a></li>
</ul>
<div class=”jp-volume-bar”></div>
<div class=”jp-no-solution”>Требуется обновление
Обновите либо браузер либо флеш на <a href=”http://get.adobe.com/flashplayer/” target=”_blank”>официальном сайте</a>.</div>
</div>
</div>
</div>

Инициализируем плеер.

<script>// <![CDATA[
$(document).ready(function(){       $(“#jquery_jplayer_1″).jPlayer({         ready: function () {           $(this).jPlayer(“setMedia”, {             mp3: “http://youmorock.ru:8000/play”,           }).jPlayer(“play”);         },         swfPath: “/js”,         supplied: “mp3″       });     });
// ]]></script>

Собственно, все. нажимаешь play – начинает играть, на pause – прекращает. Особое внимание нужно уделить диву с классом jp-volume-bar – это будет регулятор громкости. При клике на него див с классом jp-volume-bar-value будет менять ширину. Ширина этого дива пропорциональна громкости.

Оформляйте с помощью CSS в соответствиями со своими целями, вкусами и т.п. А вот как получать названия песен из Icecast как-нибудь расскажу потом.

Радио переехало на новый сервер, плейлисты приходится составлять вручную. С прямыми эфирами почти все решили.

Acer Aspire One D250 благополучно сдох, купил вместо него новый, полноценный ноут (ибо нужны вычислительные ресурсы). Может про него тоже рассказать поподробнее?

Работаю там же, мучаю Ruby On Rails в последнее время.

Радио работает, люди слушают, но оно себя не окупает. Движухи в группе все меньше, мне лень что-то делать. Да еще и серьезный конкурент объявился – Семен Чайка со Своим радио. Может тоже краудфайндинг замутить?

Комментариев — 42 »

  1. Ника 16.07.2014 в 10:44

    начинания у Вас были очень хорошие, а что сейчас с Вами? думала, что Вы будете очень хорошо развиваться, идеи хорошие были

  2. Юлия 16.07.2014 в 13:47

    Желаю успехов в начинаниях.

  3. Игорь Кабакин 23.07.2014 в 3:25

    Интересная метода))
    Надо будет попробовать, сам как-то о таком думал, но так и не занялся вопросом.

  4. Онлайн новости 23.07.2014 в 20:14

    В интернете существует великое множество различных скриптов на любой вкус, на своих сайтах я уже давненько использую библиотеку jQuery, правда в несколько иных целях, однако этот код, представленный на этой странице, тоже имеет право на жизнь.

  5. Сергей 25.07.2014 в 16:42

    Да, бывает и со мной такое, вроде загорюсь каким-то проектом, потом проходит время, результата особого нет, и забрасывается(((

  6. Ходячий Внедорожник 31.07.2014 в 21:52

    Ну что ж очень даже не плохо. А конкуренция всегда полезна, ведь она рождает прогресс

  7. Виктор 3.08.2014 в 10:20

    Как же долго я не могла найти помощь, для установления радио. Большое спасибо. Вы мне действительно очень помогли!!!!!

  8. Лара 6.08.2014 в 12:37

    идея хорошая но к чему эти сложности в сети подобных вещей куча, не тратьте свое время, мой вам совет!

  9. Remo 15.08.2014 в 14:44

    Спасибо автору, внедрил такой плеер к себе на сайт, теперь народ весит часами. Увеличилось время нахождения на сайте, думаю должно повлиять на ТРАСТ. Еще раз спасибо!

  10. Amanzhol 19.08.2014 в 11:39

    А можно сделать плеер для видео можете описать следующей статье

  11. Блог тут 20.08.2014 в 8:10

    Спасибо, помогло

  12. Медведь 22.08.2014 в 20:26

    Надо эту статью для радио 101 показать, чтобы плеер свой глючный переделали. А то постоянно вырубается этот флеш противный.

  13. Spike 23.08.2014 в 6:59

    Скрипт конечно интересный,но радио уже не в моде.Сейчас нужную композицию проще найти в поисковике и скачать или прослушать.

  14. Юрий 24.08.2014 в 17:07

    Мне кажется, что создать интернет радио легко, но довольно сложно его будет в дальнейшем раскрутить для получения прибыли, следствии огромного количества конкурентов. Разве, что подобрать тот жанр, которого мало где.

  15. Как это сделано 24.08.2014 в 20:04

    Спасибо, возможно пригодится!

  16. Александр 25.08.2014 в 10:55

    Интересная вещь. :) Хотя прослушивание радио в Интернете, по моему мнению, удовольствие сомнительное. Если среди 30-40 вкладок, в среднем открытых у среднестатистического Интернет-юзера будет хотя бы 3-4 с радио, то вряд ли он будет очень рад)
    Ну а метод интересный. Правда, немногие поймут, как это дело встроить в движки конкретных CMS.

  17. санек 31.08.2014 в 18:16

    Забавно сколько раз пробивал почемуто на получалось а тут раз и готово. :-D

  18. Антон 2.09.2014 в 23:46

    Хороший скрипт, можно на одном из своих сайтах поэкспериментировать, но радио сейчас как-то мало народу слушает.

  19. Миша 6.09.2014 в 7:44

    Я постоянно слушаю радио когда сижу за ноутом Александр 8)

  20. Андрей 7.09.2014 в 20:31

    Спасибо за подсказку, нужно будет попробовать, а то автоматические плагины как-то не очень хорошо у меня работают.

  21. Alexey 9.09.2014 в 15:01

    Да интересно.
    Хотя не думаю что всем подойдёт.
    А по поводу идей то самое лучшее это провести небольшой опрос среди читателей, что кому интересно или хотели-бы видеть на блоге. Это может стать хорошим начинанием в создании чего новенького, чтобы не пришлось искать у кого-то идей.
    Гораздо приятнее когда ты сам являешься создателем чего-то новенького а у тебя затем кто-то это копирует для себя. Само осознание того, что это ты создал сам даёт тебе какое-то спокойствие и уверенность что не всё пропало.

  22. ааааффф 13.09.2014 в 11:29

    Попробую замутить, надеюсь, получится.
    Сильно ли это только нужно – иметь другой стиль

  23. Геннадий 17.09.2014 в 15:10

    А где на сайте лучше всего ставить плейер. В каком месте, в смысле?

  24. Владислав 20.09.2014 в 15:34

    Кто вообще слушает онлайн радио? У меня все знакомые слушают музыку через ВК, ну или скачивают себе.

  25. Марадона 22.09.2014 в 19:16

    Ну почему не слушают, лично я слушаю зайцевфм и мне больше ради нравится))

  26. иван 23.09.2014 в 21:42

    Подробно,спасибо за статью

  27. psevdonim 24.09.2014 в 9:33

    Вот сколько не видел радио и прочих плееров на сайтах, ими ни кто не пользуется. Себе частенько ставил на разные портал, статистику по тепловой карте вебвизора отслеживал.

    Вообще ни кому нафиг он не интересен. Может 1 из 500 уников кликнет разочек. Не чаще.

  28. Граф Орлов 2.10.2014 в 17:07

    Спасибо автору за интересную статью. Хотя сам я радио а тем более онлайн не слушаю но часто замечал что пользователи это делают.

  29. uliass200 3.10.2014 в 19:08

    Полностью согласна! Онлайн радио, тихо, тихо уходит в прошлое. Гораздо проще слушать ту музыку которую хочешь, чем зависить от выбора радио диджея!

  30. mandarin 7.10.2014 в 9:06

    Хорошая статейка =)

  31. Sever 13.10.2014 в 18:18

    Гы, отличная система, себе на блог что ли ее встроить) Большое спасибо за решение)

  32. Женский журнал 19.10.2014 в 10:19

    Решение отличное беру себе на заметку ! Спасибо вам за ваши статьи .

  33. Валериан 20.10.2014 в 15:28

    классная инфа) вроде все понятно, жал что с CSS пока еще не дружу тесно, а по HTMLу все технично выполненно

  34. Aleksey 3.11.2014 в 22:49

    прикольно, попробую себе такой поставить

  35. Блоггер-инвестор 12.11.2014 в 15:23

    Прикольно, не на каждый блог правда подойдет, но прикольно. Хотя по собственному опыту скажу и соглашусь с комментом от “uliass200″ выше – вряд ли кто-то сейчас радио онлайн слушает. Есть же вконтакте, где у каждого свой плейлист, опять же можно рекомендуемые композиции послушать. А вот раньше помню мечтал о покупке FM-тюнера, чтобы радио можно было на компьютере слушать, да еще и записывать. Это в эпоху когда еще флоппи дисководы у всех были считалось крутым девайсом. 8)

  36. EvilScorpion 16.11.2014 в 15:42

    Подскажите как сделать ретрансляцию радио на свой сайт?

  37. [m.k] 17.11.2014 в 14:19

    EvilScorpion, http://www.muses.org/setup

  38. eugen 24.11.2014 в 20:16

    Спасибо.. Как раз искал нечто подобное.

  39. Сергей 25.11.2014 в 23:04

    Ого. Никогда не занимался подобным. Может сейчас получиться. Можно позадродствовать. =)

  40. Павел 3.03.2015 в 14:03

    Прикольная вещь. Спасибо автору что поделился. Попробую поставить на свой сайт. ;)

  41. Боря 6.03.2015 в 10:56

    По мне, так html5 все еще сырой и все плееры, что видел выжирают процессор. С тем же кривым устаревшим флешем проблем в разы меньше.

  42. uglion 17.07.2015 в 12:45

    Всë здорово, но хотелось бы названия песен как-то выковыривать из потока.

Оставьте комментарий к посту ”Как сделать HTML-5 плеер для радио”

Разрешено использовать тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Ключевые слова:
AdSense google page rank Sape SEO WordPress Блог Сапа Софт Яндекс акция ап апдейт бесплатно дизайн домен запросы индекс цитирования интернет интернет-магазин комментарии компьютер конкурс продвижение реклама сайт спам ссылки тИЦ эстафета