移动网络应用程序上的语音记录答案

【问题标题】：Voice Record on Mobile Web Application移动网络应用程序上的语音记录
【发布时间】：2012-02-21 02:53:08
【问题描述】：

问题：
是否有可能通过某种技术将语音记录集成到移动网络应用程序中？

一些背景：
我一直在开发一个移动网络应用程序，只是为了我自己的享受和研究。客户端应用程序的 HTML5/CSS 和 JavaScript 似乎一切都很好，尽管看起来我需要第三方技术来录制语音。我有一个使用 Flash 的非常好的解决方案，但是在用我的 iPhone 对其进行测试后，我记得他们似乎不支持 flash，这令人失望，因为我有一个非常好的解决方案。

录音要求：
1. 必须同时适用于 iOS 和 Android。
2. 必须在最新版本的 Firefox、Google Chrome、Internet Explorer、Opera 和 Safari 中工作。
3. 必须在移动网络应用程序的框架内工作。
4. 必须能够在不主动连接到互联网的情况下进行录制。
5. 客户端应用程序不应要求用户更改其手机操作系统。

我试图尽可能具体，以帮助您准确回答这个问题。如果有任何不清楚的地方，请在下面的评论中告诉我，我会进一步澄清。

【问题讨论】：

你可能会使用电话间隙来做这样的事情。检查这篇文章。 stackoverflow.com/questions/11305129/…

标签： javascript iphone html mobile-website

【解决方案1】：

查看http://www.html5rocks.com/en/tutorials/getusermedia/intro/

HTML 媒体捕捉<input type="file">

适用于大多数移动浏览器，但效果不佳，因为它需要本地录制应用程序并且需要手动激活。

getUserMedia() 和 WebRTC

到目前为止，只有 Chromium 在移动设备上能很好地支持它。

所以，我放弃了网络应用。混合应用就是解决方案。

如果您想尝试使用混合应用进行录制，您可以查看我为混合应用中的录制任务创建的 Cordova 插件https://github.com/emj365/cordova-plugin-audio-recorder-api。

【讨论】：

【解决方案2】：

自从提出这个问题以来的几年里，似乎已经出现了一个解决方案。此解决方案以 MediaStreamConstraints 字典 audio 属性的形式出现。

来自 Mozilla 的 Web API 文档有一个非常好的示例，如下所示：

document.getElementById("startButton").addEventListener("click", function() {
  navigator.mediaDevices.getUserMedia({
    audio: true
  }).then(stream => audioElement.srcObject = stream)
    .catch(err => log(err.name + ": " + err.message));
}, false);

资源

https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamConstraints/audio

【讨论】：

【解决方案3】：

如果您想将其录制为音频，我认为您只能为 Chrome dev、Chrome canary、Opera next 和一些移动浏览器制作。使用 WebRTC getUserMedia() API 然后制作音频数据 URL 的 blob URL 以保存它。

如果您想将其记录为文本，也许您可以将<input -x-webkit-speech/> 用于 webkit 浏览器。制作一个事件，使其每次停止录制时都会将当前录制的语音添加到元素并重新开始录制。最后，制作一个 blob URL 以将其保存为文本文件。

【讨论】：