将音频从 Node.js 服务器流式传输到 HTML5 <audio>标签 [英] Streaming audio from a Node.js server to HTML5 <audio> tag

问题描述

我一直在 Node.js 中试验二进制流，令我惊讶的是，实际上有一个使用 node-radio-stream 获取 Shoutcast 流并使用分块编码将其推送到 HTML5 元素的工作演示.但它只适用于 Safari！

I've been experimenting with binary streams in Node.js, and much to my amazement do actually have a working demo of taking a Shoutcast stream using node-radio-stream and pushing it into a HTML5 element using chunked encoding. But it only works in Safari!

这是我的服务器代码:

var radio = require("radio-stream");
var http = require('http');
var url = "http://67.205.85.183:7714";
var stream = radio.createReadStream(url);

var clients = [];

stream.on("connect", function() {
  console.error("Radio Stream connected!");
  console.error(stream.headers);
});


// When a chunk of data is received on the stream, push it to all connected clients
stream.on("data", function (chunk) {
    if (clients.length > 0){
        for (client in clients){
            clients[client].write(chunk);
        };
    }
});

// When a 'metadata' event happens, usually a new song is starting.
stream.on("metadata", function(title) {
  console.error(title);
});

// Listen on a web port and respond with a chunked response header. 
var server = http.createServer(function(req, res){ 
    res.writeHead(200,{
        "Content-Type": "audio/mpeg",
        'Transfer-Encoding': 'chunked'
    });
    // Add the response to the clients array to receive streaming
    clients.push(res);
    console.log('Client connected; streaming'); 
});
server.listen("8000", "127.0.0.1");

console.log('Server running at http://127.0.0.1:8000'); 

我的客户端代码很简单:

My client code is simply:

<audio controls src="http://localhost:8000/"></audio>

这在 Mac 上的 Safari 5 中运行良好，但在 Chrome 或 Firefox 中似乎没有任何作用.有任何想法吗?

This works fine in Safari 5 on the Mac, but doesn't seem to do anything in Chrome or Firefox. Any ideas?

可能的候选对象，包括编码问题，或者只是部分实现的 HTML5 功能......

Possible candidates including encoding issues, or just partially-implemented HTML5 features...

推荐答案

以下是 HTML5 音频和 Icecast 流当前状态的(略微过时)摘要.

如您所见，MP3 源似乎只适用于 Safari(也可能适用于 IE9).您可能需要尝试一些服务器端转码(使用 ffmpeg 或 mencoder)到 OGG Vorbis.我很确定我在发送 Vorbis 数据时能够让 Chrome 正常运行.

As you can see, a MP3 source only seems to work in Safari (and possibly IE9). You might need to experiment with some server-side transcoding (with ffmpeg or mencoder) to OGG Vorbis. I'm pretty sure I was able to get Chrome to behave properly when I was sending Vorbis data.

Firefox 仍然是一个小子，也许它不喜欢分块编码(所有 SHOUTcast 服务器都响应一个 HTTP/1.0 版本响应，它没有定义 Transfer-编码:分块).尝试使用 OGG 流发送 Transfer-Encoding: identity 响应标头以禁用 chunked，Firefox 可能会工作.我还没有测试过这个.

Firefox was still being a brat though, maybe it doesn't like the chunked encoding (all SHOUTcast servers respond with a HTTP/1.0 version response, which hadn't defined Transfer-Encoding: chunked yet). Try sending a Transfer-Encoding: identity response header with the OGG stream to disable chunked, and Firefox MIGHT work. I haven't tested this.

告诉我进展如何！干杯！

Let me know how it goes! Cheers!

这篇关于将音频从 Node.js 服务器流式传输到 HTML5 <audio>标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！