小程序使用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）返回到小程序后，音频如何可持续播放问题✖

图片占位