HTML5 录音

Posted 2023-02-25

【中文标题】HTML5 录音

【英文标题】：HTML5 Audio Recording

【发布时间】：2016-07-26 07:24:19

【问题描述】：

我想在最近的一个项目中使用音频捕获插件。我发现 Matt Diamond 的努力是通过 demo here 找到的，因为大多数文章都指向这里。我尝试在本地重新创建这个相同的演示，但没有运气。

我包含了每个依赖项，例如演示。 Aslo 更改了 recorder.js 中的 WorkerPath，但似乎没有任何效果。

请分享您的经验。非常感谢任何指向解决方案的指针。

谢谢。

【问题讨论】：

你有一个codepen和尝试过的代码吗？

感谢 Asim 抽出宝贵时间。您可以查看演示的页面源代码。我有完全相同的东西。具有相同的目录结构。

控制台有错误吗？有时，当您打开纯 html 时，浏览器会阻止您引用外部本地文件。您是否从服务器提供文件？

不，我也已经检查过了。控制台一清二楚。

您是从服务器提供文件吗？签出此github.com/chris-rudmin/Recorderjs

【参考方案1】：

你可以试试这个 HTML：

https://raw.githubusercontent.com/mattdiamond/Recorderjs/master/examples/example_simple_exportwav.html

还有这个 JS：

https://raw.githubusercontent.com/mattdiamond/Recorderjs/master/dist/recorder.js

这也没有保存按钮。但它会显示JS的状态。

示例取自recorderJS的官方repo (https://github.com/mattdiamond/Recorderjs)。

我认为您错过了示例中的一些脚本。

【讨论】：

效果很好！达到目的。

【参考方案2】：

我认为你需要在你的机器上有一个本地主机才能工作。如果你不知道怎么做，那并不难。我有一个 OSX，我使用 MAMP，它也适用于 Windows。您需要做的就是：

1- 安装 MAMP

2- 将文件复制到MAMP/htdocs/

3- 打开 MAMP 并启动服务器

4- 访问 //localhost:8888 或 //localhost 就是这样。

让我知道它是否有效。

顺便说一句，你从哪里下载的项目文件？我没有找到它们，在我的电脑上测试。

【讨论】：

我正在使用 wamp。在本地主机上测试

Sandrina，我错误地从本地目录而不是本地目录访问项目。它显示响应输入的音频图，但保存选项仍然不起作用

你能告诉我在哪里可以下载项目以在我的计算机上进行模拟吗？

你可以在这里下载dropbox.com/s/96fhjzrjne9ymkt/htmlaudiodemo.zip?dl=0

我在我的电脑上试过了，我和你有同样的问题。也许它从您的下载中丢失了一些代码：/

【参考方案3】：

我们不久前为一个项目做过此操作，您需要在 chrome 中启用一些标志才能使其正常工作，Legacy Audio Pipelining 就是其中之一。如果您需要其余的，我可以检查。

【讨论】：

感谢 Max 抽出宝贵时间发表评论。我可以按照以下 Asim 的说明录制和播放声音。