Question

我正在使用JPlayer来播放Icecast电台，并希望每当曲目发生变化时都会显示当前的歌曲名称。我有PHP使用函数（https://gist.github.com/fracasula/5781710）来检测当前播放曲目。

我想在每次曲目更改时更新曲目标题和乐队图像。我不能找到每次歌曲改变时触发事件的方法，但要知道歌曲元数据每16,000字节（Title of current icecast streamed song）在流中发送。

有没有办法使用Javascript检查包含歌曲信息的元数据块，从而允许我在新曲目播放时更改歌曲标题（和相应的谷歌图像）？

我目前的代码如下（我现在只是ping脚本以获取当前每分钟的曲目）：

$(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);
         });
    });
}

});

Answer 1

在JavaScript中无法检测到元数据块。实际上，浏览器根本不会要求它。你必须做这个服务器端。您可以实现轮询，或修改服务器上的脚本，以便在元数据更改时将数据推送到客户端。（这需要从HTTP服务器到Icecast / SHOUTcast服务器的持续连接。）

在播放Icecast电台时检测歌曲的变化

1 个答案: