0


利用createInnerAudioContext()播放音频,解决了结束后自动暂停,重播从头开始,获取播放时间

<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 所有, 如有侵权,请联系我们删除。

“利用createInnerAudioContext()播放音频,解决了结束后自动暂停,重播从头开始,获取播放时间”的评论:

还没有评论