【报Bug】音频播放在真机微信内置浏览器上会中断播放

产品分类： uniapp/H5

PC开发环境操作系统： Windows

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

HBuilderX类型：正式

HBuilderX版本号： 2.9.8

浏览器平台：微信内置浏览器

浏览器版本：手机微信打开地址

项目创建方式： HBuilderX

    <view class="uni-padding-wrap">  
        <page-head title="audio"></page-head>  
        <view class="uni-common-mt">  
            <slider :value="position" :min="0" :max="duration" @changing="onchanging" @change="onchange"></slider>  
        </view>  
        <!-- <view class="uni-common-mt play-time-area">  
            <text class="current-time">{{currentTime}}</text>  
            <text class="duration">{{duration}}</text>  
        </view> -->  
        <view class="play-button-area">  
            <image class="icon-play" :src="playImage" @click="play"></image>  
        </view>  
    </view>  
</template>  
<script>  
    const audioUrl = 'https://syh-resource.oss-cn-beijing.aliyuncs.com/audio/admin/20180916/151115OUNllH.mp3'  
    export default {  
        data() {  
            return {  
                title: "innerAudioContext",  
                isPlaying: false,  
                isPlayEnd: false,  
                currentTime: 0,  
                duration: 100  
            }  
        },  
        computed: {  
            position() {  
                return this.isPlayEnd ? 0 : this.currentTime;  
            },  
            playImage() {  
                return this.isPlaying ? "/static/pause.png" : "/static/play.png"  
            }  
        },  
        onLoad() {  
            this._isChanging = false;  
            this._audioContext = null;  
            this.createAudio();  
        },  
        onUnload() {  
            if (this._audioContext != null && this.isPlaying) {  
                this.stop();  
            }  
        },  
        methods: {  
            createAudio() {  
                var innerAudioContext = this._audioContext = uni.createInnerAudioContext();  
                innerAudioContext.autoplay = false;  
                innerAudioContext.src = audioUrl;  
                innerAudioContext.onPlay(() => {  
                    console.log('开始播放');  
                });  
                innerAudioContext.onTimeUpdate((e) => {  
                    if (this._isChanging === true) {  
                        return;  
                    }  
                    this.currentTime = innerAudioContext.currentTime || 0;  
                    this.duration = innerAudioContext.duration || 0;  
                });  
                innerAudioContext.onEnded(() => {  
                    this.currentTime = 0;  
                    this.isPlaying = false;  
                    this.isPlayEnd = true;  
                });  
                innerAudioContext.onError((res) => {  
                    this.isPlaying = false;  
                    console.log(res.errMsg);  
                    console.log(res.errCode);  
                });  
                return innerAudioContext;  
            },  
            onchanging() {  
                this._isChanging = true;  
            },  
            onchange(e) {  
                console.log(e.detail.value);  
                console.log(typeof e.detail.value);  
                this._audioContext.seek(e.detail.value);  
                this._isChanging = false;  
            },  
            play() {  
                if (this.isPlaying) {  
                    this.pause();  
                    return;  
                }  
                this.isPlaying = true;  
                this._audioContext.play();  
                this.isPlayEnd = false;  
            },  
            pause() {  
                this._audioContext.pause();  
                this.isPlaying = false;  
            },  
            stop() {  
                this._audioContext.stop();  
                this.isPlaying = false;  
            }  
        }  
    }  
</script>  
<style>  
    .play-time-area {  
        display: flex;  
        flex-direction: row;  
        margin-top: 20px;  
    }  

    .duration {  
        margin-left: auto;  
    }  

    .play-button-area {  
        display: flex;  
        flex-direction: row;  
        justify-content: center;  
        margin-top: 50px;  
    }  

    .icon-play {  
        width: 60px;  
        height: 60px;  
    }  
</style>

bug描述：

阿里云oss长音频地址播放会卡顿，大概在5-8分钟左右会停止播放

梨子1111 (作者)

用的是我给的那个，我直接创建的一个hello uniapp 那个示例项目，然后把音频地址换成我的oss音频，然后在微信里打开播放，播到大概6-8分钟内左右就停止播放了

2021-01-25 09:41
DCloud_UNI_Anne

回复 DCloud_UNI_Anne: 和你一样的操作并没有复现。

2021-01-25 11:19
梨子1111 (作者)

回复 DCloud_UNI_Anne: 下面留言发了代码和录屏的地址，您看看呢

2021-01-25 14:11
梨子1111 (作者)

回复 DCloud_UNI_Anne: 有结果吗

2021-01-27 11:51
DCloud_UNI_Anne

回复梨子1111: HBuilderX alpha 版本号： 3.0.7，未复现问题。你更新下版本，试下其他设备，是否还有此问题？

2021-01-27 14:17
梨子1111 (作者)

回复 DCloud_UNI_Anne: 用了oppo k5 红米k20都出现了这个问题

2021-01-27 17:34
梨子1111 (作者)

回复 DCloud_UNI_Anne: 看看这个是否有解决办法，这个挺严重的，我试了插件市场的背景音频播放也会出现这个问题

2021-01-28 14:52
DCloud_uniCloud_JSON

回复梨子1111: 用的微信内置浏览器，你微信的版本号是多少

2021-02-02 11:04
梨子1111 (作者)

回复 DCloud_uniCloud_JSON: 就正常版本，微信最新版本，安卓真机

2021-02-02 14:21
梨子1111 (作者)

回复 DCloud_uniCloud_JSON: 我都把demo和视频都发出来了。。。你要啥数据，我都说了安卓机，我也找人了好多人试了，都复现了，我现在微信版本是8.0最新的，你要是需要的话，我还能再录个视频，机型红米K20 华为麦芒 oppoK5

2021-02-02 15:34
DCloud_UNI_Anne

回复梨子1111: 不用uni-app的情况下，写个播放音频看下是否正常？

2021-02-03 10:55
梨子1111 (作者)

回复 DCloud_UNI_Anne: 别的正常

2021-02-05 15:07
梨子1111 (作者)

回复 DCloud_UNI_Anne: 这个问题有结果吗

2021-02-24 14:41
梨子1111 (作者)

回复 DCloud_UNI_Anne: 技术人员还能解决吗？

2021-02-26 13:41
梨子1111 (作者)

回复 DCloud_uniCloud_JSON: 技术人员还能解决吗？

2021-02-26 13:42
DCloud_UNI_GSQ

回复梨子1111: 目前没有一模一样的机型，使用其他机型测试并未复现，音频播放接口是直接封装的 html 的 audio，理论上不会影响底层的播放，播放中断一般是浏览器环境问题。建议你直接用 html 直接测试一下 audio 播放。

2021-02-26 15:15
梨子1111 (作者)

回复 DCloud_UNI_GSQ: 建议找个长音频做下测试，我这边不止这几个机型会出现，也不止我这边出现了这个问题，有个在网易课堂写uniapp小说app的老师我也咨询过，他那边也复现了这个问题，我不知道是哪个机型，但是确实存在这个问题

2021-02-26 15:20
DCloud_UNI_GSQ

回复梨子1111: 使用的你提供的音频测试的。请提供如下结果反馈，1. 在微信浏览器内使用普票 html 和 auido 进行播放测试是否正常；2. 在非微信浏览器（比如 chrome）使用 uni-app 项目测试音频播放是否正常；

2021-02-26 15:54

【报Bug】音频播放在真机微信内置浏览器上会中断播放

操作步骤：

直接运行代码

预期结果：

播放完整音频

实际结果：

播放会终端

bug描述：

2 个回复

公告

相关问题

【报Bug】音频播放在真机微信内置浏览器上会中断播放

操作步骤： 直接运行代码

预期结果： 播放完整音频

实际结果： 播放会终端

bug描述：

与内容相关的链接

2 个回复

公告

相关问题

操作步骤：

直接运行代码

预期结果：

播放完整音频

实际结果：

播放会终端