<template>
<view v-if='url' class='audio' >
<view class='mr-3' @click='start'>
<image src='../../static/play.png' class='icon' v-show='!status'></image>
<image src='../../static/stop.png' class='icon' v-show='status'></image>
</view>
<view class="flex">
<view class="flex-1">
{{title}}
</view>
<view v-if="show">
<slider style="touch-action: none;" @change='changeAudio'
activeColor='#0E7EFC' :disabled="audioDisabled"
:min='0' :max='duration.toFixed(0)' block-size='12'
:value='currentTime.toFixed(0)' :step='0.1'>
</slider>
</view>
<view v-if="!show" style="height: 60rpx;"></view>
<view class='flex-2'>
<view class='ml-3'>{{getTime(Math.round(currentTime))}}</view>
<view class='ml-3'>{{getTime(Math.round(totalTime))}}</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
context: null,
currentTime: 0,
duration: 100,
totalTime:'',
status: false,
audioDisabled:true,
url:'/static/Taylor Swift - Blank Space [mqms2].mp3',
title:'泰勒·斯威夫特',
show:true,
runTime:0,
};
},
created() {
this.context = uni.createInnerAudioContext();
this.context.src = this.url;
this.context.startTime = 0;
this.currentTime = 0;
this.onTimeUpdate();
this.onCanplay();
this.onPause();
this.onEnded();
uni.$on('stop',()=> {
this.context.stop();
this.status = false;
})
},
onHide() {
uni.$emit("stop");
},
onUnload() {
uni.$emit("stop");
},
methods:{
start() { //点击播放
if(this.status) {
this.context.pause();
this.status = !this.status;
}else {
// uni.$emit('stop')
this.context.play()
this.status = !this.status;
}
},
onCanplay() { //进入可播放状态
this.context.onCanplay(() => {
console.log("播放的时长",this.context.duration);
this.totalTime = this.context.duration;
setTimeout(()=>{
this.duration = this.context.duration;
},1000)
})
},
onPause(){ //监听暂停状态
this.context.onPause(()=>{
console.log("点击暂停了");
//调接口保存学习进度
})
},
onTimeUpdate() { //音频播放进度
this.context.onTimeUpdate(() => {
console.log("播放进度",this.currentTime);
if (!Number.isFinite( this.context.duration)) {
this.context.currentTime = Number.MAX_SAFE_INTEGER;
this.context.currentTime = 0;
} else {
this.duration = this.context.duration;
this.currentTime = this.context.currentTime;
this.runTime = this.context.currentTime;
}
})
},
onEnded() { //播放结束
this.context.onEnded(()=> {
//调接口保存学习进度
this.status = false;
this.currentTime = 0;
})
},
changeAudio(e) {
let paused = this.context.paused;
this.context.pause();
this.context.seek(e.detail.value)
if(!paused) {
this.context.play();
}
},
getTime(time) {
let h = parseInt(time / 60 /60);
let m = parseInt(time / 60);
let s = time % 60;
return this.towNum(h) + ':' + this.towNum(m) + ':' + this.towNum(s);
},
towNum(num) {
if(num >= 10) {
return num;
}else {
return '0' + num;
}
}
}
}
</script>
<style lang="scss">
.audio {
background: #F4F4F4;
padding: 20rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.mr-3 {
margin-right: 20rpx;
.icon {
width: 70rpx;
height: 70rpx;
}
}
.flex {
flex: 1;
.flex-1 {
text-align: left;
font-size: 34rpx;
font-weight: 400;
margin:0 36rpx;
}
.flex-2 {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: 0 36rpx;
}
}
}
</style>
uniapp自定义音频播放器Audio
于 2022-03-06 00:43:29 首次发布