【问题标题】:Record voice from IPhone using HTML5使用 HTML5 从 iPhone 录制语音
【发布时间】:2014-10-06 20:51:19
【问题描述】:

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

【问题讨论】:

    标签: javascript html google-chrome


    【解决方案1】:

    您可以尝试 HTML 媒体捕获。 article on dev.opera 说:

    Android OS 3.0 是第一个提供 HTML 媒体捕获的平台 支持,通过其默认的 Android Webkit 浏览器。现在 HTML 媒体 捕获也支持:

    • 适用于 iOS 6+ 的 Safari 和 Chrome 移动版
    • 适用于 Android OS 3+ 的 Chrome 手机
    • 适用于 Android OS 3+ 的 Firefox 移动版
    • 适用于 Android OS 3+ 的 Opera 16

    尽管如此,其中一些只是部分实现了规范或 实现一个旧的 W3C 规范,这使得上面的代码 略有不同:

    <input type="file" accept="image/*" capture="camera">
    <input type="file" accept="video/*" capture="camcorder">
    <input type="file" accept="audio/*" capture="microphone">
    

    它链接到a demo page,您可以在手机上试用。我还找到了this example page。不过,在我的 iOS 7 快速测试中,它只适用于照片和视频。


    编辑Further reading 建议 accept="audio/*" 在 iOS 6 和 7 上实际上不支持,仅支持 accept="image/*"accept="video/*"


    更新:对 iOS 8.3 的快速测试表明这里没有任何变化:支持 accept="image/*"accept="video/*",但不支持 accept="audio/*"


    更新:iOS 10.0.2 上的快速测试表明 accept="audio/*" 仍不受支持,尽管您现在似乎可以从 iCloud Drive 或 Dropbox 上传音频文件。


    更新:尽管在 the Webkit blog post 中说了什么,但我的 iPhone 5S 上的 iOS 10.3 中似乎仍然不支持 accept="audio/*"


    更新:iOS 11.0.3 中的情况相同。我的 iPhone 5S 上似乎仍然不支持accept="audio/*"


    更新:在 iOS 12.4.3 中仍然相同。我的 iPhone 5S 似乎不支持accept="audio/*"

    【讨论】:

    • 照片和视频捕捉不是什么大问题。我在使用 HTML5 仅录制音频时遇到问题。
    • 如何获得录音机选项,因为此选项即将到来。 dev.opera.com/articles/media-capture-in-mobile-browsers
    • @BilalAhmed 根据webmonkey.com/2012/09/…,它只支持videoimage,这在iOS7 中似乎没有改变:-( 我能想到的最好的解决方法是拥有用户录制视频,上传,然后使用服务器端处理从视频中提取音频?
    【解决方案2】:

    这不适用于网站,但如果您想使用 Cordova 将您的网络应用程序重新设计为移动应用程序,这将允许您使用麦克风输入。需要一些网络音频 api 知识才能开始工作。

    https://github.com/edimuj/cordova-plugin-audioinput

    然后 RecorderJS 来记录它的输出:

    https://github.com/mattdiamond/Recorderjs

    上面有人提到 RecorderJS 不能在移动设备上工作,但确实可以,只是麦克风输入不起作用。

    目前我知道没有任何方法可以在移动浏览器中记录麦克风输入

    【讨论】:

      【解决方案3】:

      您可以使用 HTML5 WebAudio API

      音视频介绍capturing Capture audio & video in HTML5

      用样本录制音频的好图书馆Recorder.js

      【讨论】:

      • 工作示例链接未打开。
      • 试试这个 Recorder.js 链接很简单
      • Recorder.js 在电脑上运行良好,但在移动设备上不行。
      • 问题要求IPHONE,IOS不支持
      【解决方案4】:

      在 webkit 浏览器(即 iOS 中的 Chrome 和 Safari)上,您可以使用带有 webkitGetUserMedia 的 get user media api。 详细信息可以在这里找到 : html5rocks

      【讨论】:

      • 根据caniuse.com/stream,iOS Safari 尚不支持。不过,您也许可以使用 HTML 媒体捕获,在同一篇文章的前面提到:&lt;input type="file" accept="audio/*;capture=microphone"&gt;。 (额外的挑剔:Chrome 和 Opera 不再使用 Webkit - 他们前一段时间分叉,现在使用 Blink。)
      • 感谢@OllyHodgson 提供的最新信息... :)
      • 您有完整的工作解决方案吗?我试过很多,但它们只能在电脑上工作,不能在手机上工作。
      • 正如上面的评论,移动设备似乎仍然不支持这个......这是一个完整的工作演示,但供参考:webaudiodemos.appspot.com/AudioRecorder/index.html
      • 这个链接在电脑上可以正常工作,但在手机上还是不行。我有一个问题,麦克风访问如何在移动浏览器中的 www.google.com(用于语音库搜索)中工作?
      猜你喜欢
      • 1970-01-01
      • 2014-08-28
      • 2017-07-02
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-05-29
      • 2011-12-09
      相关资源
      最近更新 更多