是否可以在浏览器中使用纯 JavaScript 保存音频流？答案

【问题标题】：Is it possible to save an audio stream with pure JavaScript in the browser?是否可以在浏览器中使用纯 JavaScript 保存音频流？
【发布时间】：2016-09-15 16:59:20
【问题描述】：

我想制作一个网页，访问者可以通过点击链接（不是实时流，而是来自使用流的广播存档的链接）来保存音频流，我想在没有纯 JavaScript 的服务器后端的情况下做到这一点浏览器。我在某处读到了 FFMpeg 的 JavaScript 端口，它可以利用所谓的 blob 在浏览器中编码和保存视频/音频。但是下载库很大，据我记得有 17 MB。事实上，我只需要流复制音频流，而不是真正的编码过程。我通常使用类似的命令来保存程序：

ffmpeg -i http://stream.example.com/stream_20160518_0630.mp3 -c copy -t 3600 programme.mp3

我想知道，是否可以将 FFMpeg 的一个子集编译成 JavaScript，只提供真正需要的流复制？

【问题讨论】：

标签： javascript audio ffmpeg stream

【解决方案1】：

var audio = new Audio();
var ms = new MediaSource();
var chunks = [];
audio.src = URL.createObjectURL(ms);

ms.addEventListener('sourceopen', function(e) {
    var sourceBuffer = ms.addSourceBuffer('audio/mpeg');
    var stream;

    function pump(stream){
        return stream.read().then(data => {
            chunks.push(data.value)

            sourceBuffer.appendBuffer(data.value);
        })
    };

    sourceBuffer.addEventListener('updateend', () => {
        pump(stream);
    }, false);

    fetch("http://stream001.radio.hu:443/stream/20160606_090000_1.mp3")
        .then(res=>pump(stream = res.body.getReader()))

    audio.play()
}, false);

// stop the stream when you want and save all chunks that you have
stopBtn.onclick = function(){
    var blob = new Blob(chunks)
    console.log(blob)
    // Create object url, append to link, trigger click to download
    // or saveAs(blob, 'stream.mp3') need: https://github.com/eligrey/FileSaver.js
}

【讨论】：

不幸的是在这种情况下不起作用，因为无线电流是无穷无尽的。不知何故，我不得不中断下载。
我明白了，那么您还有 2 个其他选择。 1) 对该 url 进行 ajax 调用并保存块（来自可读流） - 从这些块中创建一个 blob - 然后保存它。 2) 使用我刚刚构建的很棒的StreamSaver.js - 只能在 Chrome v52 中工作，希望还没有发布
谢谢，第一种方法有效。源代码在这里pastebin.com/dfitDqBs 唯一的问题是：当我从服务器录制音频时，它发送一个 CORS 标头（Access-Control-Allow-Origin：*）它工作得很好。对于不提供该标头的服务器（其中大多数），我收到跨域策略错误。我不知道如何解决这个问题。
我不建议你这样做。查看我更新的答案如何获得可读流