Тема: Написал jQuery Plugin для Icecast
Забрать можно тут https://github.com/MechanisM/jquery-icecast
Первый русскоязычный форум посвященный интернет-радиовещанию
Форум интернет радио Icecast и Shoutcast → Технологии вещания, софт, скрипты → Написал jQuery Plugin для Icecast
Чтобы отправить ответ, вы должны войти или зарегистрироваться
Забрать можно тут https://github.com/MechanisM/jquery-icecast
Что-то не работает. json xsl прижился хорошо, все показывает. а вот exapmle.html не выводит ничего. В качестве сервера вписал айпи и порт
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><title>Icecast - json demo</title>
<script src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script src='jquery-icecast.js'></script>
<script>
$(function(){$('.mounts').icecast({server:"46.4.209.149:8004"});});
</script>
</head>
<body>
<ul class="mounts"></ul>
</body>
</html>
пишет Falcon:
а вот exapmle.html не выводит ничего
А jquery-icecast.js вызывается ? Его нужно было в папку exapmle перекинуть, либо exapmle.html в корень
пишет devilben:
пишет Falcon:
а вот exapmle.html не выводит ничего
А jquery-icecast.js вызывается ? Его нужно было в папку exapmle перекинуть, либо exapmle.html в корень
Конечно вызывается
200 OK 123ms
data is null
$.getJSON('http://'+options.server+'/j...$.each(data.mounts,function(i,mount){
Ждем комментарии автора )
у него скрипт лежал в самой папке icecast/web поэтому работал, завтра сделает, обещался что бы везде работало.
Ну что, сделал, везде работает ?)
Сначала нужно генерировать валидный JSON что бы с него что то получать:
<xsl:stylesheet xmlns:xsl = "http://www.w3.org/1999/XSL/Transform" version = "1.0" >
<xsl:output method="text" media-type="text/plain" indent="yes" encoding="UTF-8" />
<xsl:template match = "/icestats" >
<!-- <xsl:param name="callback" /> -->
<!-- <xsl:value-of select="$callback" /> -->
parseMusic (
{
<xsl:for-each select="source">
"<xsl:value-of select="@mount" />" :
{
"listeners" : "<xsl:value-of select="listeners" />",
"description" : "<xsl:value-of select="description" />",
"artist" : "<xsl:value-of select="artist" />",
"title" : "<xsl:value-of select="title" />",
"genre" : "<xsl:value-of select="genre" />",
"url" : "<xsl:value-of select="server_url" />",
</xsl:for-each>
"total" : "<xsl:value-of select="listeners" /><xsl:for-each select="source"><xsl:if test="position() != last()"></xsl:if></xsl:for-each>"
},
}
);
</xsl:template>
</xsl:stylesheet>
Далее привожу пример как получить, распарсить ответ и загрузить в нужные id с авто обновлением:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<title>Icecast2 Satat</title>
<script src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script>
// немного кастомизации
var mountpoint = "/live"; //маунт с которого берем инфу в массиве
var counter=0;
var url = "http://radio.example.com:8000/json.xsl?"; //наш url к json в папке Web
url+= "mount=" + mountpoint + "&callback=";
function parseMusic(results)
{
// #id >> data
var nm = results[mountpoint];
$('#artist').text(nm["artist"]);
$('#title').text(nm["title"]);
$('#total').text(nm["total"]);
$('#genre').text(nm["genre"]);
}
var span;
var script;
$.ajaxSetup({ scriptCharset: "utf-8" , contentType: "application/json; charset=utf-8"});
function initMusic()
{
span = document.createElement("span");
span.id="getscript";
document.body.appendChild(span);
script = document.createElement("script");
script.type="text/javascript";
script.charset="UTF-8";
}
function addMusic()
{
$('#getscript').empty();
script.src = url + counter;
$('#getscript').append(script);
}
function updateMusic()
{
counter=counter+1; // счетчик для наглядности частоты обновления
addMusic();
$('#counter').text(counter);
}
$(document).ready(
function () {
initMusic();
addMusic();
setInterval('updateMusic()', 3000 ); // интервал обновления, сейчас 3 сек.
});
</script>
</head>
<!-- Выводим полученные данные на страницу -->
<body>
<span id="artist"></span> - <span id="title"></span>
(<span id="total"></span> listeners)
<span id="counter"></span>
</body>
</html>
Для использования на продакшине лучше отключить access.log у icecast2. Ну и вынести js в отдельный фаил чтоб оно кешеровалось и т.д.
Отредактировано devilben (10-02-2012 09:02:59)
При подключении второго или третьего потока (sambroadcaster) скрипт падает, допишите плз, я не силен в этом, оч надо! спасибо
параметр total не работает
Отредактировано Roma90 (25-10-2012 15:46:01)
пишет tarasian666:
что значит "скрипт падает" ?
Если поток один, то всё корректно отображается, ифна нормально считывается с json.xsl, но стоит добавить в сэме ещё один поток, то скрипт перестает работать, и информация о треке уже не показывается на странице, думаю, потому что скрипт написан под один поток, т.к.
var mountpoint = "/live"; //маунт с которого берем инфу в массиве
в коде следует указать только один поток.
решил эту проблему с "падением" скрипта, если потоков сэма больше чем один, но..
Нужно дописать как то скрипт, чтобы он брал информацию о слушателях 'liseners' на всех существующих потоках сэма и складывал их в 'total' , судя по всему json.xsl тоже не дописан, потому что параметры 'liseners' не складываются в общий 'total' ...
Уже всю бошку сломал
Помогите дописать json.xsl
Отредактировано Roma90 (25-10-2012 21:41:16)
Как сделать на два маунта? Тоесть если live отключен то парсить с нонстоп.
Парсить первый маунт потом если "пусто" парсить второй
А как сделать проверку пустой ли маунт? И еще проблема в том что переменые mount и url сдесь глобальные. Если помещаю в функциию то все перестает работать. Обьясните пожалуйста.
как то на подобии такого
function parseMusic(results)
{
// #id >> data
var nm = results['mountpoint1'];
if(nm["title"] =='') nm = results['mountpoint2'];
$('#artist').text(nm["artist"]);
$('#title').text(nm["title"]);
$('#total').text(nm["total"]);
$('#genre').text(nm["genre"]);
}
если глобальные то перемещение их в функцию наоборот должно пройти без проблем
Это хорошо, но перед тем мы загружаем еще адрес в переменной url
var url = "http://radio.example.com:8000/json.xsl?"; //наш url к json в папке Web
url+= "mount=" + mountpoint + "&callback=";
тут у нас mountpoint а нужен еще mountpoint2
создать еще переменою
var urlSecond =http://radio.example.com:8000/json.xsl?"; //наш url к json в папке Web
urlSecond+= "mount=" + mountpoint2 + "&callback=";
И здесь выводить ??
function addMusic()
{
$('#getscript').empty();
script.src = url + counter;
$('#getscript').append(script);
}
Как то трудно получается(
Отредактировано UAFM (03-11-2012 23:21:52)
var url = "http://radio.example.com:8000/json.xsl?"; //наш url к json в папке Web
url+= "mount=" + mountpoint + "&callback=";
тут не указывать маунт, а указывать там где я написал
в таком случае сточку url+= "mount=" + mountpoint + "&callback="; удалить
это потом можно будет приветси в более красивую форму
Отредактировано tarasian666 (03-11-2012 23:45:47)
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<title>Icecast2 Satat</title>
<script src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script>
// немного кастомизации
var mountpoint = "/bodr";
var mountpoint2 = "/ametrin";//нонстоп
var nac = true;
var counter=0;
var url = "http://listen.rcast.pro:8000/json.xsl?"; //наш url к json в папке Web
var url2 = url;
url+= "mount=" + mountpoint + "&callback=";
url2+="mount=" + mountpoint2 + "&callback=";
function parseMusic(results)
{
// #id >> data
for (var n in results){
var nm = results[n];
if(nm["title"] && nac){
nac = false;
$('#artist').text(nm["artist"]);
$('#title').text(nm["title"]);
$('#total').text(nm["total"]);
$('#genre').text(nm["genre"]);
}
}
}
var span;
var script;
$.ajaxSetup({ scriptCharset: "utf-8" , contentType: "application/json; charset=utf-8"});
function initMusic()
{
span = document.createElement("span");
span.id="getscript";
document.body.appendChild(span);
script = document.createElement("script");
script.type="text/javascript";
script.charset="UTF-8";
}
function addMusic()
{
nac = true;
$('#getscript').empty();
script.src = url + counter;
$('#getscript').append(script);
script.src = url2 + counter;
$('#getscript').append(script);
}
function updateMusic()
{
counter=counter+1; // счетчик для наглядности частоты обновления
addMusic();
$('#counter').text(counter);
}
$(document).ready(
function () {
initMusic();
addMusic();
setInterval('updateMusic()', 3000 ); // интервал обновления, сейчас 3 сек.
});
</script>
</head>
<!-- Выводим полученные данные на страницу -->
<body>
<span id="artist"></span> - <span id="title"></span>
(<span id="total"></span> listeners)
<span id="counter"></span>
</body>
</html>
Отредактировано tarasian666 (04-11-2012 01:23:08)
пишет tarasian666:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8" /> <title>Icecast2 Satat</title> <script> // немного кастомизации var mountpoint = "/bodr"; var mountpoint2 = "/ametrin";//нонстоп var nac = true; var counter=0; var url = "http://listen.rcast.pro:8000/json.xsl?"; //наш url к json в папке Web var url2 = url; url+= "mount=" + mountpoint + "&callback="; url2+="mount=" + mountpoint2 + "&callback="; function parseMusic(results) { // #id >> data for (var n in results){ var nm = results[n]; if(nm["title"] && nac){ nac = false; $('#artist').text(nm["artist"]); $('#title').text(nm["title"]); $('#total').text(nm["total"]); $('#genre').text(nm["genre"]); } } } var span; var script; $.ajaxSetup({ scriptCharset: "utf-8" , contentType: "application/json; charset=utf-8"}); function initMusic() { span = document.createElement("span"); span.id="getscript"; document.body.appendChild(span); script = document.createElement("script"); script.type="text/javascript"; script.charset="UTF-8"; } function addMusic() { nac = true; $('#getscript').empty(); script.src = url + counter; $('#getscript').append(script); script.src = url2 + counter; $('#getscript').append(script); } function updateMusic() { counter=counter+1; // счетчик для наглядности частоты обновления addMusic(); $('#counter').text(counter); } $(document).ready( function () { initMusic(); addMusic(); setInterval('updateMusic()', 3000 ); // интервал обновления, сейчас 3 сек. }); </script> </head> <!-- Выводим полученные данные на страницу --> <body> <span id="artist"></span> - <span id="title"></span> (<span id="total"></span> listeners) <span id="counter"></span> </body> </html>
Не работает ваш вариант почему-то, выводит только такую надпись - ( listeners)
работает, проверял у себя и UAFM тоже говорил что работает
так что проблема не в скрипте
например http://listen.rcast.pro:8000/ - не работает в этот момент
Отредактировано tarasian666 (12-11-2012 19:49:52)
пишет tarasian666:
работает, проверял у себя и UAFM тоже говорил что работает
так что проблема не в скриптенапример http://listen.rcast.pro:8000/ - не работает в этот момент
Само собой меняю ссылку на свой поток. Закачал файлы под рутом, сейчас попробую изменить владельца на icecast
Нет, не помогает. Смотри что я сделал, скачал скрипт из первого сообщения, залил на сервер в главную папку icecast. Из последнего сообщения (твоего) взял скрипт вставил в секцию head и изменил данные потока, так как у меня пока что один получилось так:
var mountpoint = "/pop";
var mountpoint2 = "/pop";//нонстоп
и изменил ссылку до json, получилось так:
var url = "http://live.icefm.ru:9000/json.xsl?"; //наш url к json в папке Web
Вставил дивы на сайт.
http://live.icefm.ru:9000/json.xsl? это обычный json а нужен jsonp
смотреть с начала темы
Вроде выводит, но мало что-то, и цифры какие-то бегут, посмотри на сайте http://icefm.ru справа в конце треков
и цифры какие-то бегут
counter=counter+1; // счетчик для наглядности частоты обновления
http://icefm.ru 502 Bad Gateway
Исправил
Чтобы отправить ответ, вы должны войти или зарегистрироваться
Форум интернет радио Icecast и Shoutcast → Технологии вещания, софт, скрипты → Написал jQuery Plugin для Icecast