web-dev-qa-db-fra.com

Streaming audio d'un serveur Node.js vers la balise <audio> HTML5

J'ai expérimenté avec des flux binaires dans Node.js, et à mon grand étonnement, j'ai en fait une démonstration de travail pour prendre un flux Shoutcast en utilisant node-radio-stream et le pousser dans un élément HTML5 en utilisant un codage en morceaux. Mais cela ne fonctionne que dans Safari!

Voici mon code serveur:

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');

Mon code client est simplement:

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

Cela fonctionne bien dans Safari 5 sur Mac, mais ne semble rien faire dans Chrome ou Firefox. Des idées?

Candidats possibles, y compris des problèmes d'encodage ou des fonctionnalités HTML5 partiellement implémentées ...

streamingnode.jsaudio-streamingshoutcasthtml5-audio
51
Scott Wilson

Voici un résumé (légèrement obsolète) de l'état actuel des flux HTML5 Audio et Icecast .

Comme vous pouvez le voir, une source MP3 ne semble fonctionner que dans Safari (et éventuellement IE9). Vous pourriez avoir besoin d'expérimenter avec un transcodage côté serveur (avec ffmpeg ou mencoder ) à OGG Vorbis. Je suis presque sûr d'avoir pu obtenir Chrome pour se comporter correctement lorsque j'envoyais des données Vorbis.

Firefox était toujours un gamin, peut-être qu'il n'aime pas l'encodage en morceaux (tous les serveurs SHOUTcast répondent par un HTTP/1.0 réponse de la version, qui n'avait pas défini Transfer-Encoding: chunked encore). Essayez d'envoyer un Transfer-Encoding: identity en-tête de réponse avec le flux OGG pour désactiver chunked, et Firefox PEUT fonctionner. Je n'ai pas testé ça.

Faites-moi savoir comment ça se passe! À votre santé!

19
TooTallNate