html5图库拍照分离及语音录制播放调研

------------发布日期20170714----------

html5  不断发展中，技术更新快，记录时间是个好习惯。

背景:IOS对html5的支持很不好，导致html5的发展受限，为此法国一家公司曾起诉过苹果，至于结果，不得而知。

图库拍照分离：

这个问题，在html5上存在兼容问题。

普遍的解决方案如下：

相册：
<input type="file" name="file" accept="image/*" >
相机：
<input type="file" name="file"  capture="camera">

但是测试过，及时在安卓上也有兼容问题。

因此，用html5来实现此需求的尝试作罢。

语音录制：

知乎上有一篇文章对此做了详细说明：

https://www.zhihu.com/question/21269447

如果是微信开发，可以实现。

如果是自建web app，只能在安卓上实现，不兼容IOS。

如果使用混合开发，可以通过js+cordova+原生接口的方式实现。具体步骤如下：

1. 用cordova封装成android应用，cordova官网上有详细介绍
2.实现js和android原生语言java的通信（google有介绍）
3.调用原生语言实现录音功能（mediaRecorder类），录音格式为 amr格式

（android本身支持的语言）
4.回调js方法，把amr文件地址传给phonegap，利用phonegap读取录音文件并上

传到服务器端
4.服务器端利用ffmpeg2theora 将amr转为html5支持的音频格式ogg
5.接下来读取文件，利用html5的audio 播放ogg文件。。

这是理论的说法，具体实现，正在尝试中。

语音播放：

<audio controls="controls">
 
  <source src="video/song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>