Question

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

一些背景：
我一直致力于移动网络应用程序，仅供我自己享受和研究。对于客户端应用程序来说，一切似乎都在使用HTML5 / CSS和JavaScript工作，虽然看起来我需要第三方技术进行录音。我有一个非常好的解决方案与Flash合作，但在用我的iPhone测试之后，我记得他们似乎不支持闪存这是令人失望的，因为我有一个非常好的解决方案。

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

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

Answer 1

似乎在提出这个问题后的几年里，一个解决方案已经浮出水面。此解决方案以 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

Answer 2

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

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

Answer 3

选中此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。

移动Web应用程序上的语音记录

3 个答案: