javatong
javatong
  • 发布:2019-09-13 00:00
  • 更新:2020-06-16 15:08
  • 阅读:3034

【报Bug】createInnerAudioContext()的onseeked监听不触发,onTimeUpdate只触发一次

分类:uni-app

详细问题描述

使用audio做音频播放器,涉及到多音频切换播放。
1、onSeeked事件一直不触发,在调用seek方法后,onSeeking是一直触发的,onSeeked事件一直不触发,导致我不能正确切换seek状态。
2、初始化播放时,onWaiting事件不触发,但是onTimeUpdate事件触发,当执行seek方法后,onTimeUpdate事件永不触发。
3、切换播放器时必须执行audio.stop方法,执行后,onTimeUpdate事件不触发。

[内容]

重现步骤

[步骤]
1、onSeeked事件一直不触发,在调用seek方法后,onSeeking是一直触发的,onSeeked事件一直不触发,导致我不能正确切换seek状态。
2、初始化播放时,onWaiting事件不触发,但是onTimeUpdate事件触发,当执行seek方法后,onTimeUpdate事件永不触发。
3、切换播放器时必须执行audio.stop方法,执行后,onTimeUpdate事件不触发。
[结果]
1、onSeeked事件一直不触发,在调用seek方法后,onSeeking是一直触发的,onSeeked事件一直不触发,导致我不能正确切换seek状态。
2、初始化播放时,onWaiting事件不触发,但是onTimeUpdate事件触发,当执行seek方法后,onTimeUpdate事件永不触发。
3、切换播放器时必须执行audio.stop方法,执行后,onTimeUpdate事件不触发。
[期望]
1、执行seek方法后,seeking触发,seeking后应该执行seeked事件。
2、seek方法后,onTimeUpdate事件应该继续触发
3、应该继续触发
[如果语言难以表述清晰,拍一个视频或截图,有图有真相]

IDE运行环境说明

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app,也需要在此说明]
HbuilderX 2.2.2。20190816
[IDE版本号]

[windows版本号]
win10
[mac版本号]

uni-app运行环境说明

[运行端是h5或app或某个小程序?]
app
[运行端版本号]

[项目是cli创建的还是HBuilderX创建的?如果是cli创建的,请更新到最新版cli再试]

[编译模式是老模板模式还是新的自定义组件模式?]
自定义组件模式

App运行环境说明

[Android版本号]

[iOS版本号]

[手机型号]
荣耀20
[模拟器型号]

附件

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志,点右键打开文件所在目录,将log文件压缩成zip包上传]

[App问题请提供可重现问题的代码片段,你补充的细一点,问题就解决的快一点]

[App安装包或H5地址]

[可重现代码片段]

<template>  
    <view class="imt-audio">  
        <view class="audio-wrapper">  
            <view class="audio-number">{{currentTime}}</view>  
            <slider class="audio-slider" :activeColor="color" block-size="16" :value="current" :max="duration" @changing="seek=true,current=$event.detail.value"  
             @change="change"></slider>  
            <view class="audio-number">{{durationTime}}</view>  
        </view>  
        <view class="audio-control-wrapper" :style="{color:color}">  
            <view class="audio-control audio-control-prev" v-if="control" :style="{borderColor:color}" @click="prev">  
                <text class="lg cuIcon-backwardfill"></text>  
            </view>  
            <view class="audio-control audio-control-switch" :class="{audioLoading:loading}" :style="{borderColor:color}" @click="operation">  
                <text v-show="loading" class="lg cuIcon-loading2"></text>  
                <text v-show="!loading && paused" class="lg cuIcon-playfill"></text>  
                <text v-show="!loading && !paused" class="lg cuIcon-ellipse"></text>  
            </view>  
            <view class="audio-control" v-if="control" :style="{borderColor:color}" @click="next">  
                <text class="lg cuIcon-play_forward_fill"></text>  
            </view>  
        </view>  
    </view>  
</template>  

<script>  
    var audio =null;  
    export default {  
        data() {  
            return {  
                currentTime: '', //当前播放时间  
                durationTime: '', //总时长  
                current: '', //slider当前进度  
                loading: false, //是否处于读取状态  
                paused: true, //是否处于暂停状态  
                seek: false ,//是否处于拖动状态  
                audio:null  
            }  
        },  
        props: {  
            src: String, //音频链接  
            autoplay: Boolean, //是否自动播放  
            duration: Number, //总时长(单位:s)  
            control: {  
                type:Boolean,  
                default:true  
            }, //是否需要上一曲/下一曲按钮  
            continue:Boolean,//播放完成后是否继续播放下一首,需定义@next事件  
            color: {  
                type:String,  
                default:'#169af3'  
            } //主色调  
        },  
        created:function(){  
            audio = uni.createInnerAudioContext();  
            console.log("录音组件初始化。。。");  
            audio.src = this.src;  
            this.current = 0;  
            this.durationTime = this.format(this.duration);  
            audio.obeyMuteSwitch = false;  

            //音频播放事件  
            audio.onPlay(() => {  
                console.log("开始播放了...")  
                this.paused = false  
                this.loading = false  
            })  
            //音频暂停事件  
            audio.onPause(() => {  
                this.paused = true  
            })  
            //音频进度更新事件  
            audio.onTimeUpdate(() => {  
                console.log("音频进度事件...")  
                if (!this.seek) {  
                    this.current = audio.currentTime  
                }  
                if(this.loading){  
                    this.loading=false;  
                }  
            })  
            audio.onWaiting(()=>{  
                console.log("开始缓冲...")  
                this.loading=true;  
            })  
            //音频结束事件  
            audio.onEnded(() => {  
                if (this.continue) {  
                    this.next()  
                } else {  
                    this.paused = true  
                    this.current = 0  
                }  
            })  
            audio.onSeeking(()=>{  
                console.log("seeking...");  
                console.log("audio: " + JSON.stringify(audio));  
            })  
            //音频完成更改进度事件  
            audio.onSeeked(()=>{  
                console.log("更改进度完成")  
                this.seek = false  
                this.loading=false;  
                /* let that = this;  
                audio.offTimeUpdate(()=>{  
                    console.log("取消进度事件")  
                    audio.onTimeUpdate(()=>{  
                        console.log("重新添加监听事件")  
                    })  
                }) */  
            })  
        },  
        beforeDestroy:function(){  
            audio.destroy();  
        },  
        methods: {  
            //返回prev事件  
            prev() {  
                this.$emit('prev')  
            },  
            //返回next事件  
            next() {  
                this.$emit('next')  
            },  
            //格式化时长  
            format(num) {  
                return '0'.repeat(2 - String(Math.floor(num / 60)).length) + Math.floor(num / 60) + ':' + '0'.repeat(2 - String(  
                    Math.floor(num % 60)).length) + Math.floor(num % 60)  
            },  
            //播放/暂停操作  
            operation() {  
                if (this.paused) {  
                    audio.play()  
                    this.loading = true  
                } else {  
                    audio.pause()  
                }  
            },  
            //完成拖动事件  
            change(e) {  
                audio.seek(e.detail.value)  
            }  
        },  
        watch: {  
            //监听音频地址更改  
            src(e) {  
                console.log("切换播放地址为"+e);  
                audio.stop();  
                this.loading = true  
                this.current = 0  
                setTimeout(function(){  
                    audio.src = e  
                    audio.play();  
                },1000)  

            },  
            //监听总时长改变  
            duration(e) {  
                this.durationTime = this.format(e)  
            },  
            //监听当前进度改变  
            current(e) {  
                this.currentTime = this.format(e)  
            }  
        }  
    }  
</script>  

<style>  
    @font-face {  
        font-family: 'icon';  
        src: url('//at.alicdn.com/t/font_1104838_fxzimc34xw.eot');  
        src: url('//at.alicdn.com/t/font_1104838_fxzimc34xw.eot?#iefix') format('embedded-opentype'),  
            url('//at.alicdn.com/t/font_1104838_fxzimc34xw.woff2') format('woff2'),  
            url('//at.alicdn.com/t/font_1104838_fxzimc34xw.woff') format('woff'),  
            url('//at.alicdn.com/t/font_1104838_fxzimc34xw.ttf') format('truetype'),  
            url('//at.alicdn.com/t/font_1104838_fxzimc34xw.svg#iconfont') format('svg');  
    }  

    .imt-audio {  
        padding: 30upx;  
        background: #fff;  
        border-radius: 20upx;  
    }  

    .audio-wrapper {  
        display: flex;  
        align-items: center;  
    }  

    .audio-number {  
        font-size: 24upx;  
        line-height: 1;  
        color: #333;  
    }  

    .audio-slider {  
        flex: 1;  
        margin: 0 30upx;  
    }  

    .audio-control-wrapper {  
        margin-top: 20upx;  
        display: flex;  
        justify-content: center;  
        align-items: center;  
        font-family: "icon" !important;  
    }  

    .audio-control {  
        font-size: 32upx;  
        line-height: 1;  
        border: 4upx solid;  
        border-radius: 50%;  
        padding: 16upx;  
    }  

    .audio-control-next {  
        transform: rotate(180deg);  
    }  

    .audio-control-switch {  
        font-size: 40upx;  
        margin: 0 80upx;  
    }  

    .audioLoading {  
        animation: loading 2s;  
        animation-iteration-count: infinite;  
        animation-timing-function: linear;  
    }  

    @keyframes loading {  
        to {  
            transform: rotate(360deg);  
        }  
    }  
</style>

联系方式

[QQ]

2019-09-13 00:00 负责人:DCloud_Android_zl 分享
已邀请:
DCloud_UNI_GSQ

DCloud_UNI_GSQ

其他机型是否有此问题?
其他端(小程序或H5)是否有此问题?

  • javatong (作者)

    目前还没有测试其他机型

    2019-09-24 15:13

  • 2***@qq.com

    回复 javatong: 我在安卓机上测试,.onTimeUpdate只执行一次,后续改变音频不会执行此方法

    2019-11-14 17:03

  • 2***@qq.com

    我在安卓机上测试,.onTimeUpdate只执行一次,后续改变音频不会执行此方法

    2019-11-14 17:03

  • 2***@qq.com

    回复 2***@qq.com: 我的也是

    2019-11-19 10:24

丢了蜡笔的小新

丢了蜡笔的小新

我也遇到了,onSeeked怎么搞都不会触发

k***@hotmail.com

k***@hotmail.com

我也遇到了 onSeeked 不触发

8***@qq.com

8***@qq.com

拖动进度条之后监听就失效,官方是不想处理了么?

DCloud_UNI_GSQ

DCloud_UNI_GSQ

bug已修复,升级到2.7.12+即可

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