评论

【实战记录】关于实现聊天室语音播放问题的一次曲线救国的记录

关于wx.createInnerAudioContext()的实践

需求背景:

该项目为互联网医院小程序,其中重要的功能为在线问诊,需要建立医患聊天的功能,故本项目集成了融云sdk即时通讯单聊功能。

问题:

接了融云的sdk后,发文字,图片及自定义消息都是那么的丝滑,但在上线阶段,发现微信小程序真机中部分语音播放不了;通过分析定位,发现由于 wx.createInnerAudioContext(),部分语音在ios真机中会报INNERERRCODE:-11800, ERRMSG:这项操作无法完成。通过和融云技术一顿沟通,也在查找社区文档后发现,早在2021年3月份,有人也提了这个问题,也没有找到官方的相关反馈,并且我自己提了bug(https://developers.weixin.qq.com/community/develop/doc/0004224a4c09c0553ddd1c09657800),也没有下文了。没办法,项目上线迫在眉睫,只能换其他技术替代方案了

解决方案:

为兼容wx.createInnerAudioContext()报错,在onError时,保存需要通过uni.getBackgroundAudioManager()来播放的音频列表

this.audio = uni.createInnerAudioContext();
this.audio.src = this.src;
this.audio.onPlay(() => {
    this.audio.isPlaying = true;
    this.animate = true;
    this.timer = setInterval(() => {
        this.animate = false
        setTimeout(() => {
            this.animate = true
        }, 50)
    }, 1250);
    this.audio.onStop(() => {
        this.audio.isPlaying = false;
        this.animate = false;
        this.timer && clearInterval(this.timer)
    })
    this.audio.onEnded(() => {
        this.audio.isPlaying = false;
        this.animate = false;
        this.timer && clearInterval(this.timer)
    })
})
this.audio.onError((err) => {
    this.$bgAudioList.push({ 
        messageUId: this.messageUId,
        animate: false,
    }) // 所有需要通过背景音乐播放的存入全局
    this.useBackgroundAudioManager = true;
})
this.$audioList.push(this.audio)//所有实例加入全局变量


效果如下:



最后一次编辑于  2022-05-06  
点赞 11
收藏
评论

1 个评论

  • Roar💥
    Roar💥
    2022-08-05

    请问有完整代码参考一下吗

    2022-08-05
    赞同
    回复 2
    • Frank
      Frank
      2022-08-05
      抱歉哈,涉及公司项目,不能提供源码哈,文章内仅提供实现思路,和部分代码片段,若您有哪里不太明白的话,可以私信我哈
      2022-08-05
      回复
    • Roar💥
      Roar💥
      2022-08-05回复Frank
      好的,已私信
      2022-08-05
      回复
登录 后发表内容