如何在网页（iOS，Android，PC / Mac）上录制音频 - 没有闪光灯

Question

我需要允许用户使用他们的麦克风录制音频文件，但它必须在没有闪存的情况下工作，因为它需要在iOS（移动版Safari），Android浏览器或Chrome以及现代浏览器上工作。 PC / Mac的。

是否有一种简洁的HTML5方法用于录制音频和发布到服务器？我找不到任何东西。

Answer 1

您可以使用HTML5 WebAudio API。

音频和视频捕捉简介Capture audio & video in HTML5

使用样本Recorder.js

录制音频的好图书馆

使用Recorder.js How to record audio in Chrome with native HTML5 APIs

的完整且有效的示例

其他WebAudio API演示HTML5 Web Audio API Demos and Libraries

支持的浏览器Can I use Web Audio API?

关于将数据发送到其他服务器，使用Recorder.js可以获取音频缓冲区，然后您可以使用XMLHttpRequest将arraybuffer或blob直接POST到目标服务器或编码为base64。

MDN：Sending and Receiving Binary Data

Html5Rocks：New trick ins XMLHttpRequest2, sending data

Answer 2

从专业角度说我会说不，有HTML5的音频API，但它们的实现目前在不同的浏览器中有所不同。如果您正在进行各种技术演示，那么这可能就足够了，否则您可能需要回退到其他技术，如闪存和/或本机应用程序，以获得更可靠的结果。

Answer 3

getUserMedia()现在在移动设备中得到广泛支持：

• iOS 11（except UIWebView）上的Safari
• Android上的Chrome

和台式机：

• Safari 11
• Chrome
• Firefox
• Edge 12
• 歌剧

一旦获得了网络摄像头/麦克风的许可，麦克风数据就会启动：

• 使用Recorder.js（wav），WebAudioRecorder.js（wav，mp3，Vorbis）或vmsg（mp3）等JS库对声音进行编码。
• 或使用{native} Media Recorder API来捕获.ogg（Firefox）和.webm（Chrome）文件中的Opus音频，以及用于生成.wav文件的Safari 11和Edge的neat polyfill。

这是我制作的一个演示（live demo，source on GitHub），该演示使用Matt Diamond的Recorder.js来录制在iOS 11的Safari中运行的音频（.wav文件中的pcm）。用户允许麦克风访问：