Свое радио для всех и каждого! |GrakovNe - Пробуя, создавать лучшее

hello


Времени затрачено: 0,240 сек.
SQL запросов: 24
ОЗУ использовано: 2 MB
Войти как администратор

Свое радио для всех и каждого!

Всем быстрых потоков!

Я — меломан. Ну, то есть совсем. И работать люблю с музыкой в ушах и гулять и… много чего. А еще, мне лень выбирать плейлист на день: я хожу нажать и слушать. Так что, до недавнего времени, мне идеально подходило яндекс.Радио. А теперь — не подходит, ага, качество там так себе. Зато, у меня есть мое личное малиновое облако и быстрый домашний интернет. Давайте, поднимем свой радиопоток с блекджеком и всем остальным?

Итак, у нас есть:

  • постоянно работающий, но не очень производительный сервер на Raspberry Pi 3, на котором крутится последняя версия Raspbian
  • Целая куча музыки в разных форматах, от mp3 до flac и даже ape, которая тихо и мирно лежит в свободном доступе на этом самом облачке
  • Стабильный (надеюсь) и быстрый (верю) интернет канал с настоящим IP адресом и доменом home.grakovne.org (сюрприз!), который на этот айпишник смотрит

Если немного подумать и понять, чего мы хотим и чего можем, нам обязательно придет в голову, что поднимать что-то серьезное и энтерпрайзное бессмысленно: малинки не хватит на эти фокусы. Зато — ее хватит на что-нибудь легкое, подвижное и красивое! Вперед?

Поднимаем радио-поток

На самом деле, вариантов у нас масса. От полноценного Icecast — сервера до какой-нибудь ampache, который умеет не только в радио, но и в полноценный Web-плеер. Но мы, суровые северные программисты на такие глупости не ведемся. Будем поднимать MPD. А что, штука хорошая, легкая, удобная и даже почти современная… Идем в консольку?

sudo apt-get install mpd mpc

Теперь, ждем пока оно поставится и создаем новый файл конфига

sudo nano /etc/mpd-radio.conf

И пишем туда:

#music folder
music_directory "/media/pi/mediastorage/music/"

#db_file "/var/lib/mpd/db"

#playlist directory
#playlist_directory "/media/pi/mediastorage/music/pl"

#own IP
#bind_to_address "192.168.1.15"

#own port
port "6601"

#auto updates
auto_update "yes"

audio_output {
 type "httpd"
 name "GrakovNe's Radio Service"
 encoder "lame"
 encoding "mp3"
 port "8000"
 bitrate "320"
 format "44100:16:2"
}

password "media@read,add,control,admin"

Теперь сохраняем и запускаем нашего демона

mpd /etc/mpd-radio.conf

Не ругнулось? Правильно, и не должно было. А теперь, будем понимать, что мы только что натворили и кому теперь должны кучу денег.

Если коротко — мы подняли сервер, который живет на 8000 порту и по запросу вида http://hostname:8000 начинает бросаться потоком музыки, на лету превращая любой ее формат в mp3 с битрейтом аж в 320 кбит/с. Что, надо меньше? Не хочу. Для меньше у меня яндекс.Радио есть. Или вообще пластинка с патефоном. А канал пропадает

При этом, этим самым потоком воспроизведения мы можем управлять как угодно, если постучимся по 6601 порту, из, например, GMPC, с правильным паролем. Давайте, постучимся и запустим там что-нибудь?

gmpc

Теперь — идем по адресу нашего потока и наслаждаемся:

radio-stream

Работает. Теперь этот поток можно скормить какому-нибудь плееру и наслаждаться жизнью

И это все?

Ну, если бы я все это писал года эдак три назад — было бы все. А сейчас, я не хочу никаких плееров, которым надо то-то скармливать. Я хочу вкладочку в браузере. И еще — я хочу знать, что я слушаю, а угадывать трек с пяти нот. Значит — нужен web-интерфейс. Вперед!

Разбираемся с тегами

Ну да, это важно. Если коротко — на стороне клиента нет никаких файлов и никакого демона. Там есть поток audio/mpeg о 320 кб/с битрейта. Выдрать из него ID — теги средствами JavaScript можно, но — мне лень. Гораздо проще забирать из со стороны сервера отдельным запросиком, обработку которого мы сейчас с вами напишем

<?php
header("Access-Control-Allow-Origin: *");

$artist = exec("mpc -h media@localhost -p 6601 --format \"[%artist%]\" | head -n 1");
$album = exec("mpc -h media@localhost -p 6601 --format \"[%album%]\" | head -n 1");
$title = exec("mpc -h media@localhost -p 6601 --format \"[%title%]\" | head -n 1");

$song_data = array (
'title' => $title,
'album' => $album,
'artist' => $artist
);

echo json_encode ($song_data);

?>

Оп — написали! На самом деле, никакой магии: выдернули теги из mpc, обратившись к нему пару-тройку раз, запаковали полученные данные в JSON и показали клиенту. Пробуем?

idtags

 Пишем клиента

Давайте представим, что мы — взрослые, образованные люди, которым важно писать что-то хорошее. Представили? Отлично, а теперь бросаем все это и пошли писать как умеем!

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

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

function setupPlayer() {
    soundManager.debugMode = false;
    soundManager.setup({
        onready: function () {
            createRadioStream();
            playStream();
        }
    });
}

function createRadioStream() {
    return soundManager.createSound({
        id: RADIO_STREAM,
        url: RADIO_URL
    });
}
function playStream() {
    createRadioStream();
    soundManager.play(RADIO_STREAM, {
        onstop: function () {
            getStream().destruct();
        }
    });
}
function stopStream() {
    soundManager.stop(RADIO_STREAM);
}

Так, отлично. Мы создаем (за сценой) инстанс плеера, впихиваем в него наш радиопоток и запускаем воспроизведение. Правда, когда мы прекратим воспроизведение, плеер, заточенный под локальные файлы, почему-то продолжит кеширование данных к себе в хранилище. И если клиент, в общем-то, сам виноват, то мою малинку с нежным интернет-каналом мне жалко. Поэтому, при остановке воспроизведения будем принудительно деструктить подключение, чтобы неповадно было. А при воспроизведении — создавать обратно, ага.

Играть — научились. Теперь, вспомним про наш php-скрипт и научимся еще и показывать данные:

function setSongInfo() {
    $.ajax({
        url: 'http://home.grakovne.org/radio/song-info.php',
        success: function (data) {
            var songInfo = JSON.parse(data);

            setSongData(songInfo, "title");
            setSongData(songInfo, "album");
            setSongData(songInfo, "artist");
        }
    });
}

function setSongData(tags, tag) {
    if (tags[tag] != '') {
        $("#" + tag).text(tags[tag].toUpperCase());
    } else {
        $("#" + tag).text("NO DATA");
    }
}

С магией JQuery — селекторов сами разберетесь, а в остальном — все просто: сделали запросик к нашему скрипту, получили от него данные и рассовали по вьюшкам. Ну, или рассовали туда заглушки, если тегов не нашлось, всякое бывает.

Теперь развесим наши методы по кнопочкам, возьмем в руки Bootstrap и пойдем рисовать разметку

markup

Нарисовали, задеплоились — работает!

И что у нас получилось?

Свое собственное интернет-радио, доступное из любого места и крутящее лист из, примерно 800 треков, которые я выжал из все своей необъятной коллекции музыки. А еще — чуть-чуть опыта во фронтэнд разработке и целая куча сетевого трафика для моего провайдера. Классно, правда?

Ну, раз вам так нравится, присоединяйтесь: http://radio.grakovne.org

Ах да, исходники, на тот случай, если хотите так же. Держите

Искренне Ваш, наводящий ужас на провайдеров интернета, GrakovNe


Просмотров: 1651
Теги:



Комментарии закрыты.

vodafone tl yükleme kontör yükleme hamile giyim turkcell fatura alanya escort işbankası kredi kartı borç sorgulama kredi kartı ile elektrik faturası ödeme turkcell tl yükleme tl yükleme hgs yükleme emek serverler site ekle r57 shell antalya escort yapı kredi borç sorgulama finansbank borç sorgulama akbank borç sorgulama ogs yükleme enerjisa elektrik faturası ödeme clk akdeniz elektrik faturası ödeme elektrik faturası ödeme escort antalya hgs bakiye yükleme script indir fatura ödeme vodafone fatura ödeme hgs yükleme sex sohbet antalya escort