Вывод названия трека на сайт

  • Автор темы Автор темы djsoft
  • Дата начала Дата начала
Статус
Закрыто для дальнейших ответов.
Код вписывается на страницу сайта в том месте в котором мы хотим чтобы выводилось название группы и песни.
Отображаться будет только в том случае, если в mp3 заполнены теги, если нет, то ничего не будет отображаться. В коде:
Код: 
<div id="song-title"></div>
Дивы можно заменить на span если надо как-то оформить.
Также через этот скрипт можно вывести другие параметры, например пиковое значение слушателей, или текущее количество или битрейт....
 
Dnny сказал(а):
Код вписывается на страницу сайта в том месте в котором мы хотим чтобы выводилось название группы и песни.
Отображаться будет только в том случае, если в mp3 заполнены теги, если нет, то ничего не будет отображаться. В коде:
Код: 
<div id="song-title"></div>
Дивы можно заменить на span если надо как-то оформить.
Также через этот скрипт можно вывести другие параметры, например пиковое значение слушателей, или текущее количество или битрейт....
Нажмите, чтобы раскрыть...
Что-то я не понял. Скрипт вводится через (правой кнопкой мыши по странице прослушивания) Исследовать элемент?
 
Что непонятного? HTML знаем?
Выбираем на сайте в каком месте будет выводится трек который играет, и вставляем в него код. У меня он такой:
Код: 
<span id="song-title"></span>    
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
var timeout = 5; // интервал обновления информации в секундах
function getStats(){
  $.ajax({
    url: "http://IP-ICECAST2:80/status-json.xsl",
    success: function( response ) {
        $('#song-title').text(response.icestats.source.title)
    }    
  });
}  
getStats();
setInterval(getStats, timeout * 1000);
</script>
Если внимательно посмотришь в код, то увидишь что обновляется он сам, без перезагрузки страницы.
 

Вложения

  • rad.jpg
    rad.jpg
    16,1 КБ · Просмотры: 558
Dnny сказал(а):
Что непонятного? HTML знаем?
Выбираем на сайте в каком месте будет выводится трек который играет, и вставляем в него код. У меня он такой:
Код: 
<span id="song-title"></span>    
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
var timeout = 5; // интервал обновления информации в секундах
function getStats(){
  $.ajax({
    url: "http://IP-ICECAST2:80/status-json.xsl",
    success: function( response ) {
        $('#song-title').text(response.icestats.source.title)
    }    
  });
}  
getStats();
setInterval(getStats, timeout * 1000);
</script>
Если внимательно посмотришь в код, то увидишь что обновляется он сам, без перезагрузки страницы.
Нажмите, чтобы раскрыть...
Вы имеете ввиду ваш личный сайт или публичную страницу прослушивания радио (т.е. чужой сайт)? Это принципиально разные вещи.
 
Dnny сказал(а):
да, этот код для личного сайта.
Нажмите, чтобы раскрыть...
Личного сайта у меня нет. Hо если я хочу добавить имена исполнителей на веб-плеере своего радио в Facebook-e, куда (через какие кнопки) вводится код?
 
Radioboz сказал(а):
Dnny сказал(а):
да, этот код для личного сайта.
Нажмите, чтобы раскрыть...
Личного сайта у меня нет. Hо если я хочу добавить имена исполнителей на веб-плеере своего радио в Facebook-e, куда (через какие кнопки) вводится код?
Нажмите, чтобы раскрыть...
Не думаю, что facebook разрешит размещать произвольный HTML код.
 
djsoft сказал(а):
Radioboz сказал(а):
Dnny сказал(а):
да, этот код для личного сайта.
Нажмите, чтобы раскрыть...
Личного сайта у меня нет. Hо если я хочу добавить имена исполнителей на веб-плеере своего радио в Facebook-e, куда (через какие кнопки) вводится код?
Нажмите, чтобы раскрыть...
Не думаю, что facebook разрешит размещать произвольный HTML код.
Нажмите, чтобы раскрыть...
Чтобы на фейсбуке или вконтакте реализовать это, надо создать приложение для соцсети, зарегистрировать его и можно будет пользоваться.
 
Dnny сказал(а):
Чтобы на фейсбуке или вконтакте реализовать это, надо создать приложение для соцсети, зарегистрировать его и можно будет пользоваться.
Нажмите, чтобы раскрыть...
Я это и без вас знаю и уже создал такое. Предположим, Фейсбук аналог моего личного сайта. Куда я должен вписать код, какие кнопки на странице нажать?
 
Radioboz сказал(а):
Dnny сказал(а):
Чтобы на фейсбуке или вконтакте реализовать это, надо создать приложение для соцсети, зарегистрировать его и можно будет пользоваться.
Нажмите, чтобы раскрыть...
Я это и без вас знаю и уже создал такое. Предположим, Фейсбук аналог моего личного сайта. Куда я должен вписать код, какие кнопки на странице нажать?
Нажмите, чтобы раскрыть...
Я с приложениями не знаком, не пользуюсь, ибо нецелесообразно. Поэтом тут сказать что куда вставлять не скажу.
 
Dnny сказал(а):
Я с приложениями не знаком, не пользуюсь, ибо нецелесообразно. Поэтом тут сказать что куда вставлять не скажу.
Нажмите, чтобы раскрыть...
На своем личном сайте куда вставляете? Думаю, в Фейсбуке тоже самое.
 
Radioboz сказал(а):
Dnny сказал(а):
Я с приложениями не знаком, не пользуюсь, ибо нецелесообразно. Поэтом тут сказать что куда вставлять не скажу.
Нажмите, чтобы раскрыть...
На своем личном сайте куда вставляете? Думаю, в Фейсбуке тоже самое.
Нажмите, чтобы раскрыть...
Личный сайт у меня на основе DLE. Соответственно я вставляю в шаблон сайта, в место вывода. Проще говоря, создайте текстовой файл с расширением html например radio.html и поместите туда следующий код:
Код: 
<html>
<head>
<title> Вывод радио данных </title>
</head>
<body>
<p><audio width="50%" controls><source src="http://адрес-вещания?type=.mp3" type="audio/mp3"></audio></p>   
<!-- Вывод названия трека --> 
<p><b>В эфире:</b> <span id="song-title"></span>    
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
var timeout = 5; // интервал обновления информации в секундах
function getStats(){
  $.ajax({
    url: "http://адрес-сервера-icecast2/status-json.xsl",
    success: function( response ) {
        $('#song-title').text(response.icestats.source.title)
    }    
  });
}  
getStats();
setInterval(getStats, timeout * 1000);
</script> </p>
<!-- /Вывод названия трека -->
<!-- Вывод количества текущих слушателей -->
<p><b>Слушателей:</b> <span id="song-listeners"></span>    
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
var timeout = 5; // интервал обновления информации в секундах
function getStats(){
  $.ajax({
    url: "http://адрес-сервера-icecast2/status-json.xsl",
    success: function( response ) {
        $('#song-listeners').text(response.icestats.source.listeners)
    }    
  });
}  
getStats();
setInterval(getStats, timeout * 1000);
</script>  
<!-- /Вывод количества текущих слушателей -->
<!-- Вывод количества пикового значения слушателей -->
| <b>Пиковое:</b> <span id="song-listener_peak"></span>    
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
var timeout = 5; // интервал обновления информации в секундах
function getStats(){
  $.ajax({
    url: "http://адрес-сервера-icecast2/status-json.xsl",
    success: function( response ) {
        $('#song-listener_peak').text(response.icestats.source.listener_peak)
    }    
  });
}  
getStats();
setInterval(getStats, timeout * 1000);
</script></p>
<!-- Вывод количества пикового значения слушателей -->
</body>
</html>
Данный скрипт работает только с сервером icecast2
замените в коде: адрес-вещания на свой, например: http://127.0.0.1:80/Radioboz?type=.mp3
Замените в коде адрес-сервера-icecast2 на свой, например: http://127.0.0.1/status-json.xsl
 
Dnny сказал(а):
Личный сайт у меня на основе DLE. Соответственно я вставляю в шаблон сайта, в место вывода. Проще говоря, создайте текстовой файл с расширением html например radio.html и поместите туда следующий код:
Код: 
<html>
<head>
<title> Вывод радио данных </title>
</head>
<body>
<p><audio width="50%" controls><source src="http://адрес-вещания?type=.mp3" type="audio/mp3"></audio></p>   
<!-- Вывод названия трека --> 
<p><b>В эфире:</b> <span id="song-title"></span>    
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
var timeout = 5; // интервал обновления информации в секундах
function getStats(){
  $.ajax({
    url: "http://адрес-сервера-icecast2/status-json.xsl",
    success: function( response ) {
        $('#song-title').text(response.icestats.source.title)
    }    
  });
}  
getStats();
setInterval(getStats, timeout * 1000);
</script> </p>
<!-- /Вывод названия трека -->
<!-- Вывод количества текущих слушателей -->
<p><b>Слушателей:</b> <span id="song-listeners"></span>    
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
var timeout = 5; // интервал обновления информации в секундах
function getStats(){
  $.ajax({
    url: "http://адрес-сервера-icecast2/status-json.xsl",
    success: function( response ) {
        $('#song-listeners').text(response.icestats.source.listeners)
    }    
  });
}  
getStats();
setInterval(getStats, timeout * 1000);
</script>  
<!-- /Вывод количества текущих слушателей -->
<!-- Вывод количества пикового значения слушателей -->
| <b>Пиковое:</b> <span id="song-listener_peak"></span>    
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
var timeout = 5; // интервал обновления информации в секундах
function getStats(){
  $.ajax({
    url: "http://адрес-сервера-icecast2/status-json.xsl",
    success: function( response ) {
        $('#song-listener_peak').text(response.icestats.source.listener_peak)
    }    
  });
}  
getStats();
setInterval(getStats, timeout * 1000);
</script></p>
<!-- Вывод количества пикового значения слушателей -->
</body>
</html>
Данный скрипт работает только с сервером icecast2
замените в коде: адрес-вещания на свой, например: http://127.0.0.1:80/Radioboz?type=.mp3
Замените в коде адрес-сервера-icecast2 на свой, например: http://127.0.0.1/status-json.xsl
Нажмите, чтобы раскрыть...
Tекстовой файл с расширением html где должен лежать?
 
Dnny сказал(а):
куда хотите туда и кладите, хоть с компа запускайте
Нажмите, чтобы раскрыть...
Адрес-вещания если я правильно понимаю это адрес потока?
Еще туманным для меня оказалось "Соответственно я вставляю в шаблон сайта, в место вывода".

Создал, как вы сказали, файл с расширением .html, но открыв его, я вижу лишь статичные 2 строки:

В эфире:

Слушателей: | Пиковое:

Как это понять?
 
Radioboz сказал(а):
Dnny сказал(а):
куда хотите туда и кладите, хоть с компа запускайте
Нажмите, чтобы раскрыть...
Адрес-вещания если я правильно понимаю это адрес потока?
Еще туманным для меня оказалось "Соответственно я вставляю в шаблон сайта, в место вывода".

Создал, как вы сказали, файл с расширением .html, но открыв его, я вижу лишь статичные 2 строки:

В эфире:

Слушателей: | Пиковое:

Как это понять?
Нажмите, чтобы раскрыть...
Я не знаю как еще вам разжевать и за вас переварить. разбирайтесь сами дальше. Тут даже блондинка поймет, но не вы.
 
Dnny сказал(а):
Я не знаю как еще вам разжевать и за вас переварить. разбирайтесь сами дальше. Тут даже блондинка поймет, но не вы.
Нажмите, чтобы раскрыть...
Я сделал, как вы сказали, и попутно задал пару вопросов (возможно в них кроется "подножка' мне) и хотел-бы уточнения интеерсующих моментов. У меня ведь никакого опыта в написании скриптов, а вы в этом спец. Неплохо-бы увидеть весь этот процесс на видеоролике.
 
Dnny сказал(а):
Radioboz сказал(а):
Dnny сказал(а):
куда хотите туда и кладите, хоть с компа запускайте
Нажмите, чтобы раскрыть...
Адрес-вещания если я правильно понимаю это адрес потока?
Еще туманным для меня оказалось "Соответственно я вставляю в шаблон сайта, в место вывода".

Создал, как вы сказали, файл с расширением .html, но открыв его, я вижу лишь статичные 2 строки:

В эфире:

Слушателей: | Пиковое:

Как это понять?
Нажмите, чтобы раскрыть...
Я не знаю как еще вам разжевать и за вас переварить. разбирайтесь сами дальше. Тут даже блондинка поймет, но не вы.
Нажмите, чтобы раскрыть...

Хм.. так то Radioboz в чем то прав... Так же воспользовался твоим вариантом и результат такойже. Вывода трека и слушателей нет..

И вот хочу твой код разобрать... Получается информацию он берет с сервера айскаста, со строки song-title, но там нет такой строки...
 
Demortuus сказал(а):
Хм.. так то Radioboz в чем то прав... Так же воспользовался твоим вариантом и результат такойже. Вывода трека и слушателей нет..

И вот хочу твой код разобрать... Получается информацию он берет с сервера айскаста, со строки song-title, но там нет такой строки...
Нажмите, чтобы раскрыть...
Вы что-то "накосячили" в скрипте или мешает другое? Мне почему-то казалось, что скрипт надо вписывать через правой кнопкой мышки по странице прослушивания - Исследовать элемент - и.т.д., но я создал лишь текстовый файл с расширением .html Вы хотите сказать, что тыкнув по этому файлу, будет видна информация об играющем треке именно на это "голой" странице или на странице прослушивания персонального сайта тоже?
 
Статус
Закрыто для дальнейших ответов.

Similar threads

bfmradio
Вывод названий на сайт
Ответы
4
Просмотры
797
bfmradio
bfmradio
bfmradio
Вывод Названия задания на сервер вместо треков
Ответы
4
Просмотры
688
djsoft
D
S
СРОЧНО! Реализация отображения обложки и проигрываемого трека на сайте (IceCast)
Ответы
8
Просмотры
2 тыс.
NEWS UA-TOP
NEWS UA-TOP
D
[Сайт] Запросы песен
2
Ответы
31
Просмотры
8 тыс.
scorp
scorp
D
[Сайт] Вывод названия трека, обложки и списка проигранных треков
2 3 4
Ответы
76
Просмотры
17 тыс.
Rafik
Rafik
Назад
Верх