自定义音频组件 - 更新日志
1.0.6(2023-07-25)
日志更新
音频-拖动-倍速-自动播放-兼容ios和安卓
用法
<!-- v-if='mediaId==mediaList[mediaIndex].id'确保切换时组件可以被销毁 -->
<template v-if='mediaId==mediaList[mediaIndex].id'>
<class-audio
:classTitle="classTitle"
:currentMedia="mediaList[mediaIndex]"
:mediaIndex="mediaIndex"
@change="mediaChange"
@durationsChange="durationsChange">
</class-audio>
</template>
export default {
data() {
return {
mediaList:[
{
durations:0,
id: 1341,
title: "音频1",
url: "https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3",
viewing_record: 0
},
{
durations: 0,
id: 1342,
title: "音频2",
url: "https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3",
viewing_record: 0
},
{
durations: 0,
id: 1343,
title: "音频3",
url: "https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3",
viewing_record: 0
}
],
mediaIndex:0,
classTitle:'课程名称',
mediaId:0,
}
},
methods: {
mediaChange(step){
const mindex = this.mediaIndex
if(step === -1 && mindex === 0){
uni.showToast({
title: "当前是第一节哦~",
icon: "none",
});
return;
}
if (step === 1 && mindex === this.mediaList.length - 1) {
uni.showToast({
title: "没有更多了~",
icon: "none",
});
return;
}
this.mediaIndex = mindex+step
this.$nextTick(()=>{
this.mediaId = this.mediaList[this.mediaIndex].id
})
},
durationsChange(params){
const {
durations,
currentMedia,
} = params;
console.log(params,'params')
},
},
}
props
参数名 | 说明 | 类型 | 默认值 |
---|---|---|---|
mediaList | 音频信息 | {} | 必 |
classTitle | 课程名 | String | 必 |
@change | 切换上一节下一节 | function | |
@durationsChange | 播放时间记录 | function |
1.0.5(2023-07-25)
优化onCanplay里面赋值duration赋值问题
音频-拖动-倍速-自动播放-兼容ios和安卓
用法
<!-- v-if='chapterId==chapterList[chapterIndex].id'确保切换时组件可以被销毁 -->
<template v-if='chapterId==chapterList[chapterIndex].id'>
<class-audio
:classTitle="classTitle"
:currentMedia="mediaList[mediaIndex]"
:mediaIndex="mediaIndex"
@change="mediaChange"
@durationsChange="durationsChange">
</class-audio>
</template>
export default {
data() {
return {
mediaList:[
{
durations:0,
id: 1341,
title: "音频1",
url: "https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3",
viewing_record: 0
},
{
durations: 0,
id: 1342,
title: "音频2",
url: "https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3",
viewing_record: 0
},
{
durations: 0,
id: 1343,
title: "音频3",
url: "https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3",
viewing_record: 0
}
],
mediaIndex:0,
classTitle:'课程名称',
}
},
methods: {
mediaChange(step){
const mindex = this.mediaIndex
if(step === -1 && mindex === 0){
uni.showToast({
title: "当前是第一节哦~",
icon: "none",
});
return;
}
if (step === 1 && mindex === this.mediaList.length - 1) {
uni.showToast({
title: "没有更多了~",
icon: "none",
});
return;
}
this.mediaIndex = mindex+step
},
durationsChange(params){
const {
durations,
currentMedia,
} = params;
console.log(params,'params')
},
},
}
props
参数名 | 说明 | 类型 | 默认值 |
---|---|---|---|
mediaList | 音频信息 | {} | 必 |
classTitle | 课程名 | String | 必 |
@change | 切换上一节下一节 | function | |
@durationsChange | 播放时间记录 | function |
1.0.4(2023-07-24)
优化报错
1.0.3(2023-05-10)
音频-拖动-倍速-自动播放-兼容ios和安卓
用法
<!-- v-if='chapterId==chapterList[chapterIndex].id'确保切换时组件可以被销毁 -->
<template v-if='chapterId==chapterList[chapterIndex].id'>
<class-audio
:classTitle="classTitle"
:chapterInfo="chapterList[chapterIndex]"
:brandType='brandType'
@classAudioChange='classAudioChange'
@chapterEnd='chapterEnd'
@audioTimeUpdate='audioTimeUpdate'>
</class-audio>
</template>
export default {
data() {
return {
chapterList:[
{
durations:200,
id: 1341,
title: "音频1",
url: "https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3",
viewing_record: 0
},
{
durations: 300,
id: 1342,
title: "音频2",
url: "https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3",
viewing_record: 0
}.
{
durations: 400,
id: 1343,
title: "音频3",
url: "https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3",
viewing_record: 0
}
],
chapterIndex:0,
classTitle:'课程名称',
brandType:'',
time:0, //音频播放时间
chapterId:null
}
},
onLoad() {
const res = uni.getSystemInfoSync();
console.log("获取系统信息成功: ", res.platform);
this.brandType = res.platform
// 接口获取到章节信息
this.chapterId = this.chapterList[this.chapterIndex].id
},
methods: {
// 音频切换
classAudioChange(type){
//音频切换时,可以在这里保存当前音频播放时间
if(this.time>0){
this.chapterList[this.chapterIndex].viewing_record = this.time
this.time = 0
}
//上一节
if (type == 'pre') {
if(this.chapterIndex>0){
this.chapterIndex--
}
}
//下一节
if (type == 'next') {
if(this.chapterIndex<this.chapterList.length-1){
this.chapterIndex++
}
}
},
// 播放结束
chapterEnd(){
// 这里是监听到音频播放结束了,可以在这里做自动切换下一节的动作
if(this.chapterIndex<this.chapterList.length-1){
this.chapterIndex++
}
},
// 播放时间记录
audioTimeUpdate(value){
// 播放时间记录:value.durations 时间 value.percent 进度百分比
this.time = Math.floor(value.durations)
this.percent = value.percent //传给后端用于保存进度
}
},
}
props
参数名 | 说明 | 类型 | 默认值 |
---|---|---|---|
chapterInfo | 课程章节信息 | {} | 必输 |
classTitle | 课程名 | String | 必输 |
brandType | 手机系统 | String | '' |
@classAudioChange | 切换上一节下一节 | function | |
@chapterEnd | 播放结束 | function | |
@audioTimeUpdate | 播放时间记录 | function |
1.0.2(2022-08-10)
用法
<!-- v-if='chapterId==chapterList[chapterIndex].id'确保切换时组件可以被销毁 -->
<template v-if='chapterId==chapterList[chapterIndex].id'>
<class-audio
:classTitle="classTitle"
:chapterInfo="chapterList[chapterIndex]"
:brandType='brandType'
@classAudioChange='classAudioChange'
@chapterEnd='chapterEnd'
@audioTimeUpdate='audioTimeUpdate'>
</class-audio>
</template>
export default {
data() {
return {
chapterList:[
{
durations: 1057,
id: 134138,
title: "章节名称",
url: "音频连接",
viewing_record: 0
},
{
durations: 1057,
id: 134138,
title: "章节名称",
url: "音频连接",
viewing_record: 0
}.
{
durations: 1057,
id: 134138,
title: "章节名称",
url: "音频连接",
viewing_record: 0
}
],
chapterIndex:0,
classTitle:'课程名称',
brandType:'',
time:0, //音频播放时间
chapterId:null
}
},
onLoad() {
const res = uni.getSystemInfoSync();
console.log("获取系统信息成功: ", res.platform);
this.brandType = res.platform
// 接口获取到章节信息后
this.chapterId = this.chapterList[this.chapterIndex].id
},
methods: {
// 音频切换
classAudioChange(type){
//音频切换时,可以在这里保存当前音频播放时间
if(this.time>0){
this.chapterList[this.chapterIndex].viewing_record = this.time
this.time = 0
}
//上一节
if (type == 'pre') {
if(this.chapterIndex>0){
this.chapterIndex--
}
}
//下一节
if (type == 'next') {
if(this.chapterIndex<this.chapterList.length-1){
this.chapterIndex++
}
}
},
// 播放结束
chapterEnd(){
// 这里是监听到音频播放结束了,可以在这里做自动切换下一节的动作
if(this.chapterIndex<this.chapterList.length-1){
this.chapterIndex++
}
},
// 播放时间记录
audioTimeUpdate(value){
// 播放时间记录:value.durations 时间 value.percent 进度百分比
this.time = Math.floor(value.durations)
this.percent = value.percent //传给后端用于保存进度
}
},
}
props
参数名 | 说明 | 类型 | 默认值 |
---|---|---|---|
chapterInfo | 课程章节信息 | {} | 必输 |
classTitle | 课程名 | String | 必输 |
brandType | 手机系统 | String | '' |
@classAudioChange | 切换上一节下一节 | function | |
@chapterEnd | 播放结束 | function | |
@audioTimeUpdate | 播放时间记录 | function |
1.0.1(2022-08-09)
音频-拖动-倍速-自动播放-兼容ios和安卓
用法
<class-audio :classTitle="classTitle" :chapterInfo="chapterInfo" :brandType='brandType' @classAudioChange='classAudioChange' @chapterEnd='chapterEnd' @audioTimeUpdate='audioTimeUpdate'>
props
参数名 | 说明 | 类型 | 默认值 |
---|---|---|---|
chapterInfo | 课程章节信息 | {} | 必输 |
classTitle | 课程名 | String | 必输 |
brandType | 手机系统 | String | '' |
@classAudioChange | 切换上一节下一节 | function | |
@chapterEnd | 播放结束 | function | |
@audioTimeUpdate | 播放时间记录 | function |
chapterInfo:{ durations: 1057 总时长 id: 134138 title: "章节名称" url: "音频连接" viewing_record: 0 播放记录 }
事件
//上一节下一节切换
classAudioChange(type){ if (type == 'pre') { 上一节 } if (type == 'next') { 下一节 } }
//播放结束
chapterEnd(){ 播放结束 }
//播放时间记录
audioTimeUpdate(value){ 播放时间记录:value this.time = Math.floor(value.durations) 时间 this.percent = value.percent 进度百分比
}