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

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

 

156
Eugene @MechanisM
Забрать можно тут **********

888
Falcon @Falcon
Что-то не работает. 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
Falcon пишет:

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

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

888
Falcon @Falcon
devilben пишет:

Falcon пишет:

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

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

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

223
Игорь @devilben
200 OK 123ms
data is null
$.getJSON('http://'+options.server+'/j...$.each(data.mounts,function(i,mount){

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

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

223
Игорь @devilben
Ну что, сделал, везде работает ?)

Сначала нужно генерировать валидный 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
10
Roma90 @Roma90
При подключении второго или третьего потока (sambroadcaster) скрипт падает, допишите плз, я не силен в этом, оч надо! спасибо
параметр total не работает :(

Отредактировано Roma90 - 25.10.2012
6245
Тарас @tarasian666
что значит "скрипт падает" ?

10
Roma90 @Roma90
tarasian666 пишет:

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

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

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

Отредактировано Roma90 - 25.10.2012
129
UAFM @UAFM
Как сделать на два маунта? Тоесть если live отключен то парсить с нонстоп.

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

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

6245
Тарас @tarasian666
как то на подобии такого

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

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

<!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
10
Артем @TemKa
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
работает, проверял у себя и UAFM тоже говорил что работает
так что проблема не в скрипте


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

Отредактировано tarasian666 - 12.11.2012
10
Артем @TemKa
tarasian666 пишет:

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


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


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