评论

使用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

最后一次编辑于  2019-06-28  
点赞 8
收藏
评论

6 个评论

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

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

    2019-10-16
    赞同 1
    回复
  • 叮当猫
    叮当猫
    2020-11-04

    初学者,如果把这个程序改成播放手机本地某个文件夹里的MP3,该怎么改呢? 大佬赐教!

    2020-11-04
    赞同
    回复
  • 蔡啊菜
    蔡啊菜
    2020-05-18

    想问一下,这样实现出来的效果 手机上面那个音频栏目无法显示吗

    2020-05-18
    赞同
    回复
  • 苏
    2020-04-28

    下面出现的警告怎么解决啊?

    2020-04-28
    赞同
    回复
  • smile
    smile
    2020-02-17

    正在学习小程序,拿去用了谢谢


    2020-02-17
    赞同
    回复
  • children骏
    children骏
    2019-07-24

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


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

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


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

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