javascript 录制html5音频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10718183/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Recording html5 audio
提问by Thor Russell
Is it possible to record sound with html5 yet? I have downloaded the latest canary version of chrome and use the following code:
是否可以使用 html5 录制声音？我已经下载了最新的金丝雀版本的 chrome 并使用以下代码：
navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.getUserMedia; navigator.getUserMedia({audio: true}, gotAudio, noStream);
navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.getUserMedia; navigator.getUserMedia({audio: true}, gotAudio, noStream);
This then prompts the user to allow audio recording, and if you say "yes" a message appears saying that chrome is recording. However is it possible to access the audio buffer with the raw data in it? I don't seem to be able to find out how. There are suggested specs that havn't been implemented yet does anyone know if it can actually be done on any browser now, and provide instructions?
然后会提示用户允许录音，如果您说“是”，则会出现一条消息，说明 chrome 正在录音。但是，是否可以访问包含原始数据的音频缓冲区？我似乎无法找出方法。有一些尚未实施的建议规范，有谁知道现在是否可以在任何浏览器上实际完成，并提供说明？
采纳答案by siniradam
Here you can find my example, but it's not working (partly). Because AUDIO recording is not yet implemented to chrome. Thats why you'll get a 404 error, which is says can not find BLOB.
在这里你可以找到我的例子，但它不起作用（部分）。因为 AUDIO 录音尚未实现到 chrome。这就是为什么您会收到 404 错误，即找不到 BLOB。
Also there is a form below it is because my aim was sending that BLOB to a php file, but since not working, i can't try. Save it, you may use later.
下面还有一个表格，因为我的目标是将该 BLOB 发送到一个 php 文件，但由于不起作用，我无法尝试。保存下来，以后可以使用。
<audio></audio>
<input onclick="startRecording()" type="button" value="start recording" />
<input onclick="stopRecording()" type="button" value="stop recording and play" />
<div></div>
<!--
<form enctype="multipart/form-data">
<input name="file" type="file" />
<input type="button" value="Upload" />
</form>
-->
<script>
var onFailed = function(e) {
console.log('sorry :(', e);
};
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia ||
var localStream
var audio = document.querySelector('audio');
var stop = document.getElementById('stop');
function startRecording(){
if (navigator.getUserMedia) {
navigator.getUserMedia({audio: true, video: false, toString : function() {return "video,audio";}}, function(stream) {
audio.src = window.URL.createObjectURL(stream);
document.getElementsByTagName('div')[0].innerHTML = audio.src;
localStream = stream;
}, onFailed);
} else {
alert('Unsupported');
//audio.src = 'someaudio.ogg'; // fallback.
}
}
function stopRecording(){
localStream.stop();
audio.play();
}
function sendAudio(){
}
</script>
note: some information and howto for firefox: https://hacks.mozilla.org/2012/07/getusermedia-is-ready-to-roll/
注意：firefox 的一些信息和操作方法：https: //hacks.mozilla.org/2012/07/getusermedia-is-ready-to-roll/
回答by kindohm
Webkit and Chrome audio API's support recording, however as their API's evolve it will be difficult to maintain code that uses them.
Webkit 和 Chrome 音频 API 支持录音，但是随着它们 API 的发展，维护使用它们的代码将变得困难。
An active open-source project named Sink.js allows recording and also allows you to push raw samples: https://github.com/jussi-kalliokoski/sink.js/. Since the project is pretty active they have been able to keep on top of changes in Webkit and Chrome as they come out.
一个名为 Sink.js 的活跃开源项目允许记录并允许您推送原始样本：https: //github.com/jussi-kalliokoski/sink.js/。由于该项目非常活跃，因此他们能够在 Webkit 和 Chrome 出现时随时掌握变化。
回答by Remus Negrota
Now it is possible to access the audio buffer using Audio context API and getChannelData().
现在可以使用音频上下文 API 和 getChannelData() 访问音频缓冲区。
Here's a project on gitHub that records audio directly in MP3 format and saves it on the webserver: https://github.com/nusofthq/Recordmp3js
这是 gitHub 上的一个项目，直接以 MP3 格式录制音频并将其保存在网络服务器上：https: //github.com/nusofthq/Recordmp3js
In recorder.js you will see how the audio buffer is accessed individually by channels like so:
在 recorder.js 中，您将看到通道如何单独访问音频缓冲区，如下所示：
this.node.onaudioprocess = function(e){
if (!recording) return;
worker.postMessage({
command: 'record',
buffer: [
e.inputBuffer.getChannelData(0),
//e.inputBuffer.getChannelData(1)
]
});
}
For a more detailed explanation of the implementation you can read the following blogpost: http://nusofthq.com/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/
有关实现的更详细说明，您可以阅读以下博客文章：http: //nusofthq.com/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/
