更新记录

2.2.51（2021-02-04） 下载此版本

增加错误提示

2.2.5（2021-01-22） 下载此版本

• 修复续播问题
• 修复异步加载并渲染问题

2.2.4（2021-01-18） 下载此版本

• 增加loading效果
• 增加加载时的回调
• 修改节流触发播放时回调

平台兼容性

uniapp-zaudio 背景音频播放组件

当前版本v2.2.51, 查看版本console.log(ZAudio.version)

预览

http://jingangtui.gitee.io/uniapp-z-audio/#/

若文档展示不全,请查看gitee或下载示例

特性

• 支持 H5, app, 微信小程序播放
• 支持背景音频播放
• 支持多页面同步状态
• 支持 3 种 UI 样式
• 支持来电中断后续播
• 支持同一个音频回调中注册多个业务事件(v2.1.0 后版本)

简要说明

• 插件分为ZAudio类和 zaudio 组件, ZAudio类处理音频播放逻辑, zaudio组件用于渲染
• ZAudio基于uni.getBackgroundAudioManager和uni.createInnerAudioContext创建
• 示例在 app 运行时,注意开启网络权限,若不显示数据则重启 app 应用,或者检查网络权限问题
• v2.0 版本依赖vuex, v2.1.0 后版本不依赖 vuex, 建议下载最新版本
• 如果你觉得这个项目不错, 或是想增加新功能 欢迎Star Fork PR

使用步骤

1. 插件市场下载 或 npm install uniapp-zaudio;

2. 实例化 ZAudio类 并挂载

注意大小写:ZAudio是类

HbuilderX插件导入方式, import可能需要修改目录名哦

import ZAudio from '@/components/uniapp-zaudio' //HbuilderX插件导入方式, import可能需要修改目录名哦
// import ZAudio from 'uniapp-zaudio' // npm引用方式

let zaudio = new ZAudio({
  continuePlay: true, //续播
  autoPlay: true, //自动播放 部分浏览器不支持
});
Vue.prototype.$zaudio = zaudio; //挂载vue原型链上

//模拟音频初始数据,切勿业务中使用
var data = [
  {
    src:
      "https://96.f.1ting.com/local_to_cube_202004121813/96kmp3/zzzzzmp3/2016aJan/18X/18d_DeH/01.mp3",
    title: "恭喜发财",
    singer: "刘德华",
    coverImgUrl:
      "https://img.1ting.com/images/special/75/s150_f84ef5082b0420f74cd2546b986ab0fc.jpg",
  },
  {
    src:
      "https://96.f.1ting.com/local_to_cube_202004121813/96kmp3/zzzzzmp3/2015kNov/25X/25m_XiaoQ/03.mp3",
    title: "好运来",
    singer: "作者1111",
    coverImgUrl:
      "https://img.1ting.com/images/special/204/s150_77254cd4a4da1a33b8faf89c4cbf6e40.jpg",
  },
];
zaudio.setAudio(data); //添加音频
zaudio.setRender(0)//渲染第一首音频

3. 引用组件

注意大小写:zaudio是组件

<zaudio theme="theme3"></zaudio>

import zaudio from '@/components/uniapp-zaudio/zaudio';
// import zaudio from 'uniapp-zaudio/zaudio'
export default {
  components: { zaudio: zaudio },
};

< zaudio > 组件参数配置

• 用法示例:

  <zaudio theme="theme1"  themeColor="#42b983" />

ZAudio对象的参数和实例方法

• 用法示例:

初始化ZAudio类, 并渲染音频

let zaudio = new ZAudio({
  continuePlay: true, //续播
  autoPlay: true, //自动播放 部分浏览器不支持
});
var data = [
  {
    src:
      "https://96.f.1ting.com/local_to_cube_202004121813/96kmp3/zzzzzmp3/2016aJan/18X/18d_DeH/01.mp3",
    title: "恭喜发财",
    singer: "刘德华",
    coverImgUrl:
      "https://img.1ting.com/images/special/75/s150_f84ef5082b0420f74cd2546b986ab0fc.jpg",
  },
  {
    src:
      "https://96.f.1ting.com/local_to_cube_202004121813/96kmp3/zzzzzmp3/2015kNov/25X/25m_XiaoQ/03.mp3",
    title: "好运来",
    singer: "作者1111",
    coverImgUrl:
      "https://img.1ting.com/images/special/204/s150_77254cd4a4da1a33b8faf89c4cbf6e40.jpg",
  },
];

// 设置音频数据
zaudio.setAudio(data)
//渲染第一首音频
zaudio.setRender(0)

异步加载

setTimeout(()=>{
    zaudio.setAudio(data);
    zaudio.operate(0); //手动去渲染第1首音频
},2000)

音频回调事件中注册业务

• 音频事件会触发不同的回调(如播放回调, 暂停回调), 而一个回调中允许注册多个互不影响的业务事件
• zaudio.on(event, action, fn): 注册业务事件
• zaudio.off(event, action): 卸载业务事件, 页面卸载时可以卸载不必要的业务事件, 这样可以提高页面性能
• event: 回调方法名,具体表格如下
• action: 自定义的业务名, 一个业务名在同一个音频回调中只能注册一次, 多次注册不会被覆盖
• fn: 触发的业务函数, 部分回调会实时返回当前播放的状态, 见下表

• 用法示例:

一个playing回调,触发两个业务事件

    onLoad(query) {
        //playing回调, 注册`event-a`和`event-b`两个打印事件
        this.$zaudio.on('playing', 'event-a', data => {
            console.log(data,'event-a')
        });
        this.$zaudio.on('playing', 'event-b', data => {
            console.log(data,'event-b')
        });
    },

    destroyed(){
            //页面卸载时卸载业务, 提高页面性能
        this.$zaudio.off('playing', 'event-a')
        this.$zaudio.off('playing', 'event-b')
    }

实时渲染当前播放状态到zaudio组件

• 适用情况: 当zaudio组件渲染了非当前播放的数据, 且需要实时渲染当前的播放状态时
• 用法示例:

  onShow(){
  //实时渲染当前的播放状态
  this.$zaudio.syncRender();
  },

实时获取音频播放状态和属性

• 由于v2.1.x之后版本不依赖vuex, 音频状态需要使用syncStateOn方法来实时监听获取

• syncStateOn(action, fn): 注册一个获取音频播放状态和属性的事件

• syncStateOff(action): 卸载获取音频播放状态和属性的事件, 页面卸载时卸载该事件, 这样可以提高页面性能

• action: 自定义业务名, 用于区分多个不同的实时获取音频播放状态和属性事件

• fn: 实时获取音频播放状态和属性的回调, 回调参数见音频对象属性

• 用法示例:

data(){
    return {
            audiolist: this.$zaudio.audiolist, //当前音频列表
            playIndex: this.$zaudio.playIndex, //当前播放的索引
            paused: this.$zaudio.paused, //当前是否暂停
            playinfo: this.$zaudio.playinfo //当前播放的信息

    }
}
onShow(){
    //获取音频播放状态和属性
    this.getAudioState();
},
methods:{
    getAudioState() {
        //注册page-index-get-state, 实时获取zaudio属性状态
        this.$zaudio.syncStateOn('page-index-get-state', ({ audiolist, playIndex, paused, playinfo }) => {
            this.audiolist = audiolist;
            this.playIndex = playIndex;
            this.paused = paused;
            this.playinfo = playinfo;
        });
    }
},
onHide(){
    //卸载page-index-get-state,提高页面性能
    this.$zaudio.syncStateOff('page-index-get-state')
}

音频对象属性

• 用法示例:

  let zaudio = new ZAudio();
  console.log(zaudio.audiolist); //获取当前的音频列表数据
  console.log(zaudio.renderIndex); //获取当前zaudio组件渲染音频的索引值

  注意: 上面的获取的属性不是实时的状态, 实时获取见实时获取音频播放状态和属性

背景播放配置

在 manifest.json 中配置 小程序

 "mp-weixin" : {
        "requiredBackgroundModes" : [ "audio" ],
        "appid" : "",
        "setting" : {
            "urlCheck" : false
        },
        "usingComponents" : true
    }

注意 ios 端需要打包 ipa 才生效 iOS

"ios" : {
    "UIBackgroundModes" : [ "audio" ]
}

如果你觉得这个项目不错, 或是想增加新功能 欢迎Star Fork PR