радио на сайт html код

Содержание
Читайте также:  коды тн вэд озон

Как установить радио на сайт

html radio

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

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

Таких сервисов огромное количество, Вы можете выбрать любой из них. Вот этот сервис мне попался самым первым: http://radiopotok.ru/radio_on_site/. Здесь в списке надо выбрать требуемые радиостанции, далее нажать на «Получить код«.

После этого Вы получите примерно следующее:

Данный код Вы просто размещаете у себя на сайте, после чего пользователи смогут слушать выбранные Вами изначально радиостанции.

Вот так легко и быстро можно установить радио у себя на сайте.

date article

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Комментарии ( 2 ):

Это хороший сайт, особенно для тех кто еще не может самостоятельно создать радио. А возможно ли сделать так, чтоб при переходе с одной страницы на другую радио не выключалось?

Читайте также:  обмен бонусами м видео

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.

Источник

Радио-плеер с помощью HTML5

Базовый синтаксис тега audio

native player

src содержит путь к аудио-файлу, который требуется воспроизвести. Атрибут src также может быть заменен одним или несколькими тегами внутри элемента audio :

autoplay — атрибут, позволяющий воспроизводить аудио автоматически, сразу после загрузки страницы.

Примечание: имейте в виду, что автозапуск раздражает многих пользователей. Если же вы используете функцию автозапуска, то предоставьте пользователю возможность приостановить воспроизведение.

loop — атрибут, позволяющий проигрывать файл несколько раз после окончания его воспроизведения.

JavaScript API для тега audio

Мы также можем изменить атрибут src :

Обращаясь к методам audio.play() и audio.pause() можно начать или приостановить воспроизведение файла. Параметр audio.volume задает громкость, а обработчик события timeupdate запускается каждый раз, когда обновляется время воспроизведения. Этих простых методов нам будет достаточно для создания радио-плеера.

Скрипт, приведенный выше, применяется к такому HTML-коду:

Если вы хотите узнать больше о Audio API, я предлагаю познакомиться вам со статьей Саймона Питерса «everything you need to know about HTML5 video and audio».

Поддержка кодеков в браузерах

Судьба элемента очень похожа на в HTML5. Было много дебатов и разногласий по поводу того, какой видео-формат использовать (более подробно об этом с статье Введение в HTML5 видео), — и по аудио-формату были такие же горячие дискуссии. В настоящее время поддержка кодеков в популярных браузерах выглядит следующим образом:

Браузер Ogg Mp3 Wave
Opera 10.50 x x
Firefox 3.5 x x
Safari 4 x x
Chrome 3 x x
IE 8

Потоковое воспроизведение с помощью элемента

Создание HTML5-плеера

Мы будем использовать аудио-поток, предоставляемый норвежским радио NRK. NRK предоставляет каждый радио канал в двух форматах: Ogg и MP3, так что у нас есть два источника для потокового аудио.

Данные для создания плеера

Для начала нам нужно создать набор данных JSON, содержащий информацию об аудио-потоках. Мы включаем общую информацию о радиостанции и каждом радиоканале — URL-адреса потоков, имена каналов и URL, указывающий на логотип каждого канала:

Настройка структуры и дизайна плеера

Нашим следующим шагом будет создание структуры HTML для плеера и его элементов управления:

Каждая кнопка оформлена с помощью CSS:

Благодаря возможности установки нескольких классов у одного элемента в HTML мы можем создать стили оформления плеера (скины) и переключать их, всего лишь изменяя один из классов:

Заставим плеер работать

Наш последний шаг по использованию плагина jPlayer — создание необходимой функциональности. Для начала нужно подключить в HTML скрипты библиотеки jQuery и плагина jPlayer, а также собственный файл с кодом по настройке плеера (player.js), добавив следующий код:

Для начала создадим переменную с объектом jQuery, в который будет сгенерирован элемент :

Далее мы получаем данные о необходимом аудио-потоке в формате JSON с помощью AJAX:

Когда AJAX-запрос вернет данные с сервера, необходимо обойти все полученные каналы в цикле и добавить их в список выбора каналов плеера. Список выбора каналов — в нашем случае это просто список изображений с логотипом каждого канала и обработчиком события onclick на каждом изображении для изменения аудио-потока в плеере, позволяющий пользователю выбрать любой из доступных каналов.

channel picker

Функция, прикрепленная в качестве события onclick к каждому изображению в списке выбора каналов, содержит вызов метода очистки текущего воспроизводимого файла и метода выбора нового потока в элемент :

В функции ready мы настраиваем радио-канал по умолчанию.

Наконец, мы указываем плагину jPlayer на идентификаторы различных кнопок управления и настраиваем обработчик события при проигрывании аудио, для того чтобы изменять время воспроизведения на панели нашего плеера.

Источник

MnogoBlog

как создать сайт на wordpress, настроить и оптимизировать wordpress

cropped headerimger01

Обзор онлайн радио для вставки на сайт

Здесь расскажу про вставку радио на вашем сайте, при этом внимание будет уделяться тем радио плеерам, в которых есть плейлист, то есть возможность выбора (достаточно большого количества) радио станций.
Скачать исходники для статьи можно ниже
Фреш казино зеркало

1. http://lovi.fm/embed/

Начну с данного ресурса.

У данного сайта есть следующие цветовые схемы для плеера:

Также можно отрегулировать высоту и ширину плеера.

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

Чтобы выбрать достаточно поставить галочку напротив нужной радио станции.

– Автоплей (автоматическое воспроизведение при первом входе)

Вот так простенько и со вкусом будет выглядеть сам плеер:

Как же установить радио плеер на сайт wordpress?

После выбора всех настроек, появится окошко с кодом для плеера.

Легче всего будет вставить его в виджет на вашем сайте – для этого открываем панель управления сайтом, далее в левом меню выбираем пункт “Внешний вид” и подпункт “Виджеты”. Среди списка доступных виджетов найдите с названием “Текст”, который позволяет вставить Произвольный текст или HTML-код, переносим его в нужный сайдбар (список сайдбаров находится справа), пишем заголовок (если нужно) и вставляем код плеера, нажимаем на кнопку “Сохранить”.

Все теперь обновляем страничку сайта и плеер работает.

2. http://online.fm/ru/page/installplayer

Плюс данного ресурса в том, что плеер открывается в новом окне, а на сайте присутствует только кнопочка для него.

Здесь настроек поменьше чем в предыдущем варианте, всего то выбрать размер кнопки и радиостанцию, которая будет работать при открытии плеера:

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

3. http://radiopotok.ru/radio_on_site

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

После выбора доступно три варианта плеера – скудновато, учитывая, что другие настраиваемые параметры отсутствуют:

Зато просто и быстро.

4. http://naradio.net/index/0-11

Здесь предлагается вот такой радио плеер на ваш сайт:

Настроек нет, радиостанций меньше, чем на предыдущих ресурсах, но сделан плеер симпатично и компактно.

5. http://radio-online.com.ua/radio_na_site.php

Здесь есть достаточно большой выбор радиостанций, возможность выбрать их, поставив галочки напротив нужной, также есть выбор цвета фона и текста в плеере, размера плеера, размера шрифта в плеере, количества изображений в строке.

Вот так приблизительно будет выглядеть плеер:

Хотелось бы рассказать в данной статье еще об бесплатных flash плеерах для проигрывания радиостанций.

Самый простой в установке и достаточно симпатичный можно найти по следующей ссылке:

http://myradio24.com/index.php?to=set

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

У него есть и другие цветовые схемы.

Давайте подробнее остановимся на данном плеере.

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

Здесь строчка с кодом, задает радиостанцию, которая будет проигрываться:

Как же ее поменять?
Достаточно зайти на главную страничку http://myradio24.com/, где представлены на момент публикации данной статьи 238 радио каналов в виде таблицы.

Так вот для того, чтобы например поменять радио на “СПОКОЙНОЕ РАДИО”, которое находится на первой позиции в таблице, достаточно изменить радиопоток и сервер.
У радио “СПОКОЙНОЕ РАДИО” радиопоток 8092 и сервер listen2, а установленного по умолчанию в плеере, код которого мы скачали радиопоток 8000 и сервер listen2, вот и поменяем их, тогда строчка будет у нас выглядеть следующим образом:

Радио поменялось, однако названия в плеере выводятся со старого радиопотока, чтобы это поменять нужно изменить еще одну строчку:

Здесь достаточно поменять радиопоток, то есть для нашего примера изменить 8000 на 8092:

Но для смены радиопотока есть более простой способ – достаточно выбрать нужное радио в таблице и нажать в столбике “Слушать” на третью кнопочку .
После нажатия плеер с радио откроется в новом окошке, а теперь достаточно посмотреть на исходный код данного окна – для этого нажмите комбинацию клавишь CTRL+U, вот он для радио “СПОКОЙНОЕ РАДИО”:

Просто ищем в нем строчки:

И заменяем их в коде плеер, который мы скачали по умолчанию.
После этого радио меняется.

Все настройки для плеера можно поменять также в коде, например – автоплей (автоматическое проигрывания радио при загрузке страницы), за него отвечает следующая строчка:

Чтобы убрать автоплей нужно поменять yes на no.

Аналогичные операции нужно производить и с плеерами, указанными ниже, то есть для смены радио можно пользоваться сайтом http://myradio24.com заменяя старый радиопоток на новый, в большинстве из них есть плейлисты (тестовые файлы), в которых и нужно прописывать путь к радиопотоку.
Например для радио “СПОКОЙНОЕ РАДИО” путь в плейлисте будет выглядеть так:

Но в большинстве случаев для установки красивого flash плеера на свой сайт вам придется его скачать и установить на свой сайт.

Ниже приведу ссылки на бесплатные плеера со скачиванием.

Источник

Скрипт онлайн радио (простой javascript)

Привет всем smile3

Хочу поделится простым яваскриптом который вставит качественное интернет-радио на ваш сайт.

требования на стороне клиента: яваскрипт, флеш, и поддержка фреймов

Качественное интернет радио может разнообразить ваш сайт и заставит посетителей ещё больше задержатся на нем, есть множество жанров, можете сами послушать: онлайн радио

Пользуйтесь на здоровье beach

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Онлайн радио на сайт
Помогите, вот на сайтах (ucoz) видел скрипты онлайн радио, там заходишь на страницу, и жмешь кнопку.

tickОнлайн\оффлайн простой скрипт
Есть бд с юзарами, которые при переходе на любую страницу обновляет значение lastvisit(timestamp).

Онлайн-радио
Всем привет. Кто-то может дать исходники рабочего приложения, которое воспроизводит онлайн.

Онлайн Радио!
Доброго времени суток товарищи! Возникла большая необходимость, в реализации онлайн радио с.

. вот еще вариант простого скрипта онлайн-радио, вставьте cразу между тегами в html-страничке:

и наслаждайтесь smile3.

Источник

Создание онлайн-радио с помощью jQuery и jPlayer

Кому не нравится музыка? Сегодня я с радостью покажу вам, как с помощью jQuery и плагина jPlayer создать онлайн радио на JavaScript, PHP и MySQL.

Создание базы данных

Сперва создайте новую базу данных SQL. Давайте назовем её radio. Как только мы с этим покончим, создадим таблицу. Нам нужно всего 4 поля: идентификатор записи, путь к файлу mp3, имя исполнителя и название песни. Вот код SQL для создания таблицы с названием songs:

Теперь у нас есть база данных и таблица, где мы будем хранить основную информацию о композициях, которые будут проигрываться на нашем радио. Давайте заполним таблицу данными. Выберите какие-нибудь файлы mp3 и запустите следующий код:

Вот теперь база данных готова.

HTML код

Конечно же нам нужно создать страницу HTML. Сперва скачайте плагин jPlayer, который мы будем использовать для создания нашего онлайн радио. Распакуйте файлы, а затем загрузите на сервер js/ и skin/.

Этот код взят из исходников jPlayer. Это простой код, который подгружает необходимые файлы JavaScript (jQuery + jPlayer), а также CSS и HTML файлы, необходимые для визуального отображения радио. На данном этапе радио будет отображаться неправильно. Нам необходимо добавить немного анимации с помощью jQuery. Этим займемся через минутку.

Извлекаем файлы из базы данных

Теперь создадим PHP файл, который будет случайным образом доставать песню из базы данных и отображать путь к ней, название и имя исполнителя, чтобы затем с помощью Ajax мы смогли достать её саму. Сперва скачайте ezSQL, которым я пользуюсь для написания запросов. (Урок по использованию данного класса можно найти здесь) Распакуйте файлы и загрузите на сервер ez_sql_core.php и ez_sql_mysql.php.

После этого создайте файл getsong.php. Вставьте в него следующий код:

Ничего сложного: я подключил необходимые файлы ezSQL, подсоединился к базе данных и достал одну строку из таблицы songs. На экране отобразилось три значения (путь к файлу, название песни и имя её исполнителя), разделенных вертикальной чертой (|).

Я вставил условие для того, чтобы предотвратить Ajax запросы, т.е. чтобы пользователи не смогли отобразить путь к файлам, введя в адресную строку http://www.yousite.com/getsong.php.

Самое главное

Итак, мы почти у цели. Теперь нам осталось написать немного кода на jQuery, чтобы доставать песни с помощью Ajax и нашего файла getsong.php. Затем всё это запоёт!

Откройте файл demo.html и вставьте следующий код после строчки №10:

Теперь, если вы сохраните данный файл и загрузите в браузере страницу http://www.yoursite.com/demo.html, радио будет работать. Оно берет песню из базы данных и проигрывает её. Когда одна песня заканчивается, автоматически выберется и включится следующая.

Возможно написать лучше данный код (многие фрагмены повторяются, что не желательно), так что не стесняйтесь писать комментарии с идеями по его оптимизации.

Как улучшить скрипт?

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.catswhocode.com/blog/how-to-create-an-online-radio-using-jquery-and-jplayer
Перевел: Станислав Протасевич
Урок создан: 27 Июня 2011
Просмотров: 41127
Правила перепечатки

5 последних уроков рубрики «jQuery»

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

thumbnail

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

thumbnail

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

thumbnail

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

thumbnail

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

Источник

Поделиться с друзьями
admin
Здоровый образ жизни: советы и рекомендации
Adblock
detector