uniapp-z-audio v1.0.0

uniapp 音频后台播放组件

特性

• 支持H5, app, 微信小程序播放
• 支持切换后台播放
• 支持来电中断后续播
• 支持全局多页面同步播放状态

预览

使用步骤

1. 引入挂载ZAudio

import { ZAudio } from 'components/zaudio/index.js'
Vue.use(ZAudio)

2. 配置vuex中的ZAudioStore

import { ZAudioStore } from "@/components/zaudio/index.js";
const store = new Vuex.Store({
	modules: {
		// zaudio数据
		ZAudioStore,

		//这是模拟的其他数据
		other: {
			state: {
				a: '123'
			}
		}
	}
})

3. 小程序或app中引入zaudio局部组件 (h5已使用全局组件,无需此步)

import zaudio from '@/components/audio/zaudio.vue';
//...省略
export default {
	components:{zaudio},
}

4. 使用组件

• <zaudio theme="theme3" :autoplay="false" :continue="true" ref="zaudio"></zaudio>
• 配置mapMutations和mapGetters (详见下面文档和示例)

5. 设置音频列表:

   set_audiolist({
     data:[
   			   {
   				src: '',     //地址
   				title: '',     //标题
   				singer: '',      //作者
   				coverImgUrl: ''     //封面
   			   }
   		   ],
   		status: true      //true->更新audiolist false->覆盖audiolist
   })

常用方法

1. 指定zaudio渲染某首音频:

   • 方法1: 指定索引 key为audiolist数组中某个索引值

   this.set_renderIndex(key);  

   • 方法2: 指定播放信息 参数为audiolist数组中某条数据

   this.set_audio(this.audiolist[key]);  

2. 指定zaudio播放或暂停

   • 播放或暂停当前渲染的音频
   • 需放在set_renderIndex 或 set_audio之后使用
   • 播放暂停会自动判断

   • 参数true为固定值

     			 <zaudio ref="zaudio"></zaudio>
     			 this.$refs.zaudio.operation(true);    
     			```
     	

3. 同步渲染当前播放状态:
   例如: audiolist中有A和B两首歌, 当前处于列表页,列表页中zaudio渲染且播放歌曲A, 这时跳转详情页面,zaudio组件渲染歌曲B的信息,但未播放, 返回列表页需要看到当前A歌曲的播放状态.

   	```javascript
   	...mapGetters(['playIndex'])  //获取当前播放音频的索引值
   	this.set_renderIndex(this.playIndex);  //渲染当前播放音频的状态
   	```

组件参数配置

mapMutations与 mapGetters

• mapMutations:

  • set_renderIndex: 设置zaudio组件渲染的索引值和渲染信息

  用法:
  渲染列表索引为2的数据

  set_renderIndex(2)

  • set_audiolist: 设置音频列表数据

    用法:
    @params status Boolean true->更新audiolist false->覆盖audiolist @params data Array 列表数据

    set_audiolist({
    			   data:[
    					   {
    						src: '',     //地址
    						title: '',     //标题
    						singer: '',      //作者
    						coverImgUrl: ''     //封面
    					   }
    				   ],
    				status: true       //true->更新audiolist false->覆盖audiolist
    })

  • set_audio: 设置zaudio组件当前渲染的音频信息, 若音频信息包含在audiolist中, 则会更新renderIndex

  用法: 更新zaudio展示的数据

  set_audio({
  		   	src: '',     //地址
  		   	title: '',     //标题
  		   	singer: '',      //作者
  		   	coverImgUrl: ''     //封面
  		   });

  • set_playinfo: 设置当前音频播放信息(具体开发时不需要用到)

  用法: 更新当前正在播放的数据, 不会影响zaudio的展示

  set_playinfo({
  			src: '',
  			title: '',
  			singer: '',
  			coverImgUrl: '',
  			duration: '',
  			duration_value: ''
  		});

  • set_pause: 设置当前音频暂停状态(具体开发时不需要用到)

  用法: 更新为意外中断状态, 不会直接暂停音频,只是记录状态

  set_pause(true);

  • set_n_pause: 设置当前音频意外中断状态(具体开发时不需要用到)

  用法: 更新为播放状态, 不会直接暂停音频,只是记录状态

  set_n_pause(false);

• mapGetters:

  • audiolist: 返回音频列表数据
  • playinfo: 返回当前正在播放的数据
  • playIndex: 返回当前正在播放的数据索引值
  • n_pause: 返回意外中断状态
  • paused: 返回音频暂停状态
  • renderIndex: 返回zaudio组件渲染的索引值
  • audio: 返回zaudio组件当前渲染的音频信息
  • renderIsPlay: 返回判断渲染与播放是否是同一首音频

切换后台播放配置

在manifest.json中配置 小程序

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

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

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

更新日志

v1.0.0

• 简化使用方式

v0.0.55

• set_audiolist方法加入status参数,区分是否记录列表数据

v0.0.54

• 修复H5端切换歌曲报错问题

v0.0.53

• 修复android端切换歌曲报错问题

v0.0.52

• 增加getters:renderIsPlay
• 修复快进失效, 进度条拖动错误问题

v0.0.51

• 拆分store, 调整使用步骤

v0.0.5

• 修复多次创建监听$audio事件的问题
• 拆分渲染组件与播放音频的索引值
• 播放状态移入vuex中管理
• 增加手动指定播放与多页面共享播放状态的示例

v0.0.43

• 修复进度条不同步的bug
• 替换音频链接

v0.0.42

• 增加theme3主题

v0.0.41

• 支持下一首续播

v0.0.4

• 增加自动播放
• theme1主题修改
• 增加音频切换
• 主题参数变更为theme1和theme2
• 完善使用文档

v0.0.32

• 增加音频列表更新, 切换主题的示例

v0.0.3

• 增加主题选择, 自定义主题色, 隐藏快进按钮

v0.0.1

• 支持 h5, app, 微信小程序播放
• 支持小程序, app 后台播放
• 支持来电中断后续播(app 端)

如果你觉得这个项目不错, 欢迎STAR!