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

我要在这里做的是播放并录制简单的正弦波几秒钟，并在录制停止时将其保存为.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>

最佳答案

这里有几件事。



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

如果要记录固定的持续时间，请侦听stop事件以建立下载链接，并仅使用dataavailable推送浏览器在该时间段内将输出的数据块：



关于AudioContext部分，将链接连接视为[吉他-踏板-前置放大器-放大器]设置。每个connect在两个节点之间形成一条新的连线。
在设置中，您确实创建了一个gainNode，并确实将振荡器连接到了它，现在，如果要记录它，则需要将gainNode（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 datavailable we only push the new chunks
  r.ondataavailable = function(e) {
    chunks.push(e.data);
  };
  // we wait until the recoder 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>

关于javascript - 尝试将正弦波音频另存为.wav文件时出现错误，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60362711/