<template>
<view class="audio-page">
<view class="box-left">
<image class="box-img" :src="image" mode="aspectFill"></image>
<view class="page-btn" @tap="clickAudio">
<image :src="music_play?stop_img:start_img" mode="widthFix"></image>
</view>
</view>
<view class="box-content">
<!-- <view class="content-name">{{title}}</view> -->
<view class="progress">
<text>{{getMinuteTime(now_time)}}</text>
<slider :value="now_time/total_time*100" block-size="10" block-color="#FF3333" activeColor="#FF3333"
@change="sliderChange.stop"></slider>
<text>{{getMinuteTime(total_time)}}</text>
</view>
</view>
</view>
</template>
<script>
export default {
name: "WZS-Audio",
props: ['music', 'image', 'title', 'autoplay'],
data() {
return {
music_play: false,
AUDIO: '',
total_time: '',
now_time: 0,
timeupdata: '',
interval: '',
start_img: '../../static/icons/icon-play.png',
stop_img: '../../static/icons/icon-stop.png'
};
},
created() {
this.playAudio()
this.playAudioCallBack()
},
computed: {
//计算进度条的位置
getSlider() {
return function() {
if(this.now_time === this.total_time){
console.log('结束了');
return 0
} else {
let silderLen = (this.now_time * 100) / this.total_time
return silderLen
}
}
},
// 秒转换分秒
getMinuteTime() {
return function(data) {
let minute = parseInt(data / 60)
let second = parseInt(data % 60)
if (minute.toString().length == 1) minute = `0${minute}`
if (second.toString().length == 1) second = `0${second}`
return `${minute}:${second}`
}
},
},
methods: {
// 播放音乐
playAudio() {
var that = this
this.AUDIO = uni.createInnerAudioContext()
this.AUDIO.src = this.music
// 监听音频进入可以播放状态的事件
this.AUDIO.onCanplay(() => {
// // 必须。可以当做是初始化时长
this.AUDIO.duration;
// // 必须。不然也获取不到时长
setTimeout(() => {
this.total_time = Math.round(this.AUDIO.duration)
console.log('音频时长', this.total_time)
}, 1000)
})
console.log('是否自动播放', this.autoplay);
if (this.autoplay) {
this.AUDIO.autoplay = true
this.AUDIO.play()
this.music_play = true
}
// this.timeupdata = setInterval(() => {
// //console.log((this.now_time / this.total_time) * 100)
// if (this.music_play) {
// this.now_time++
// if (this.now_time >= this.total_time) {
// console.log('当前时间', this.getMinuteTime(this.now_time), this.getMinuteTime(this
// .total_time))
// this.music_play = false
// this.now_time = 0
// }
// }
// }, 1000)
},
//音频播放事件的回调
playAudioCallBack() {
let _self = this
this.AUDIO.onPlay(() => {
if (_self.AUDIO.duration === 0 || isNaN(_self.AUDIO.duration)) {
console.log('this.AUDIO.onPlay=====更新时间========')
setTimeout(() => {
_self.total_time = Math.round(_self.AUDIO.duration)
}, 1000)
}
})
// 监听播放时间 及 计算播放进度
this.AUDIO.onTimeUpdate(() => {
// //播放时间
_self.now_time = _self.AUDIO.currentTime
if(_self.now_time >= _self.total_time){
_self.now_time = 0
}
})
// 继续播放seek完成
this.AUDIO.onSeeked((res) => {
//跳转到进度条的位置
_self.AUDIO.play()
_self.music_play = true
})
//自然播放结束
this.AUDIO.onEnded(function(res) {
console.log('已经结束了');
_self.AUDIO.pause()
_self.music_play = false
})
//音频错误
this.AUDIO.onError((res) => {
uni.showToast({
title: res.errMsg,
icon: 'none',
mask: true
})
console.log(res.errMsg);
console.log(res.errCode);
});
},
clickAudio() {
// this.$emit('change-play-state', this.music_play)
if (this.music_play) {
console.log('暂停音乐');
this.music_play = false
this.AUDIO.pause()
} else {
console.log('播放音乐');
this.music_play = true
this.AUDIO.play()
}
},
// 拖动进度条
sliderChange(e) {
console.log('拖动进度条', e)
const second = (e.detail.value / 100) * this.total_time
console.log(second, '拖动进度条111', second)
this.AUDIO.seek(second)
this.now_time = second
console.log(this.now_time, this.total_time)
console.log('拖动进度条222', this.getMinuteTime(this.now_time))
},
destroyed() {
console.log("destroyed----->")
this.music_play = false
this.AUDIO.pause()
this.AUDIO.offTimeUpdate()
this.AUDIO.offSeeked()
this.AUDIO.offError()
clearInterval(this.timeupdata)
}
},
destroyed() {
this.destroyed()
}
}
</script>
<style lang="scss">
.audio-page {
width: 100%;
height: 80upx;
padding-top: 6rpx;
display: flex;
align-items: center;
justify-content: center;
// box-shadow: 3upx 3upx 6upx #ccc;
.box-left {
width: 10%;
position: relative;
display: flex;
.box-img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
.page-btn {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 10rpx;
top: 0;
z-index: 3;
image {
width: 50upx;
height: 50upx;
background-color: rgba($color: #000000, $alpha: 0.3);
border-radius: 50%;
}
}
}
.box-content {
width: 90%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 30upx;
box-sizing: border-box;
font-size: 24upx;
.content-name {
width: 100%;
display: -webkit-box;
/* 弹性盒模型 */
-webkit-box-orient: vertical;
/* 元素垂直居中*/
-webkit-line-clamp: 1;
/* 文字显示的行数*/
overflow: hidden;
/* 超出隐藏 */
}
.progress {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
text {
font-size: 0.86rem;
color: #666;
}
slider {
width: 80%;
}
}
}
}
</style>
文章来源地址https://www.toymoban.com/news/detail-595758.html
文章来源：https://www.toymoban.com/news/detail-595758.html
到了这里，关于利用createInnerAudioContext()播放音频，解决了结束后自动暂停，重播从头开始，获取播放时间的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
