小程序使用webview开发音频播放功能实践
发布于 1 年前 作者 tao45 1106 次浏览 来自 分享

小程序使用webview开发音频播放功能实践

这几天一直做跟音频相关的开发工作,遇到了不少坑,总结下

1、场景

由于我的小程序产品展示的音频具有很高的价值,属于核心产品(靠这吃饭),所以我对音频文件进行了加密处理,在音频解密过程中,使用了WebAssembly

但是目前微信原生小程序对WebAssembly这个支持并不好,很多特性尚未支持,经过几天的调研发现原生小程序并不支持我的加密音频的播放

所以我的方案是

通过H5开发音频播放的场景,用小程序webview集成进来

2、问题

目前使用webview h5audio 做音频播放遇到的问题

在小程序息屏后,音频会暂停播放,包括小程序切后台、手机息屏

3、目前的方案

目前我对产品做了妥协,在安卓端通过解码,最后通过 html5 的audio标签来播放

由于在安卓端,我的解码播放器可以在息屏后正常播放,所以我采用了不同端不同的实现方式

1)安卓端,使用我自研的WKPlayer,通过JS进行播放控制;

2)苹果端,使用先把解密音频解码,最后通过html5 audio播放,此时息屏后,会暂停播放,需要用户点击后台的音频播放按钮,保证可持续播放。

4、遇到的问题

切后台后音频播放的状态跟webview里面h5audio播放状态的同步,我没有直接展示audio,而是定制化了音频的播放界面

遇到很多问题罗列下

1)在ios手机里面canplay不触发问题,这样就拿不到音频的时长

2)音频播放状态的同步

3)多个页面切换时,播放音频的展示问题

4)返回到小程序后,音频如何可持续播放问题

图片占位

回到顶部