小程序背景音频与音频的区别

更新日期: 2020-11-13 阅读次数: 4088 字数: 338 分类: 微信小程序

想在微信小程序中打开界面时,自动播放一段音频。但是发现小程序文档中有两种音频类型:

  • 音频
  • 背景音频

api 的调用方式不同。

背景音频与音频的区别

背景音频可以在切出小程序页面后继续播放。类似网易云音乐那种音乐 app 在锁屏之后依旧能播放。

还有一些细节上的区别:

背景音频

  • 全局只有一个实例
  • 锁屏上可以暂停、上一曲、下一曲切换
  • 静音下是否能播放?

普通音频

  • 可以多个实例,但是个数有限制。可以同时放多个声音?
  • 静音模式下,没有声音

小程序普通音频自动播放代码

    const innerAudioContext = wx.createInnerAudioContext()
    innerAudioContext.autoplay = true
    innerAudioContext.src = '/test.mp3'
    innerAudioContext.onPlay(() => {
      console.log('开始播放')
    })
    innerAudioContext.onError((res) => {
      console.log(res.errMsg)
      console.log(res.errCode)
    })

tips

  • 音频建议放 CDN,本地占空间太大,影响小程序加载速度
  • 可以使用 http 的音频文件链接。充分利用七牛云的 10 G 免费流量。
  • ios,android 系统支持的音频文件格式不太一样,但是都支持 mp3。具体详见官方文档。
  • 可以自动播放
  • 生成语音的客户端,使用的是百度的 API。https://github.com/soaringsoul/Text2Speech

参考

  • https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/InnerAudioContext.html
  • https://blog.csdn.net/lhkuxia/article/details/106855959

微信关注我哦 👍

大象工具微信公众号

我是来自山东烟台的一名开发者,有感兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式

tags: 小程序自动播放音频