在 Chrome 中使用 HTML5 和 getUserMedia 录制音频

Posted 2023-02-22

【中文标题】在 Chrome 中使用 HTML5 和 getUserMedia 录制音频

【英文标题】：Recording Audio with HTML5 and getUserMedia in Chrome

【发布时间】：2013-11-22 09:08:33

【问题描述】：

我希望在不使用 Flash 或 Silverlight 的情况下在 Chrome 中录制音频，然后使用 php 和 mysql 将其存储在数据库或服务器上。

我看到的唯一方法是通过 getUserMedia 和 html5 中的一些 JS。

例如： http://webaudiodemos.appspot.com/AudioRecorder/index.html

我在这里得到了 github 的来源： https://github.com/cwilso/AudioRecorder

问题是它似乎不适用于我的本地主机。事实上，包含的 index.html 与托管版本完全相同。托管版本可以工作，但是当在我的本地机器上运行相同的东西时，它会抛出一个错误，说它不能 getUserMedia()。

有没有人实现过类似的东西或有任何见解？非常感谢！

【问题讨论】：

请发布确切的错误并指定错误的来源；服务器，浏览器还是什么？

【参考方案1】：

我看到您提到了 localhost，但如果您尝试通过 file:/// 访问该站点，而不是实际使用 http://localhost（网络服务器），Chrome 将阻止访问 getUserMedia。

如果您尝试使用 file:/// 访问它，则需要使用 --allow-file-access-from-files 的命令行参数打开 Chrome

【参考方案2】：

以下 gitHub 项目仅使用 HTML5 和 JS 直接从浏览器将音频录制为 MP3 格式。

它现在可以在 Chrome 和 Firefox 上运行。

https://github.com/nusofthq/Recordmp3js

要更详细地了解实现，您可以阅读博客文章： http://nusofthq.com/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/

【参考方案3】：

对于每个浏览器，它使用自己的前缀，因此对于 chrome，它是 webkitGetUserMedia()

有关不同前缀的更多信息，请参见此处的 Mozilla 页面： https://developer.mozilla.org/en-US/docs/Web/API/Navigator.getUserMedia