1***@qq.com
1***@qq.com
  • 发布:2021-01-08 09:33
  • 更新:2021-01-08 09:37
  • 阅读:2014

【报Bug】uni.createInnerAudioContext() 销毁后再次实例化不能播放

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: window 10

HBuilderX类型: 正式

HBuilderX版本号: 2.9.8

手机系统: Android

手机系统版本号: Android 10

手机厂商: 模拟器

手机机型: LIO-AN00

页面类型: vue

打包方式: 离线

项目创建方式: HBuilderX

操作步骤:

直接创建个uniapp项目,把我的代码放进去,运行到模拟器

预期结果:

销毁后,重新实例化能播放

实际结果:

销毁后,重新实例化后不能播放,没有触发onPlay

bug描述:

我在onShow第一次实例,基本都可以播放,偶尔不能播放
在删除后,再实例,基本都不可以播放,偶尔可以播放
打印出来,都有实例了,但就是没有触发Onplay()
打印结果如下:

{  
"id": "16100165043940.1966609937842998",  
"_callbacks": {  
"canplay": [],  
"play": ["function() { [native code] }"],  
"pause": ["function() { [native code] }"],  
"stop": [],  
"ended": ["function() { [native code] }"],  
"timeupdate": ["function() { [native code] }"],  
"error": [],  
"waiting": [],  
"seeking": [],  
"seeked": []  
},  
"_options": {  
"src": "http://hjycloud.oss-accelerate.aliyuncs.com/test/audio/1610016519086.mp3?Expires=1925376511&OSSAccessKeyId=LTAI4GDw1k1R6hGARYfUjzNj&Signature=YeCtdyVPfsNLsC2%2Byd42C1tQfeQ%3D"  
}  
}

代码如下:

<template>    
    <view class="audio_page">    
        <view class="audio_txt">    
            <!-- 录制时间 -->    
            <view class="audio_time">    
                <view class="spot"></view>    
                <text class="time">{{voicePath==''?showRecordTime:soundTime}}</text>    
            </view>    
            <text class="btnDel" @click="discardFun">删除</text>    
        </view>    
        <view class="line_box_path" v-if="voicePath!=''">    
            <view class="line"></view>    
            <view class="line_view" :style="{'width':pathLineWdFun+'px'}">    
                <image src="@/static/post_message/blue_audio.png" class="line_audio"></image>    
            </view>    
        </view>    
        <view class="image img_start" v-if="time>0&&status==true" @click.stop="playFun()"></view>    
        <view class="image img_stop" v-if="time>0&&status==false" @click.stop="playFun()"></view>    
    </view>    
</template>    

<script>    
    var vue_this = null;    
    export default {    
        computed: {    
            // 动态计算已经录制的时间或者播放的录音的剩余时间    
            showRecordTime() {    
                if (this.time != 0) {    
                    this.soundTime = this.formatFun(this.time);    
                    this.durationTime = this.time.toString();    
                }    
                return this.formatFun(this.time);    
            },    
            pathLineWdFun() {    
                return this.pathLineWd;    
            },    
        },    
        data() {    
            return {    
                // 计算时间    
                time: 4,    
                // 播放路径    
                voicePath: 'http://hjycloud.oss-accelerate.aliyuncs.com/test/audio/1610016519086.mp3?Expires=1925376511&OSSAccessKeyId=LTAI4GDw1k1R6hGARYfUjzNj&Signature=YeCtdyVPfsNLsC2%2Byd42C1tQfeQ%3D',    
                torch_point_id: '',    
                lineWd: 0,    
                status: true,    
                soundTime: '00:00',    
                durationTime: '0',    
                innerAudioContext: null,    
                currentTime: 0,    
                duration: 0,    
                pathLineWd: 0,    
            }    
        },    
        onLoad(e) {    
            vue_this = this;    
        },    
        onShow() {    
            this.innerAudioContext = uni.createInnerAudioContext();    
            this.onPlay();    
            this.onCanplay();    
            this.onTimeUpdate();    
            this.onEnded();    
            this.onPause();    
        },    
        onHide() {    
            console.log("onhide")    
            // this.is_save = false;    
            this.innerAudioContext.destroy();    
            this.innerAudioContext = null;    
            uni.hideLoading();    
        },    
        destroyed() {    
            console.log("destroyed")    
            // this.is_save = false;    
            this.innerAudioContext.destroy();    
        },    
        methods: {    
            discardFun() {    
                this.pathLineWd = 0;    
                this.stopFunNum = 0;    
                this.voicePath = '';    
                this.soundTime = '';    
                this.time = 4;    
                this.lineWd = 0;    
                this.innerAudioContext.destroy();    
                this.innerAudioContext = null;    
                this.innerAudioContext = uni.createInnerAudioContext();    
                this.onPlay();    
                this.onCanplay();    
                this.onTimeUpdate();    
                this.onEnded();    
                this.onPause();    
                this.status = true;    
                this.autoplay = false;    
            },    
            playFun() {    
                this.voicePath = 'http://hjycloud.oss-accelerate.aliyuncs.com/test/audio/1610016519086.mp3?Expires=1925376511&OSSAccessKeyId=LTAI4GDw1k1R6hGARYfUjzNj&Signature=YeCtdyVPfsNLsC2%2Byd42C1tQfeQ%3D';    
                console.log("播放录音:", this.voicePath)    
                //播放录音    
                if (!this.voicePath) {    
                    alert('音频文件空空如也,小主请先录音', "center");    
                    return    
                }    
                // currentTime:当前播放时间  ,duration:录音总时长,单位;ms    
                this.status = false;    
                console.log("this.innerAudioContext:", this.innerAudioContext);    
                this.$nextTick(() => {    
                    if (this.innerAudioContext == null) {    
                        this.innerAudioContext = uni.createInnerAudioContext();    
                    }    
                    this.innerAudioContext.src = this.voicePath;    
                    this.innerAudioContext.play();    
                    console.log("打印:", this.innerAudioContext)    
                })    
            },    
            onCanplay() {    
                this.innerAudioContext.onCanplay((callback) => {    
                    console.log("缓冲回调");    
                    this.duration = this.innerAudioContext.duration;    
                })    
            },    
            onPlay() {    
                this.innerAudioContext.onPlay((callback) => {    
                    console.log("播放回调");    
                })    
            },    
            onTimeUpdate() {    
                this.innerAudioContext.onTimeUpdate((callback) => {    
                    this.currentTime = this.innerAudioContext.currentTime;    
                    this.soundTime = this.formatFun(this.duration - this.currentTime);    
                    let allwidth = 247;    
                    let curWidth = (allwidth * this.currentTime) / this.duration;    
                    console.log('duration:', this.duration, 'currentTime:', this.currentTime, 'curWidth:', curWidth)    
                    this.pathLineWd = curWidth;    
                })    
            },    
            onEnded() {    
                this.innerAudioContext.onEnded((callback) => {    
                    let allwidth = 247;    
                    let curWidth = (allwidth * (this.duration - this.currentTime)) / this.duration;    
                    this.pathLineWd = parseInt(this.pathLineWd += curWidth);    
                    this.status = true;    
                });    
            },    
            onPause() {    
                this.innerAudioContext.onPause((callback) => {    
                    this.status = true;    
                });    
            },    
            formatFun(time) {    
                var hh = parseInt(time / 3600);    
                if (hh < 10) hh = "0" + hh;    
                var mm = parseInt((time - hh * 3600) / 60);    
                if (mm < 10) mm = "0" + mm;    
                var ss = parseInt((time - hh * 3600) % 60);    
                if (ss < 10) ss = "0" + ss;    
                return mm + ':' + ss    
            },    
            stopFun() {    
                this.innerAudioContext.pause();    
            }    
        }    
    }    
</script>    

<style lang="scss" scoped>    
    .audio_page {    
        width: 100%;    
        height: 100vh;    
        box-sizing: border-box;    
        color: #fff;    
        background: #242533;    
        position: relative;    
        .image{    
            width: 100rpx;    
            height: 100rpx;    
        }    
        .img_start{    
            background-color: red;    
        }    
        .img_stop{    
            background-color: pink;    
        }    
        .line_box_path {    
            position: absolute;    
            overflow: hidden;    
            right: 20rpx;    
            // width: calc(100% - 120rpx);    
            width: 480rpx;    
            height: 60rpx;    
            top: 50%;    
            transform: translateY(-50%);    

            .line {    
                position: absolute;    
                z-index: 1;    
                left: 0;    
                top: 0;    
                width: 100%;    
                height: 100%;    
                background-color: #fff;    
                // background: url(../../../static/post_message/white_audio.png) no-repeat center center;    
                // background-size: 100% 100%;    
            }    

            .line_view {    
                // width: 480rpx;    
                height: 100%;    
                position: absolute;    
                z-index: 2;    
                left: 0;    
                top: 0;    
                overflow: hidden;    

                .line_audio {    
                    width: 480rpx;    
                    height: 100%;    
                    /* background: url(../../../static/post_message/blue_audio.png) no-repeat right center;    
                    background-size: 100% 100%; */    
                }    
            }    

        }    
    }    
</style>

环境:app

2021-01-08 09:33 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com (作者)

<view class="image img_start" v-if="time>0&&status==true" @click.stop="playFun()"></view>      
        <view class="image img_stop" v-if="time>0&&status==false" @click.stop="playFun()"></view>

修改为

<view class="image img_start" v-if="time>0&&status==true" @click.stop="playFun()"></view>      
        <view class="image img_stop" v-if="time>0&&status==false" @click.stop="stopFun()"></view>

该问题目前已经被锁定, 无法添加新回复