当前位置:   article > 正文

微信小程序开发实战(29):控制背景音乐

微信小程序全局背景音频设置暂停

小程序还提供一组用于播放背景音乐的API,背景音乐和普通音乐的区别就是背景音乐在当前页面播放后,即使切换到当前小程序的其他页面,也不会停止播放。但当小程序退出后,背景音乐就会停止播放。

在小程序中,允许播放背景音乐、暂停背景音乐、停止背景音乐和随机定位背景音乐。这4个功能分别由如下4个方法实现。

  • wx. playBackgroundAudio:播放背景音乐
  • wx.pauseBackgroundAudio:暂停背景音乐
  • wx.stopBackgroundAudio:停止背景音乐
  • wx.seekBackgroundAudio:随机定位背景音乐

除此之外,小程序还提供了wx.getBackgroundAudioPlayerState方法用来获取背景音乐状态。这几个方法都需要设置一些属性。这些内容会连同本节的案例一起介绍。

本节要实现一个可以在线播放背景音乐的小程序,主界面如图1所示。

图1  播放背景音乐的主界面

该小程序用于控制部分由3个<button>组件和一个<slider>组件组成。点击“播放背景音乐”按钮,会播放背景音乐,点击“暂停背景音乐”按钮,会暂停播放背景音乐,再次点击“播放背景音乐”按钮,会继续播放背景音乐,点击“停止背景音乐”按钮,会停止背景音乐的播放。

通过滑动<slider>组件的滑杆,会定位到背景音乐的某一个位置,从该位置继续播放背景音乐。如果在模拟器上测试,在模拟器的下方,会出现一个音乐控制器,可以暂停和继续播放背景音乐。

下面是实现图10-11所示界面的布局代码。

  1. <view style="margin: 30px;">
  2. <view style="width: 100%;display: flex;">
  3. <text style="width: 100%;font-size: 60px;margin: 20px; text-align: center; ">{{formatedPlayTime}}</text>
  4. </view>
  5. <slider style="width: 100%" min="0" max="401" step="1" value="{{playTime}}" bindchange="seek" ></slider>
  6. <view style="font-size: 28px; width: 100%;display: flex;justify-content: space-between;box-sizing: border-box;">
  7. <text>00:00</text>
  8. <text>06:41</text>
  9. </view>
  10. <button style="margin-top:20px" bindtap="playBackgroundAudio">播放背景音乐</button>
  11. <button style="margin-top:20px" bindtap="pauseBackgroundAudio">暂停背景音乐</button>
  12. <button style="margin-top:20px" bindtap="stopBackgroundAudio">停止背景音乐</button>
  13. </view>

从这段布局代码可以看到,<slider>组件的拖动事件和seek函数绑定,而3个按钮分别和playBackgroundAudio、pauseBackgroundAudio和stopBackgroundAudio函数绑定。由于这些API无法获取背景音乐的时长,所以在布局代码中直接指定了时长(06:41)。<slider>组件的max属性值是401。每一个刻度表示1秒。06:41的时长正好是401秒。

下面是完整的JavaScript代码。

  1. // 背景音乐文件对应的Url(在线播放)
  2. var dataUrl =
  3. 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46'
  4. var app = getApp()
  5. Page({
  6. data: {
  7. playTime:0, // <slider>组件当前的位置
  8. formatedPlayTime: '00:00:00' // 当前播放的位置
  9. },
  10. //播放背景音乐
  11. playBackgroundAudio: function () {
  12. var that = this
  13. wx.playBackgroundAudio({
  14. dataUrl: dataUrl,
  15. title: '此时此刻',
  16. })
  17. this.enableInterval()
  18. app.globalData.backgroundAudioPlaying = true
  19. },
  20. // 暂停背景音乐
  21. pauseBackgroundAudio: function () {
  22. var that = this
  23. wx.pauseBackgroundAudio()
  24. app.globalData.backgroundAudioPlaying = false
  25. },
  26. // 停止背景音乐
  27. stopBackgroundAudio: function () {
  28. var that = this
  29. wx.stopBackgroundAudio({
  30. success: function (res) {
  31. that.setData({
  32. playTime: 0,
  33. formatedPlayTime: '00:00:00'
  34. })
  35. }
  36. })
  37. app.globalData.backgroundAudioPlaying = false
  38. },
  39. // 将秒格式的时间格式化为00:00:00形式(时分秒)
  40. formatTime: function (time) {
  41. if (typeof time !== 'number' || time < 0) {
  42. return time
  43. }
  44. var hour = parseInt(time / 3600)
  45. time = time % 3600
  46. var minute = parseInt(time / 60)
  47. time = time % 60
  48. var second = time
  49. return ([hour, minute, second]).map(function (n) {
  50. n = n.toString()
  51. return n[1] ? n : '0' + n
  52. }).join(':')
  53. },
  54. // 随机定位背景音乐
  55. seek: function (e) {
  56. clearInterval(this.updateInterval)
  57. var that = this
  58. wx.seekBackgroundAudio({
  59. position: e.detail.value,
  60. complete: function () {
  61. // 实际会延迟两秒左右才跳过去
  62. setTimeout(function () {
  63. that.enableInterval()
  64. }, 2000)
  65. }
  66. })
  67. },
  68. // 开启定时器,播放计时
  69. enableInterval: function () {
  70. var that = this
  71. update()
  72. // 开启定时器,500毫秒获取一次背景音乐的播放位置
  73. this.updateInterval = setInterval(update, 500)
  74. function update() {
  75. wx.getBackgroundAudioPlayerState({
  76. success: function (res) {
  77. if (res.currentPosition != undefined) {
  78. that.setData({
  79. playTime: res.currentPosition,
  80. formatedPlayTime: that.formatTime(res.currentPosition + 1)
  81. })
  82. }
  83. }
  84. })
  85. }
  86. },
  87. })

我们可以从如下几点理解这段代码。

  • wx.playBackgroundAudio方法支持在线播放背景音乐,通过dataUrl属性指定在线背景音乐的Url
  • 这里使用app.globalData.backgroundAudioPlaying变量保存背景音乐的播放状态。其中app.globalData是全局作用域。由于背景音乐对于当前小程序来说是全局的,所以要求即使播放背景音乐的当前窗口关闭,播放状态变量仍然有效,所以需要将这些相对于当前小程序是全局的变量放到app.globalData中
  • 本例使用了JavaScript中标准的定时器来获取背景音乐播放的当前位置,每500毫秒通过wx.getBackgroundAudioPlayerState方法获取一次背景音乐播放的位置

对本文感兴趣,可以加李宁老师微信公众号(unitymarvel):

关注  「极客起源」  公众号,获得更多免费技术视频和文章。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/473949
推荐阅读
相关标签
  

闽ICP备14008679号