186 lines
3.8 KiB
Vue
186 lines
3.8 KiB
Vue
<template>
|
|
<view class="imt-audio">
|
|
<view class="audio-wrapper">
|
|
<view class="audio-number">{{format(current)}}</view>
|
|
<slider class="audio-slider" :activeColor="color" block-size="16" :value="current" :max="duration || 10" @changing="seek=true,current=$event.detail.value" @change="audio.seek($event.detail.value)"></slider>
|
|
<view class="audio-number">{{format(duration)}}</view>
|
|
</view>
|
|
<view class="audio-control-wrapper" :style="{color}">
|
|
<image
|
|
class="audio-control audio-control-switch"
|
|
@click="audio.paused?play():audio.pause()"
|
|
:src="paused ? playImg : stopImg" />
|
|
<p>{{ paused ? '点击播放' : '点击停止播放' }}</p>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import stopImg from '../pages/resourcesManage/img/stop-img.png'
|
|
import playImg from '../pages/resourcesManage/img/play-icon.png'
|
|
export default {
|
|
data() {
|
|
return {
|
|
audio: uni.createInnerAudioContext(),
|
|
current: 0, //当前进度(s)
|
|
duration: 0, //总时长(s)
|
|
paused: true, //是否处于暂停状态
|
|
loading: false, //是否处于读取状态
|
|
seek: false,
|
|
stopImg,
|
|
playImg
|
|
}
|
|
},
|
|
props: {
|
|
src: String, //音频链接
|
|
autoplay: Boolean, //是否自动播放
|
|
continue: Boolean, //播放完成后是否继续播放下一首，需定义@next事件
|
|
control: {
|
|
type: Boolean,
|
|
default: true
|
|
}, //是否需要上一曲/下一曲按钮
|
|
color: {
|
|
type: String,
|
|
default: '#007BFF'
|
|
} //主色调
|
|
},
|
|
methods: {
|
|
//返回prev事件
|
|
prev() {
|
|
this.$emit('prev')
|
|
},
|
|
//返回next事件
|
|
next() {
|
|
this.$emit('next')
|
|
},
|
|
//格式化时长
|
|
format(num) {
|
|
return '0'.repeat(2 - String(Math.floor(num / 60)).length) + Math.floor(num / 60) + ':' + '0'.repeat(2 - String(Math.floor(num % 60)).length) + Math.floor(num % 60)
|
|
},
|
|
//点击播放按钮
|
|
play() {
|
|
this.audio.play()
|
|
this.loading = true
|
|
}
|
|
},
|
|
created() {
|
|
if (this.src) {
|
|
this.audio.src = this.src
|
|
this.autoplay && this.play()
|
|
}
|
|
this.audio.obeyMuteSwitch = false
|
|
//音频进度更新事件
|
|
this.audio.onTimeUpdate(() => {
|
|
if (!this.seek) {
|
|
this.current = this.audio.currentTime
|
|
}
|
|
if (!this.duration) {
|
|
this.duration = this.audio.duration
|
|
}
|
|
})
|
|
//音频播放事件
|
|
this.audio.onPlay(() => {
|
|
this.paused = false
|
|
this.loading = false
|
|
})
|
|
//音频暂停事件
|
|
this.audio.onPause(() => {
|
|
this.paused = true
|
|
})
|
|
//音频结束事件
|
|
this.audio.onEnded(() => {
|
|
if (this.continue) {
|
|
this.next()
|
|
} else {
|
|
this.paused = true
|
|
this.current = 0
|
|
}
|
|
})
|
|
//音频完成更改进度事件
|
|
this.audio.onSeeked(() => {
|
|
this.seek = false
|
|
})
|
|
},
|
|
beforeDestroy(){
|
|
this.audio.destroy()
|
|
},
|
|
watch: {
|
|
src(src, old) {
|
|
this.audio.src = src
|
|
this.current = 0
|
|
this.duration = 0
|
|
if (old || this.autoplay) {
|
|
this.play()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.imt-audio {
|
|
background: #fff;
|
|
border-radius: 20upx;
|
|
}
|
|
|
|
.audio-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.audio-number {
|
|
width: 120upx;
|
|
font-size: 24upx;
|
|
line-height: 1;
|
|
color: #999999;
|
|
text-align: center;
|
|
}
|
|
|
|
.audio-slider {
|
|
flex: 1;
|
|
margin: 0;
|
|
}
|
|
|
|
.audio-control-wrapper {
|
|
margin-top: 40upx;
|
|
text-align: center;
|
|
}
|
|
|
|
.audio-control-wrapper p {
|
|
color: #999999;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.audio-control-wrapper image {
|
|
width: 128rpx;
|
|
height: 128rpx;
|
|
}
|
|
|
|
.audio-control {
|
|
font-size: 32upx;
|
|
line-height: 1;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.audio-control-next {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.audio-control-switch {
|
|
font-size: 40upx;
|
|
margin: 0 100upx;
|
|
}
|
|
|
|
.audioLoading {
|
|
animation: loading 2s;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: linear;
|
|
}
|
|
|
|
@keyframes loading {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|