收藏
回答

InnerAudioContext实例触发stop函数,订阅者没有及时响应

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug InnerAudioContext 客户端 6.7.3 2.4.2

- 当前 Bug 的表现(可附上截图)

流程:demo中使用全局innerAudioContext实例,每次点击播放按钮都会触发点击事件函数play,play函数中,会首先判断当前innerAudioContext实例下是否有正在播放的音频,如果有,则调用innerAudioContext.stop()函数停止播放,然后再替换新的音频地址后重新播放。 bug:点击播放按钮后,如果新的音频地址与旧的音频地址相同,stop事件的订阅能正常触发。但是如果新的音频地址与旧的音频地址不同,stop事件的订阅要等到新音频播放完毕后才触发。点击多轮播放按钮,中间偶尔会触发stop事件的订阅。




- 预期表现


- 复现路径


- 提供一个最简复现 Demo

wxml:

<view>

        <view wx:for="{{ musicArr }}" wx:key="{{ index }}">

        <view class="music-item">

            <text>{{ item.name }}</text>

            <text>{{ item.isPlaying ? '播放中' : '停止' }}</text>

            <button catchtap="play" data-item="{{ item }}">播放</button>

        </view>

    </view>

</view>


js:

const innerAudioContext = wx.createInnerAudioContext()


Page({

    /**

      * 页面的初始数据

      */

    data: {

        musicArr: [

            { id: 1, name: '僕らの戦場live', path: '/assets/music/僕らの戦場live.mp3', isPlaying: false },

            { id: 2, name: 'You Say Run', path: '/assets/music/You Say Run.mp3', isPlaying: false },

            { id: 3, name: 'BRAVER', path: '/assets/music/BRAVER.mp3', isPlaying: false }

        ]

    },

    

    /**

      * 生命周期函数--监听页面加载

      */

    onLoad: function (options) {


        // 事件订阅

        innerAudioContext.onPlay(()=> {

            console.log('onPlay')

        });


        innerAudioContext.onStop(() => {

            console.log('onStop')

 

            // this.updateStopStatus()

        });

    

        innerAudioContext.onEnded(() => {

            console.log('onEnded')

            

            this.updateStopStatus()

        });

    },

    

    

    /**

      * 播放

      */

    play(e) {

        // 如果有播放中的音频,则停止

        if (!innerAudioContext.paused) {

            innerAudioContext.stop()


            // 由于stop订阅无法正常触发,故写在此

            this.updateStopStatus()

        }

    

        innerAudioContext.autoplay = true

        innerAudioContext.src = e.currentTarget.dataset.item['path']

    

        let index;

        this.data.musicArr.forEach((item, i) => {

            if (item.id === e.currentTarget.dataset.item['id']) {

                index = i

            }

        })

    

        const up = "musicArr[" + index + "].isPlaying"

        this.setData({

            [up]: true

        })

    

        innerAudioContext.play()

    },


    

    /**

       * 将所有音频状态更新为停止

       */

    updateStopStatus() {

        const musicArr = this.data.musicArr

        musicArr.forEach((item, i) => {

            item.isPlaying = false

        })

        this.setData({

            musicArr

        })

    },

})


回答关注问题邀请回答
收藏

2 个回答

  • zxt
    zxt
    2018-12-27

    官方呢?

    2018-12-27
    有用
    回复
  • ÷)
    ÷)
    2018-12-18

    为什么没有官方人员应答呢,问题我阐述得很清楚了,demo也是给了的,到底是小程序的问题,还是我代码实现的问题,总该给给说法吧

    2018-12-18
    有用
    回复
登录 后发表内容