1

Тема: Написал jQuery Plugin для Icecast

Забрать можно тут https://github.com/MechanisM/jquery-icecast

2

Re: Написал jQuery Plugin для 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>

http://radioheart.ru/banners/radioheart_400x40_banner.jpg
RadioHeart.ru: Функциональный радио хостинг с автодиджеем и нонстопом, а так же быстрый виртуальный хостинг. Возможность создать радио за 5 минут, подключить автодиджей и нонстоп.
Отзывы о хостинге

3

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

пишет Falcon:

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

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

4

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

пишет devilben:

пишет Falcon:

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

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

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

http://radioheart.ru/banners/radioheart_400x40_banner.jpg
RadioHeart.ru: Функциональный радио хостинг с автодиджеем и нонстопом, а так же быстрый виртуальный хостинг. Возможность создать радио за 5 минут, подключить автодиджей и нонстоп.
Отзывы о хостинге

5

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

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

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

6

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

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

7

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

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

Сначала нужно генерировать валидный 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 09:02:59)

8

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

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

Отредактировано Roma90 (25-10-2012 15:46:01)

9

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

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

10

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

пишет tarasian666:

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

Если поток один, то всё корректно отображается, ифна нормально считывается с json.xsl, но стоит добавить в сэме ещё один поток, то скрипт перестает работать, и информация о треке уже не показывается на странице, думаю, потому что скрипт написан под один поток, т.к.

 var mountpoint = "/live"; //маунт с которого берем инфу в массиве

в коде следует указать только один поток.
решил эту проблему с "падением" скрипта, если потоков сэма больше чем один, но..

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

Отредактировано Roma90 (25-10-2012 21:41:16)

11

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

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

http://uafm.org - UKRAINIAN INTERNET RADIO STATION

12

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

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

13

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

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

http://uafm.org - UKRAINIAN INTERNET RADIO STATION

14

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

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

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

}

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

15

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

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

http://uafm.org - UKRAINIAN INTERNET RADIO STATION

16

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

 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)

17

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

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

18

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

пишет 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)

19

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

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


например http://listen.rcast.pro:8000/ - не работает в этот момент

Отредактировано tarasian666 (12-11-2012 19:49:52)

20

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

пишет tarasian666:

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


например http://listen.rcast.pro:8000/ - не работает в этот момент

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

21

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

Нет, не помогает. Смотри что я сделал, скачал скрипт из первого сообщения, залил на сервер в главную папку icecast. Из последнего сообщения (твоего) взял скрипт вставил в секцию head и изменил данные потока, так как у меня пока что один получилось так:

var mountpoint = "/pop"; 
 var mountpoint2 = "/pop";//нонстоп

и изменил ссылку до json, получилось так:

var url = "http://live.icefm.ru:9000/json.xsl?"; //наш url к json в папке Web

Вставил дивы на сайт.

22

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

http://live.icefm.ru:9000/json.xsl? это обычный json а нужен jsonp
смотреть с начала темы

23

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

Вроде выводит, но мало что-то, и цифры какие-то бегут, посмотри на сайте http://icefm.ru справа в конце треков

24

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

и цифры какие-то бегут

counter=counter+1; // счетчик для наглядности частоты обновления

http://icefm.ru 502 Bad Gateway

25

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

Исправил