我在 HTML5 中录制音频的代码有什么问题？答案

【问题标题】：What's wrong with my code to record audio in HTML5?我在 HTML5 中录制音频的代码有什么问题？
【发布时间】：2012-07-10 19:51:19
【问题描述】：

我正在尝试使用最新的 Chrome 测试版（版本 21.0.1180.15）通过麦克风录制音频。似乎现在几乎所有要做的事情都在 Chrome beta 中实现了。我什至可以使用麦克风。虽然我无法将流与audio 元素连接起来。但据我了解，如果没有错误，它应该可以工作。

createMediaStreamSource() 尚未实现。作为一种解决方法，我想使用 createMediaElementSource() 通过静音的 audio 元素路由来自麦克风的音频。

使用下面的代码，我在控制台中收到以下两条错误消息之一：

GET blob:file%3A///625fd498-f427-43d5-959b-3b49c6d53ab5 404（不是找到）

或

不允许加载本地资源： blob:null/8df582cc-b663-489b-bf49-1785226fc7b7

错误是由这一行引起的：

audio.src = window.webkitURL.createObjectURL(stream)

这条线有问题吗？如何将流连接到audio 元素源？还是 Chrome 中的一个错误导致无法创建对象 URL？

代码：

var context = null;
var elementSource = null;

function onError(e) {
  if (e.code == 1) {
    alert('User denied access to their camera');
  } else {
    alert('getUserMedia() not supported by your browser');
  }
}

window.addEventListener('load', initAudio, false);
function initAudio() {
  navigator.webkitGetUserMedia({audio:true}, function (stream) {
    var audio = document.querySelector('#basic-stream');
    audio.src = window.webkitURL.createObjectURL(stream);
    audio.controls = true;
    context = new webkitAudioContext();
    elementSource = context.createMediaElementSource(audio);
    elementSource.connect(context.destination);
  }, onError);
}

<div>
    audio id="basic-stream" class="audiostream" autoplay muted></audio>
</div>

【问题讨论】：

这绝对会帮助你smartjava.org/content/…

标签： javascript html audio web-audio-api webrtc

【解决方案1】：

如果不是绝对必要，请不要重新发明方轮：https://github.com/mattdiamond/Recorderjs

【讨论】：

【解决方案2】：

我不确定这是否相关，但在 getUserMedia() 与音频方面存在一个悬而未决的问题。

http://code.google.com/p/chromium/issues/detail?id=112367

【讨论】：