javascript - 尝试将正弦波音频保存为 .wav 文件时出现错误

Question

我在这里想做的是播放并录制一个简单的正弦波几秒钟，并在录制停止时将其保存为 .wav 文件。但是，我收到此错误，并且 .wav 文件为空。

ERR_REQUEST_RANGE_NOT_SATISFIABLE

错误消息:

这是我的完整代码。

完整代码:

<button onclick="play();">PLAY</button>
<button onclick="r.stop();">STOP</button>

<ul id="recordingslist"></ul>

<script type="text/javascript">
const context = new AudioContext();
const stream = context.createMediaStreamDestination();
let o = null,
    g = null,
    r = null;
function play(){
    o = context.createOscillator();
    g = context.createGain();
    r = new MediaRecorder(stream.stream);
    o.type = "sine";
    o.connect(g);
    o.connect(context.destination);
    o.start();
    r.start();
    r.ondataavailable = function(e) {
        var url = window.URL.createObjectURL(e.data);
        var li = document.createElement('li');
        var au = document.createElement('audio');
        var hf = document.createElement('a');
        au.controls = true;
        au.src = url;
        hf.href = url;
        hf.download = new Date().toISOString() + '.wav';
        hf.innerHTML = hf.download;
        li.appendChild(au);
        li.appendChild(hf);
        document.getElementById('recordingslist').appendChild(li);
        o.stop();
    };
}
</script>

Answer 1

这里有一些事情。

<小时/>

关于 MediaRecorder 部分，dataavailable 事件可能会在浏览器认为有必要的任何时候触发，甚至可能在没有任何数据的情况下触发。

如果您想记录固定的持续时间，请监听 stop 事件来构建下载链接，并仅使用 dataavailable 事件来推送 block 浏览器在此期间将输出的数据:

<小时/>

关于AudioContext部分，
您可以将链接连接视为[吉他 - 踏板 - 前置放大器 - 放大器] 设置。每个connect都是两个节点之间的一条新线路。
在您的设置中，您确实创建了一个增益节点，并将振荡器连接到它，现在您需要将增益节点 (g) 连接到 MediaStreamDestinationNode (stream)如果你想记录它。如果不这样做，则不会将任何内容传递到记录器，因为流目标节点将不会连接到任何内容。

const context = new AudioContext();
const stream = context.createMediaStreamDestination();

document.getElementById('btn').onclick = play;

function play() {
  const o = context.createOscillator();
  const g = context.createGain();
  const r = new MediaRecorder(stream.stream);
  o.type = "sine";
  g.gain.value = 0.5;
  o.connect(g);
  // you want to connect the gainNode to the stream-dest
  g.connect(stream);
  // and to the context's dest (speakers)
  g.connect(context.destination);
  o.start(0);
  // we need an Array to store all the chunks
  const chunks = [];
  // in dataavailable we only push the new chunks
  r.ondataavailable = function(e) {
    chunks.push(e.data);
  };
  // we wait until the recorder has been stopped to build the final media
  r.onstop = function(e) {
    // concatenate all the chunks in a single Blob
    const blob = new Blob(chunks);
    const url = window.URL.createObjectURL(blob);
    const li = document.createElement('li');
    const au = document.createElement('audio');
    const hf = document.createElement('a');
    au.controls = true;
    au.src = url;
    hf.href = url;
    // setting the filename's extension won't make it a wav file
    // what you have here is an ogg-vorbis audio file.
    hf.download = new Date().toISOString() + '.oga';
    hf.innerHTML = hf.download;
    li.appendChild(au);
    li.appendChild(hf);
    document.getElementById('recordingslist').appendChild(li);
    o.stop();
  };
  r.start();
  // stop the recording in 3s
  setTimeout(() => {
    r.stop();
  }, 3000);
}

<button id="btn">start</button>
<ul id="recordingslist"></ul>