uniapp 音频播放

1,310 阅读1分钟

在 unniapp 中,播放音频是没有单独的组件的,或者在插件市场下载封装好的插件,一般都会带有进度条等样式的封装。如果只是实现简单的播放功能,可以使用 createInnerAudioContext 这个 API

uni.createInnerAudioContext()

createInnerAudioContext 用来创建并返回内部 audio 上下文 innerAudioContext 对象。APP、H5、微信小程序都支持此方法。

使用的时候注意支持的格式:

image.png

另外如果项目中播放音频的路径是 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 停止事件