在 unniapp 中,播放音频是没有单独的组件的,或者在插件市场下载封装好的插件,一般都会带有进度条等样式的封装。如果只是实现简单的播放功能,可以使用 createInnerAudioContext 这个 API
uni.createInnerAudioContext()
createInnerAudioContext 用来创建并返回内部 audio 上下文 innerAudioContext
对象。APP、H5、微信小程序都支持此方法。
使用的时候注意支持的格式:
另外如果项目中播放音频的路径是 http,而接口请求使用的是 https,可能会导致无法播放,可以在 index.html 中添加代码:
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"/>
代码实现
data 中定义变量
AUDIO: uni.createInnerAudioContext()
onLoad 中声明监听函数,比如,onPlay 表示音频进入可以播放状态,但不保证后面可以流畅播放,其它可参考相关 API 文档
this.AUDIO.onPlay(res => {
});
播放语音函数
playVoice(url) {
this.AUDIO.src = url;
this.$nextTick(function () {
this.AUDIO.play();
});
},
根据具体的需求选择对应的方法,比如常用的:
- play 播放
- pause 暂停
- stop 停止
- onPlay 音频播放事件
- onPause 暂停事件
- onStop 停止事件