<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>exportdefault{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(){returnfunction(){if(this.now_time ===this.total_time){
console.log('结束了');return0}else{let silderLen =(this.now_time *100)/this.total_time
return silderLen
}}},// 秒转换分秒getMinuteTime(){returnfunction(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 =thisthis.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 =truethis.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 =thisthis.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 =falsethis.AUDIO.pause()}else{
console.log('播放音乐');this.music_play =truethis.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 =falsethis.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://blog.csdn.net/qq_44331582/article/details/128372880
版权归原作者 不吃糖葫芦3 所有, 如有侵权,请联系我们删除。
版权归原作者 不吃糖葫芦3 所有, 如有侵权,请联系我们删除。