从一个节点播放音频。js服务器到HTML5 标签

时间:2021-02-21 18:59:52

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!

我已经在Node中尝试了二进制流。让我惊讶的是,js确实有一个使用node-radio-stream的Shoutcast流演示,并使用分段编码将其推进到HTML5元素中。但它只能在Safari中使用!

Here is my server code:

以下是我的服务器代码:

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>

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

这在Mac上的Safari 5上运行良好,但在Chrome或Firefox上似乎没有什么作用。什么好主意吗?

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

可能的候选者包括编码问题,或者只是部分实现的HTML5特性……

1 个解决方案

#1


19  

Here's a (slightly outdated) summary of the current status of HTML5 Audio and Icecast streams.

这里有一个(稍微过时的)HTML5音频和Icecast流的现状摘要。

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.

正如您所看到的,MP3源代码似乎只适用于Safari(可能还有IE9)。您可能需要尝试对OGG Vorbis进行一些服务器端代码转换(使用ffmpeg或mencoder)。我很确定,当我发送Vorbis数据时,Chrome能够正常运行。

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.

虽然Firefox仍然是一个brat,但它可能不喜欢分组编码(所有SHOUTcast服务器都响应HTTP/1.0版本响应,它还没有定义传输编码:分组)。尝试发送一个传输编码:带有OGG流的标识响应头来禁用块,Firefox可能会工作。我还没有测试。

Let me know how it goes! Cheers!

让我知道怎么回事!干杯!

#1


19  

Here's a (slightly outdated) summary of the current status of HTML5 Audio and Icecast streams.

这里有一个(稍微过时的)HTML5音频和Icecast流的现状摘要。

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.

正如您所看到的,MP3源代码似乎只适用于Safari(可能还有IE9)。您可能需要尝试对OGG Vorbis进行一些服务器端代码转换(使用ffmpeg或mencoder)。我很确定,当我发送Vorbis数据时,Chrome能够正常运行。

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.

虽然Firefox仍然是一个brat,但它可能不喜欢分组编码(所有SHOUTcast服务器都响应HTTP/1.0版本响应,它还没有定义传输编码:分组)。尝试发送一个传输编码:带有OGG流的标识响应头来禁用块,Firefox可能会工作。我还没有测试。

Let me know how it goes! Cheers!

让我知道怎么回事!干杯!