如何在网页(iOS,Android,PC / Mac)上录制音频 – 没有闪光灯

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

是否有一个干净,简单的HTML5方法来录制音频和发布到服务器? 我找不到任何东西。

您可以使用HTML5 WebAudio API 。

音频和video捕获简介以HTML5格式捕获音频和video

一个很好的库,可以使用Recorder.js样本录制音频

使用Recorder.js的完整且有效的示例如何使用本机HTML5 API在Chrome中录制音频

其他WebAudio API演示HTML5 Web Audio API演示和库

支持的浏览器我可以使用Web Audio API吗?

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

MDN: 发送和接收二进制数据

Html5Rocks: XMLHttpRequest2的新技巧,发送数据

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

getUserMedia()现在在移动设备上得到广泛支持:

  • iOS 11上的Safari( UIWebView除外 )
  • Android上的Chrome

和桌面:

  • Safari 11
  • 火狐
  • 边缘12
  • 歌剧

获得网络摄像头/麦克风许可并且麦克风数据启动后,您可以:

  • 使用JS库(如Recorder.js (wav), WebAudioRecorder.js (wav,mp3,Vorbis)或vmsg (mp3))对声音进行编码。
  • 或使用(本机) Media Recorder API在.ogg(Firefox)和.webm(Chrome)文件中捕获Opus音频,以及用于生成.wav文件的Safari 11和Edge的整洁polyfill 。

这是我做的一个演示( 现场演示 , GitHub上的源代码 ),它使用Matt Diamond的Recorder.js来记录在iOS 11上的Safari中运行的音频(.cm文件中的pcm。)单击Record提示用户允许麦克风访问:

在iOS 11上运行的Recorder.js演示 单击“录制”会提示用户允许麦克风访问