uni.createInnerAudioContext 多次播放导致页面很卡很卡

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： win10

HBuilderX类型：正式

HBuilderX版本号： 3.7.3

手机系统： Android

手机系统版本号： Android 12

手机厂商：小米

手机机型： redmi

页面类型： vue

vue版本： vue2

打包方式：云端

项目创建方式： HBuilderX

App下载地址或H5⽹址：无

示例代码：

function musicInit(c_that){

that = c_that;  

for(let i=0;i<10;i++){  
    let mUrl = "https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8";  
    let obj = {"src":mUrl};  

    that.musicList.push(obj);  

}  
that.sleepIndex = -1;

}

function playMusicInit(){
console.log("===============playMusicInit===================");
// if(that.sleepIndex>0 && that.sleepIndex < that.musicList.length-1){
that.sleepIndex = 0;
// }
// destroySleepMusic();
setSleepMusic();

that.sleepAudio.play();  

// let play = setInterval(()=>{  
//  console.log("当前音频的位置："+that.sleepAudio.currentTime,"=========音频的总长度===="+that.sleepAudio.duration);  
// },1000)

}
function musicEnd(){
destroySleepMusic();

that.sleepIndex++;  
setSleepMusic();  

that.sleepAudio.play();

}
function play(){
if(that.sleepAudio){
that.sleepAudio.play();
console.log("播放");
addLog("sleep播放");
}
}
function pause(){
if(that.sleepAudio){
that.sleepAudio.pause();
console.log("暂停");
addLog("sleep暂停");
}
}

function setSleepMusic(){
// 设置音频
if(that.sleepAudio){
console.log("睡眠音乐只能初始化一遍！！！禁止多次创建！");
return;
}
that.sleepAudio = uni.createInnerAudioContext();

var platform = uni.getSystemInfoSync().platform  
if (platform != 'ios') {  
    that.sleepAudio.sessionCategory = 'ambient';  
}  

let musicList = that.musicList;  

console.log("================缓存前的 音乐地址===" + musicList[that.sleepIndex].src+'.mp3');  
that.sleepAudio.src = Url(musicList[that.sleepIndex].src+'.mp3');//musics[i].src+'.mp3';  
if(that.sleepIndex==musicList.length-1){  
    that.sleepAudio.loop = true; // 睡眠页最后一曲单曲循环  
    console.log("最后一首单曲循环");  
    addLog("最后一首单曲循环");  
}  
console.log("================缓存后的 音乐地址===" + that.sleepAudio.src);  

that.sleepAudio.onPlay(()=>{  
    console.log("====开始播放onPlay=======");  
    addLog("开始播放onPlay");  
})  
that.sleepAudio.onEnded(()=>{  
    console.log("=========结束播放onEnded=======");  
    addLog("结束播放onEnded");  
    musicEnd();  
})  
that.sleepAudio.onStop(()=>{  
    addLog("停止播放onStop");  
    console.log("======停止播放onStop=======");  
})  
that.sleepAudio.onPause(()=>{  
    console.log("========暂停播放onPause=======");  
    addLog("暂停播放onPause");  
    if(!that.sleepClickPause){  
        if(that.sleepAudio.currentTime < that.sleepAudio.duration){  
            // 继续播放（防止没有播放时 音乐被暂停现象）  
            console.log("当前音频出现暂停(地址)："+that.sleepAudio.src,"莫名暂停的音频总长度："+that.sleepAudio.duration, "莫名暂停的音频当前播放的位置："+that.sleepAudio.currentTime);  
            addLog("莫名暂停位置(即将从暂停地方开始播放)："+that.sleepAudio.currentTime);  
            // that.sleepAudio.seek(u.g.sleep_music_arr[i].currentTime);  
            // that.sleepAudio.stop();  
            that.sleepAudio.play();  
        }  
    }  

})  

console.log("创建睡眠音频");

}
// 销毁当前u.g.sleep_music_arr中所有的睡眠音
function destroySleepMusic(){

if(!that.sleepAudio){  
    console.log("没有需要清除的");  
    addLog("没有需要清除的音频");  
}  
console.log("==========destroySleepMusic==============");  
that.sleepAudio.offPlay(()=>{});  
that.sleepAudio.offPause(()=>{});  
that.sleepAudio.offStop(()=>{});  
that.sleepAudio.offEnded(()=>{});  

that.sleepAudio.stop();  
that.sleepAudio.destroy();  
that.sleepAudio.sessionCategory = null;  
that.sleepAudio = null;

}

module.exports = {
musicInit,
playMusicInit,
play,
pause,
}

页面源码：
<template>
<view class="page">
<view>打开app时间: {{timeNow}}</view>

    <view class="t-1">  
        <view class="header">方式一:<text class="h-s">模拟播放睡眠音频(销毁再造式)</text></view>  
        <view class="btn" @click="btnClick1()">{{isP1?"暂停":"播放"}}</view>  
    </view>  

    <view style="width: 400upx;height: 80upx;line-height: 80upx;color: #000;font-size: 30upx;border: 1upx solid #000;border-radius: 10upx 10upx;text-align: center;margin: 200upx auto;" @click="navTo('other')">跳转页面测试是否卡顿</view>  

    <!-- 睡眠结束按键 -->  
    <view class="process_bar_wrapper">  
        <!-- <bar :percentage="end_percentage" style="width: 408upx;"></bar> -->  
        <view class="process" :style="{'width':end_percentage+'%'}"></view>  
    </view>  

    <view class="end_btn" @touchstart="sleepEndTouchStart()"  
        @touchend="sleepEndTouchEnd()">  
        长按测试是否卡  
    </view>  

</view>

</template>

var _this;  
export default {  
    data() {  
        return {  
            bgAudio:null,  
            title: 'Hello',  
            isP1:false,  
            isP2:false,  
            isP3:false,  
            timeNow:'',  
            end_percentage:0,  
            end_sleep_interval:null,  
            sleepAudio:null,  
            musicList:[],  
            sleepIndex:-1,  
            sleepClickPause:false,  

        }  
    },  
    onLoad() {  
        _this = this;  
        this.initPlay();  
        this.timeNow = _this.getNowDateTimeText();  
        m1.musicInit(this);  

    },  
    onShow() {  

    },  
    methods: {  
        initPlay() {  
            // bg.audioBgLivingInit(this);  
        },  
        btnClick1(){  
            this.isP1 = !this.isP1;  

            if(this.sleepIndex == -1){  
                m1.playMusicInit();  
            }else{  
                console.log("isP1========"+this.isP1);  
                if(!this.isP1){  
                    this.sleepClickPause = true;  
                    m1.pause();  
                }else{  
                    this.sleepClickPause = false;  
                    m1.play();  
                }  
            }  

        }  
        sleepEndTouchStart(){  
            let that = this;  
            if (that.end_sleep_interval) {  
                that.end_percentage = 0;  
                clearInterval(that.end_sleep_interval);  
                that.end_sleep_interval = null;  
            }  

            that.end_sleep_interval = setInterval(() => {  
                if (that.end_percentage != 100) {  
                    that.end_percentage += 1  
                }else{  

                    if(that.end_sleep_interval){  
                        clearInterval(that.end_sleep_interval);  
                        that.end_sleep_interval = null  
                    }  
                    // this.sleepEndTouchEnd(2)  
                }  
            }, 30)  

        },  
        sleepEndTouchEnd(type) {  

            let that = this;  
            if (that.end_percentage <= 100) {  

                if(that.end_percentage == 100){  
                    that.navTo('other');  

                }  
                that.end_percentage = 0  
            }  
            if(that.end_sleep_interval){  
                clearInterval(that.end_sleep_interval);  
                that.end_sleep_interval = null  
            }  
        },  

        getNowDateTimeText() {  
            var date = new Date();//当前时间  
            var month = this.zeroFill(date.getMonth() + 1);//月  
            var day = this.zeroFill(date.getDate());//日  
            var hour = this.zeroFill(date.getHours());//时  
            var minute = this.zeroFill(date.getMinutes());//分  
            var second = this.zeroFill(date.getSeconds());//秒  

            var curTime = date.getFullYear() + "-" + month + "-" + day  
            + " " + hour + ":" + minute + ":" + second;  
            return curTime;  
        },  
        zeroFill(i){  
            if(i >= 0 && i <= 9) {  
                return "0" + i  
            }else{  
                return i  
            }  
        },  
        navTo(str,data_str=''){  
            let url = '../'+ str + '/' + str  
            if(data_str){  
                url += data_str  
            }  
            uni.navigateTo({  
                url: url,  
                success(res){console.log(`导航到${str}！`)},  
                fail(err){console.log(err)}  
            })  
        }  

    }  
}

</script>

        .h-s{  
            font-size: 30upx;padding-left: 16upx;  
        }  

    }  
    .btn{  
        width: 100upx;height: 60upx;line-height: 60upx;padding: 6upx 12upx;border: 2upx solid #2D97D9;margin: 20upx auto;text-align: center;color: #2D97D9;  
    }  

}  

// 结束进度条  
.process_bar_wrapper {  
    width: 358upx;  
    height: 6upx;  
    margin: auto;  
    position: fixed;  
    left: 0upx;  
    right: 0upx;  
    bottom: 204upx;  
    border-radius: 8upx;  
    background-color: #FFF;  
    border: 1upx solid #DFE9F0;;  
}  

.process {  
    width: 0%;  
    height: 6upx;  
    background-color: #2D97D9;  
    border-radius: 8upx;  
}  
.end_btn {  
    width: 358upx;  
    height: 80upx;  
    line-height: 80upx;  
    font-size: 28upx;  
    color: #000;  
    text-align: center;  
    margin: auto;  
    position: fixed;  
    left: 0upx;  
    right: 0upx;  
    bottom: 72upx;  
    border-radius: 8upx;  
    border: 1upx solid #000;  
}  

.end_btn:active{  
    opacity: 0.3;  
}

</style>

操作步骤：

每次销毁，再创建，播放1小时以上左右页面卡死
2.只创建一个，切换src 10-20分钟卡死
3.创建多个，也会卡死，onPlay onPause 多次执行

预期结果：

希望官网对createInnerAudioContext的bug 尽快解决下

实际结果：

。。。。。。。。。。。。。。。

bug描述：

问题1：安卓机型：测试机型小米、红米、华为，uni.createInnerAudioContext 每次播完结束destroy()后 , 再去创建，会导致整个页面很卡，1小时左右整个页面直接卡死无法操作。
安卓机上，音乐还没播放完会自动暂停音乐，设置loop=true单曲循环也会出现莫名暂停现象。
还有一种问题，只创建 uni.createInnerAudioContext 一个实例对象，每次切换音频时，改变src ，用官网https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3 10-20分钟左右就开始感觉就是每次切换一次音频的src 就会卡一点，逐渐变卡最后整个页面就很卡
创建多个uni.createInnerAudioContext 后， onPlay , onPause会执行很多次