Технологии вещания, софт, скрипты
7 • Посмотреть все темы

Написал jQuery Plugin для Icecast

1 2

156

Eugene @MechanisM

20.12.2011

Забрать можно тут **********

888

Falcon @Falcon

20.12.2011

Что-то не работает. 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>

223

Игорь @devilben

20.12.2011

Falcon пишет:

а вот exapmle.html не выводит ничего

А jquery-icecast.js вызывается ? Его нужно было в папку exapmle перекинуть, либо exapmle.html в корень

888

Falcon @Falcon

20.12.2011

devilben пишет:

Falcon пишет:

а вот exapmle.html не выводит ничего

А jquery-icecast.js вызывается ? Его нужно было в папку exapmle перекинуть, либо exapmle.html в корень

Конечно вызывается

223

Игорь @devilben

20.12.2011

200 OK 123ms
 data is null
 $.getJSON('http://'+options.server+'/j...$.each(data.mounts,function(i,mount){

Ждем комментарии автора )

833

metra52 @metra52

20.12.2011

у него скрипт лежал в самой папке icecast/web поэтому работал, завтра сделает, обещался что бы везде работало.

223

Игорь @devilben

10.02.2012

Ну что, сделал, везде работает ?)

Сначала нужно генерировать валидный 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">
 &quot;<xsl:value-of select="@mount" />&quot; :
 {
 "listeners" : &quot;<xsl:value-of select="listeners" />&quot;,
 "description" : &quot;<xsl:value-of select="description" />&quot;,
 "artist" : &quot;<xsl:value-of select="artist" />&quot;,
 "title" : &quot;<xsl:value-of select="title" />&quot;,
 "genre" : &quot;<xsl:value-of select="genre" />&quot;,
 "url" : &quot;<xsl:value-of select="server_url" />&quot;,
 </xsl:for-each>
 "total" : &quot;<xsl:value-of select="listeners" /><xsl:for-each select="source"><xsl:if test="position() != last()"></xsl:if></xsl:for-each>&quot;
 },
 
 }
 );
 </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

Roma90 @Roma90

24.10.2012

При подключении второго или третьего потока (sambroadcaster) скрипт падает, допишите плз, я не силен в этом, оч надо! спасибо
параметр total не работает :(

Отредактировано Roma90 - 25.10.2012

6245

Тарас @tarasian666

24.10.2012

что значит "скрипт падает" ?

Roma90 @Roma90

25.10.2012

tarasian666 пишет:

что значит "скрипт падает" ?

Если поток один, то всё корректно отображается, ифна нормально считывается с json.xsl, но стоит добавить в сэме ещё один поток, то скрипт перестает работать, и информация о треке уже не показывается на странице, думаю, потому что скрипт написан под один поток, т.к. var mountpoint = "/live"; //маунт с которого берем инфу в массиве в коде следует указать только один поток.
решил эту проблему с "падением" скрипта, если потоков сэма больше чем один, но..

Нужно дописать как то скрипт, чтобы он брал информацию о слушателях 'liseners' на всех существующих потоках сэма и складывал их в 'total' , судя по всему json.xsl тоже не дописан, потому что параметры 'liseners' не складываются в общий 'total' ...
Уже всю бошку сломал :(
Помогите дописать json.xsl

Отредактировано Roma90 - 25.10.2012

129

UAFM @UAFM

29.10.2012

Как сделать на два маунта? Тоесть если live отключен то парсить с нонстоп.

6245

Тарас @tarasian666

29.10.2012

Парсить первый маунт потом если "пусто" парсить второй

129

UAFM @UAFM

03.11.2012

А как сделать проверку пустой ли маунт? И еще проблема в том что переменые mount и url сдесь глобальные. Если помещаю в функциию то все перестает работать. Обьясните пожалуйста.

6245

Тарас @tarasian666

03.11.2012

как то на подобии такого

 
 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"]);
 
 }

если глобальные то перемещение их в функцию наоборот должно пройти без проблем

129

UAFM @UAFM

03.11.2012

Это хорошо, но перед тем мы загружаем еще адрес в переменной 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

6245

Тарас @tarasian666

03.11.2012

 
 var url = "http://radio.example.com:8000/json.xsl?"; //наш url к json в папке Web
 url+= "mount=" + mountpoint + "&callback=";

тут не указывать маунт, а указывать там где я написал

в таком случае сточку url+= "mount=" + mountpoint + "&callback="; удалить

это потом можно будет приветси в более красивую форму

Отредактировано tarasian666 - 03.11.2012

6245

Тарас @tarasian666

04.11.2012

 
 <!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

Артем @TemKa

12.11.2012

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)

6245

Тарас @tarasian666

12.11.2012

работает, проверял у себя и UAFM тоже говорил что работает
так что проблема не в скрипте

например ********** - не работает в этот момент

Отредактировано tarasian666 - 12.11.2012

Артем @TemKa

13.11.2012

tarasian666 пишет:

работает, проверял у себя и UAFM тоже говорил что работает
так что проблема не в скрипте

например ********** - не работает в этот момент

Само собой меняю ссылку на свой поток. Закачал файлы под рутом, сейчас попробую изменить владельца на icecast