如何使用 Javascript/PHP 录制用户的声音?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/12149451/
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
How can I record a user's voice using Javascript/PHP?
提问by day0
I am currently trying to make a test site that allows users to record voice-notes and save it to their account. What is the best way to do this using either PHP or JavaScript?
我目前正在尝试创建一个测试站点,允许用户记录语音笔记并将其保存到他们的帐户中。使用 PHP 或 JavaScript 执行此操作的最佳方法是什么?
The steps that I am looking to have for this process are:
我希望为此过程执行的步骤是:
1) User clicking the record button. 2) Initiation of the recording sequence.3) Stopping the sequence. 4) Naming of the file and sending it over to the server.
1) 用户点击录制按钮。 2) 启动记录序列。3) 停止序列。4) 命名文件并将其发送到服务器。
My main query is focused on the 2nd step, where I'd need some mechanism that would interact with the user's mic to record the voice. I am still new to web dev per se and I do not know how I can invoke voice recording using JavaScript.
我的主要查询集中在第二步,我需要一些机制来与用户的麦克风交互以录制语音。我本身还是网络开发新手,我不知道如何使用 JavaScript 调用录音。
Upon searching in Google, I found some links in StackOverflow which addressed similar issues but the answers were not helpful. A lot of solutions pointed to Flash but I would like to avoid that as much as possible. So my question does boil down to "Is it possible to record voice using JavaScript? If yes, how?"
在谷歌搜索后,我在 StackOverflow 中找到了一些解决类似问题的链接,但答案没有帮助。许多解决方案都指向 Flash,但我想尽可能避免这种情况。所以我的问题确实归结为“是否可以使用 JavaScript 录制语音?如果是,如何录制?”
Thanks in advance.
提前致谢。
采纳答案by Stuart Wakefield
The HTML5 Audio API is not widely supported in browsers, I think it works in Chrome and Firefox has had it recently added to its nightlies... Browser prefixes are required at this stage but the general API is...
HTML5 音频 API 在浏览器中并未得到广泛支持,我认为它适用于 Chrome,而 Firefox 最近已将其添加到它的 nightlies 中……现阶段需要浏览器前缀,但通用 API 是……
navigator.getUserMedia({audio: true}, function(stream) { /* do stuff */ });
So that would be webkitGetUserMedia
for Chrome and mozGetUserMedia
for Firefox.
这将webkitGetUserMedia
适用于 Chrome 和mozGetUserMedia
Firefox。
Your more consistent options right now are via browser plugins such as Flash or Java or to create a desktop client that the user would need to install.
您现在更一致的选择是通过浏览器插件(例如 Flash 或 Java)或创建用户需要安装的桌面客户端。
Resources of interest regarding getUserMedia:
关于 getUserMedia 感兴趣的资源:
- Intro to getUserMedia
- getUserMedia added to Firefox nightlies
- Audio only issues with getUserMedia in Chromium
The following question may assist you further:
以下问题可能会进一步帮助您:
tutorial on using flash or java servlet to upload microphone data from browser to server?
回答by grrizzly
You are now able to record from a microphone by creating an audio graph that connects your local MediaStream to a ScriptProcessingNode:
您现在可以通过创建将本地 MediaStream 连接到 ScriptProcessingNode 的音频图来从麦克风录制:
navigator.webkitGetUserMedia({video: true, audio: true}, function(stream) {
var audioContext = new webkitAudioContext,
mediaStreamSource = context.createMediaStreamSource(stream),
processor = context.createJavaScriptNode(4096, 2, 2);
processor.onaudioprocess = function(e) {
// Process the audio data found in e.inputBuffer
};
mediaStreamSource.connect(processor);
processor.connect(context.destination);
});
(Using Chrome vendor prefixes)
(使用 Chrome 供应商前缀)
You can hook this up to Websockets or even plain XHR to send the chunks to your server, which can process it into an audio file. You'll need to convert each channel from
您可以将其连接到 Websockets 或什至普通的 XHR 以将块发送到您的服务器,服务器可以将其处理为音频文件。您需要将每个频道从
non-interleaved IEEE 32-bit linear PCM with a nominal range of -1 -> +1
非交错 IEEE 32 位线性 PCM,标称范围为 -1 -> +1
into the format of your choice.
转换成您选择的格式。
A similar example of recording audio, encoding it into a wav file, and saving it (all client-side) can be found here:
可以在此处找到录制音频、将其编码为 wav 文件并保存(所有客户端)的类似示例:
https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC
https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC
More details on AudioContext:
关于 AudioContext 的更多细节:
回答by J.Hunt
Until HTML5 audio recording arrives, you really need to hobble together a solution that combines Flash and on mobile devices, file upload. On mobile devices the file upload screen usually has an audio or video recorder, so users can record direct from their device.
在 HTML5 音频录制到来之前,您真的需要将 Flash 和移动设备上的文件上传结合在一起的解决方案。在移动设备上,文件上传屏幕通常有一个音频或视频记录器,因此用户可以直接从他们的设备进行录制。
If the device doesn't have an audio recorder on the file upload, you should use the video recorder and then convert the video to MP3 on the server. That is how we do it over it at recordmp3online.com.
如果设备在上传文件时没有录音机,则应使用录像机,然后在服务器上将视频转换为 MP3。这就是我们在recordmp3online.com 上的处理方式。