评论

使用BackgroundAudioManager背景音频实现一个音频播放器

使用BackgroundAudioManager背景音频实现一个音频播放器,下载代码片段体验,可以直接用于自己的项目,没有其他依赖。

说明

使用BackgroundAudioManager创建的实例,小程序切换到手机后台、小程序内页面间跳转,都不会影响音频的连续播放,可以很好的实现一个音频播放器。
BackgroundAudioManager是单实例,全局唯一,在任意页面任何位置调用wx.getBackgroundAudioManager()既可以获得。

效果

音频列表循环播放,支持上一首、下一首切换,实时进度展示,快进。

思路

  1. 将播放的音频列表放在app.globalData或本地做缓存,保证音频切换时找到对应列表。
  2. 将音频播放的实时状态放在app.globalData或本地做缓存,保证展示音频播放详情页的音频名称、实时进度等正确展示。
  3. 方法中BackgroundAudioManager.on*为监听事件,操作业务放在回调函数中处理。
  4. BackgroundAudioManager的属性中,所有属性可以直接BackgroundAudioManager.获取值,非只读的属性可以通过BackgroundAudioManager. = ‘’ 方式赋值。

效果图

  1. 小程序界面
  2. 手机后台,顶部下拉

代码片段

详细代码请下载代码片段,可以直接运行demo。
https://developers.weixin.qq.com/s/VAmjRsmZ7090

最后一次编辑于  06-28  (未经腾讯允许,不得转载)
点赞 5
收藏
评论

2 个评论

  • 浪子如风
    浪子如风
    10-16

    楼主,如果list数组中有多个语音,在wxml页面中进行wx:for渲染时,为什么所有的音频会一起播放,开始和暂停按钮也变成了同步

    10-16
    赞同 1
    回复
  • children骏
    children骏
    07-24

    不错不错,slider和秒数的转换可以


    提个点,onShow时会重复对backgroundAudio的事件绑定,虽然不影响程序运行

    可以考虑用事件订阅的方式来管理事件


    再提个点,加载音频时可能需要缓冲,可以考虑加上 onWaiting、onCanplay 事件来处理状态

    07-24
    赞同
    回复 6
    • 痛快科技
      痛快科技
      07-24
      一个相对完整的简单demo
      07-24
      回复
    • children骏
      children骏
      07-24回复痛快科技
      是的~
      07-24
      回复
    • 浪子如风
      浪子如风
      星期四 11:19
      您好,如果在wxml页面中渲染list中的数组,为什么页面上的音频列表,所有的音频的silder滑块都一起滑动了,变成同步了
      星期四 11:19
      回复
    • children骏
      children骏
      星期四 11:30回复浪子如风
      例子中,负责控制slider进度的那个值只有一个,如果list中多个slider都使用同一个进度的话,确实会一起滑动的;
      星期四 11:30
      回复
    • 浪子如风
      浪子如风
      星期四 11:50回复children骏
      这个能给个思路解决方法吗?
      星期四 11:50
      回复
    查看更多(1)