仅在iPad上的浏览器中录制音频

时间:2015-03-25 19:17:30

标签: ios html5 cordova ipad getusermedia

我正在与一个拥有Django网站的学校小组合作,该网站的页面允许用户按下按钮,录制音频,并将此音频保存到用户页面。本网站专为使用Dolphin浏览器的计算机和三星平板电脑而设计,使用HTML Media Capture通过在平板电脑上启动麦克风应用程序来捕获音频。该组织现在想要切换到iPad。我一直在研究从iPad上启动麦克风应用程序的方法,但似乎使用HTML5是不可能的。我做了一些研究并看到了下面的链接,但我不知道修改现有网站以使其在iPad上运行的最佳策略是什么。

允许该群组使用基于浏览器的网站从iPad录制音频(非视频)的最佳方法是什么?

研究 -

http://caniuse.com/#search=getUser - 显示getUserMedia无法在iPad上运行

http://www.html5audio.org/2012/11/capturing-audio-on-ios-6-via-the-videotag.html - 看起来非常h​​acky,它有用吗?

How to record and play voice in ios6 using HTML5 - 使用PhoneGap可能会有效,但是如何从浏览器启动录制应用,然后将音频保存回用户帐户?

谢谢,

2 个答案:

答案 0 :(得分:0)

Safari iOS(尚未)支持accept="audio/*"元素的<input>部分,即使它支持通过HTML Media Capture拍摄视频和图片。

iOS 10上的

<input type="file" accept="audio/*" >将提示用户选择:

  • 拍摄照片或视频
  • 照片库
  • iCloud Drive
  • 更多...

相同的代码在Android上的Chrome中运行良好。

iOS6中的Safari是第一个支持<input ... >元素的移动版Safari,我一直在测试iOS10。 iOS上的Chrome使用相同的渲染引擎,因此适用相同的限制。

答案 1 :(得分:0)

在遇到相同问题一年后,我发现了一篇新文章,给出了解决方法:How to record audio from a mobile web page on iOS and Android

  

MediaRecorder API是可用的较新的API之一。我第一次构建此应用程序的尝试始于此类。我实现了整个应用程序,并且在桌面上运行良好。捕获音频很容易,并且数据已经被压缩为.ogg格式,并可以发送到我的服务器了。然后我在iOS上尝试了它。事实证明,不支持MediaRecorder API,不能满足我的需求。在我停止诅咒苹果之后,我又从头开始了。

     

...这是使我能够构建工作演示的难题的最后一部分,它涉及三个步骤:
  1.捕获麦克风,以便我们开始录音
  2.将捕获的音频数据累积到一系列字节数组块中
  3.将这些块组合成一个大数组,并将该数组按摩为.wav文件的格式

网站上有一堆代码。这是演示文件:https://www.gmass.co/blog/wp-content/uploads/2018/03/wzrecorder.zip

我已经对其进行了测试,并且可以在iPad上运行。

演示: https://q2apro.github.io/wzrecorder/