Я использую JPlayer для потоковой передачи станции Icecast и хочу показывать текущее имя песни всякий раз, когда изменяется трек. У меня есть PHP, который использует функцию (https://gist.github.com/fracasula/5781710) для обнаружения текущей дорожки воспроизведения.Обнаружение изменения песни при потоковой передаче Радиостанция Icecast
Я хотел бы обновить название дорожки и изображение полосы каждый раз, когда изменяется трек. Я не могу найти способ инициировать событие каждый раз, когда меняется песня, но знаю, что метаданные песни отправляются в потоке каждые 16 000 байт (Title of current icecast streamed song).
Есть ли способ проверить блок метаданных, содержащий информацию о песне, используя Javascript, тем самым позволяя мне менять название песни (и соответствующий образ google) всякий раз, когда воспроизводится новый трек?
Моего текущий код ниже (я просто пинг сценария, чтобы получить текущую дорожку каждую минуту на данный момент):
$(document).ready(function(){
var stream = {
title: "My Stream",
mp3: "http://mystream.com:8000/myStream"
},
ready = false;
$("#jquery_jplayer_1").jPlayer({
ready: function (event) {
ready = true;
$(this).jPlayer("setMedia", stream).jPlayer("play");
},
pause: function() {
$(this).jPlayer("clearMedia");
},
error: function(event) {
if(ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
$(this).jPlayer("setMedia", stream).jPlayer("play");
}
},
stop: function(event) {
console.log("stop");
$(this).jPlayer("setMedia", stream).jPlayer("play");
},
swfPath: "js",
supplied: "mp3",
preload: "none",
autoPlay: true,
wmode: "window",
keyEnabled: true
});
requestTrack();
setInterval(requestTrack, 60000);
// get the current track info
function requestTrack() {
$.get("tools/getTrack.php", function(data) {
console.log(data);
$("#current-track").html(data);
// search for an image with the band/song name
$.get("https://www.googleapis.com/customsearch/v1?key=MY_KEY&cx=MY_CX&q="+encodeURIComponent(data)+"&searchType=image", function(data) {
console.log(data.items[0].link);
$("#album").attr("src",data.items[0].link);
});
});
}
});