获取 Icecast 流元数据的有效方法

花韻仙語

发布时间：2025-07-14 16:28:24

882人浏览过

来源于php中文网

原创

获取 icecast 流元数据的有效方法

通过 WebSocket 实现 Icecast 元数据推送

正如摘要所述，直接从客户端轮询 Icecast 服务器获取元数据会造成不必要的服务器压力。为了解决这个问题，可以采用 WebSocket 技术，实现服务器主动推送元数据更新。这种方法的核心思想是：建立一个 WebSocket 服务器，服务器端脚本定时从 Icecast 服务器获取元数据，一旦检测到元数据发生变化，就通过 WebSocket 连接将新的元数据推送给所有已连接的客户端。

具体步骤如下：

搭建 WebSocket 服务器：

可以使用现成的 WebSocket 服务器库，例如 Python 的 simple-websocket-server。使用 pip 安装：

pip install simple-websocket-server

一个简单的 WebSocket 服务器示例（Python）：

from SimpleWebSocketServer import WebSocket, SimpleWebSocketServer
import time
import json
import requests

class MetadataServer(WebSocket):

    def handleMessage(self):
        # Echo back to client
        self.sendMessage(self.address[0] + u" - " + self.data)

    def handleConnected(self):
        print(self.address, 'connected')

    def handleClose(self):
        print(self.address, 'closed')

# Function to fetch metadata from Icecast
def get_metadata(url):
    try:
        response = requests.get(url)
        response.raise_for_status()  # Raise HTTPError for bad responses (4XX, 5XX)
        data = response.json()
        return data['icestats']['source']['title'] # Adjust based on the structure of your JSON
    except requests.exceptions.RequestException as e:
        print(f"Error fetching metadata: {e}")
        return None
    except (KeyError, TypeError) as e:
        print(f"Error parsing metadata: {e}")
        return None

if __name__ == "__main__":
    host = '0.0.0.0' # Listen on all interfaces
    port = 8000
    icecast_url = 'https://listen.abengnews.com/status-json.xsl' # Replace with your Icecast URL
    server = SimpleWebSocketServer(host, port, MetadataServer)

    last_metadata = None
    while True:
        metadata = get_metadata(icecast_url)
        if metadata and metadata != last_metadata:
            print(f"Metadata changed: {metadata}")
            for client in server.connections.values():
                client.sendMessage(metadata) # Send the metadata to each connected client
            last_metadata = metadata
        time.sleep(5)  # Check every 5 seconds. Adjust as needed.

    server.serveforever()

关键点：

host: 设置为0.0.0.0 允许所有接口连接。
port: 选择一个未被占用的端口。
icecast_url: 替换为你的 Icecast 元数据 URL。
get_metadata(): 此函数负责从 Icecast 服务器获取元数据。根据 Icecast 返回的 JSON 结构，提取歌曲标题或其他相关信息。
服务器循环：服务器持续轮询 Icecast，检测元数据变化。如果检测到变化，将新的元数据发送给所有连接的客户端。

服务器端脚本：

服务器端脚本负责定时向 Icecast 服务器发起请求，获取最新的元数据。当脚本检测到元数据发生变化时，它会将新的元数据通过 WebSocket 连接发送给所有连接的客户端。

脚本需要处理错误，例如网络请求失败或者 Icecast 服务器返回错误。

移动端无限滚动加载瀑布流
里面有2个文件夹。其中这个文件名是:finishing，是我项目还没有请求后台的数据的模拟写法。请求后台数据之后，瀑布流的js有一点点变化，放在文件名是：finished。变化在于需要穿参数到后台，和填充的内容都用后台的数据填充。看自己项目需求来。由于chrome模拟器是不允许读取本地文件json的，所以如果你要进行测试，在hbuilder打开项目就可以看到效果啦，或者是火狐浏览器。

下载

客户端 JavaScript 代码：

客户端 JavaScript 代码负责建立 WebSocket 连接，并监听服务器推送的元数据更新事件。当收到新的元数据时，客户端代码会更新播放器界面上的相关信息。

// Replace with your WebSocket server address
const websocketURL = "ws://localhost:8000/";
let websocket;

function connectWebSocket() {
    websocket = new WebSocket(websocketURL);

    websocket.onopen = function(event) {
        console.log("Connected to WebSocket server");
    };

    websocket.onmessage = function(event) {
        const metadata = event.data;
        console.log("Received metadata: " + metadata);
        document.getElementById("scroll-text").innerHTML = metadata;
        // Update your player's UI with the new metadata here
    };

    websocket.onclose = function(event) {
        console.log("Disconnected from WebSocket server");
        // Attempt to reconnect after a delay
        setTimeout(connectWebSocket, 3000);
    };

    websocket.onerror = function(error) {
        console.error("WebSocket error:", error);
    };
}

// Call this function when your page loads
connectWebSocket();

关键点：

websocketURL: 替换为你的 WebSocket 服务器地址。
onopen: WebSocket 连接建立后触发。
onmessage: 收到服务器发送的消息（元数据）时触发。在此函数中，更新你的播放器界面。
onclose: WebSocket 连接关闭时触发。可以尝试重新连接。
onerror: 发生错误时触发。

CSS 样式 (可选):

#scroll-container {
  /*position: absolute;*/
  background-color: #005500;
  border: 1px solid black;
  border-radius: 5px;
  overflow: hidden;
  width: 250px;
  margin: auto;
  font-family: arial,san-serif;
  font-size:10px;
  font-weight: bold;
  color: #fff; /* Changed font-color to color */
}

#scroll-text {
  display: block;
  height:12px;
  white-space: nowrap;
  /* animation properties */
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);

  -moz-animation: my-animation 15s linear infinite;
  -webkit-animation: my-animation 15s linear infinite;
  animation: my-animation 15s linear infinite;
}
/* for Firefox */
@-moz-keyframes my-animation {
  from { -moz-transform: translateX(100%); }
  to { -moz-transform: translateX(-100%); }
}

/* for Chrome */
@-webkit-keyframes my-animation {
  from { -webkit-transform: translateX(100%); }
  to { -webkit-transform: translateX(-100%); }
}

@keyframes my-animation {
  from {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}