<!--  @author: zhucuilian @date:  @description: 音频播放组件  --> <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"> </slider> <text>{{getMinuteTime(total_time)}}</text> </view> </view> </view> </template> <script> import { throttle, debounce } from "@/utils/tools.js" export default { name: "WZS-Audio", props: ['music', 'image', 'title', 'autoplay', 'initTime'], 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', // 开始播放的位置（单位：s），默认 0 startTime: 0 }; }, watch: { initTime: { handler(newVal, oldVal) { if (newVal) { this.startTime = newVal } }, immediate: true } }, mounted() { console.log("音频mounted", this.startTime); }, created() { this.playAudio() this.playAudioCallBack() }, computed: { //计算进度条的位置 getSlider() { return function() { if (this.now_time === this.total_time) { 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() { console.log("播放音乐"); 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) }, 1000) }) if (this.autoplay) { this.AUDIO.autoplay = true this.AUDIO.startTime = this.startTime this.AUDIO.play() this.music_play = true //跳转到指定时长 // this.AUDIO.seek(this.startTime) } }, //音频播放事件的回调 playAudioCallBack() { let _self = this this.AUDIO.onPlay(() => { console.log("播放--shijian", this.AUDIO.startTime); if (_self.AUDIO.duration === 0 || isNaN(_self.AUDIO.duration)) { setTimeout(() => { _self.total_time = Math.round(_self.AUDIO.duration) }, 1000) } }) var count = 0 // 监听播放时间 及 计算播放进度 this.AUDIO.onTimeUpdate((e) => { // //播放时间 _self.now_time = _self.AUDIO.currentTime if (_self.now_time >= _self.total_time) { _self.now_time = 0 } //判断是否播放十秒 // let currentTime = parseInt(_self.AUDIO.currentTime) if(_self.now_time > 0){ if (parseInt(_self.AUDIO.currentTime) % 10 === 0) { _self.save() } } }) //暂停音频监听 this.AUDIO.onPause((res) => { console.log("监听——————暂停音频", _self.now_time); if( _self.now_time != 0){ _self.$emit('pauseStudy', _self.now_time) } _self.AUDIO.pause() _self.music_play = false }) // 继续播放seek完成 this.AUDIO.onSeeked((res) => { //跳转到进度条的位置 _self.AUDIO.play() _self.music_play = true }) //自然播放结束 this.AUDIO.onEnded(function(res) { _self.AUDIO.pause() _self.music_play = false _self.$emit('pauseStudy', _self.total_time) }) //音频错误 this.AUDIO.onError((res) => { uni.showToast({ title: res.errMsg, icon: 'none', mask: true }) }); }, save: throttle(function() { console.log("保存"); this.$emit('pauseStudy', this.now_time) }), clickAudio() { // this.$emit('change-play-state', this.music_play) if (this.music_play) { this.music_play = false this.AUDIO.pause() } else { 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() { this.music_play = false this.AUDIO.pause() this.AUDIO.offTimeUpdate() this.AUDIO.offSeeked() this.AUDIO.offError() this.AUDIO.destory() 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>