【问题标题】:Detect song change when streaming Icecast radio station流式传输 Icecast 广播电台时检测歌曲变化
【发布时间】:2014-01-06 06:19:16
【问题描述】:

我正在使用 JPlayer 流式传输 Icecast 电台,并希望在曲目更改时显示当前歌曲名称。我有使用函数 (https://gist.github.com/fracasula/5781710) 来检测当前播放曲目的 PHP。

我想在每次曲目更改时更新曲目标题和乐队图像。我找不到每次歌曲更改时触发事件的方法,但知道歌曲元数据每 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);
         });
    });
}

});

【问题讨论】:

    标签: javascript html audio-streaming jplayer icecast


    【解决方案1】:

    在 JavaScript 中无法检测到元数据块。事实上,浏览器根本没有请求它。您必须在服务器端执行此操作。您可以实施轮询,或修改服务器上的脚本以在元数据更改时将数据推送到客户端。 (这需要从您的 HTTP 服务器持续连接到 Icecast/SHOUTcast 服务器。)

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-05-21
      • 1970-01-01
      相关资源
      最近更新 更多