小程序背景音乐功能实现

Posted on

好久没有做小程序，今天看到一个需求，要做一个页面，需要带背景音乐。我看了官方文档，觉得这方面写的很好，但是没有示例，所以就想写一篇相关文章记录一下，也可以帮到其他人。

需求分析

实现一个带有背景音乐的界面，进入页面音乐会自动播放，当然，以为可以控制音乐的开始，暂停。

用到的知识

  • 小程序背景音乐接口
  • css动画

效果图

效果图

实现

wxml

1
2
3
<view class='music {{on? "on": ""}}'>
    <image src='../../images/music.png' style='width: 60rpx;height: 60rpx;' bindtap='stop'></image>
</view>

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
Page({
  data: {
    imgUrls: [
      '../../images/20190121204431.png',
      '../../images/20190121204408.png',
      '../../images/20190121204435.png',
      '../../images/20190121204440.png'
    ],
    image: '../../images/ewm.png',
    on: true   // 控制音乐的状态，以及图标是否旋转
  },

    // 放在onReady函数中，使在进入页面后，音乐就自动开始
  onReady () {
    // 获取BackgroundAudioManager 实例
    this.back = wx.getBackgroundAudioManager() 
   
    // 对实例进行设置
    this.back.src = "http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46"
    this.back.title = 'Tassel'   // 标题为必选项
    this.back.play()               // 开始播放
  },

  stop() {           // 点击音乐图标后出发的操作
    this.setData({
      on: !this.data.on
    })
    if (this.data.on) { 
      // 这里有点不明白，如果不重新加链接，音乐不会播放；  希望知道的人能分享告诉我
      this.back.src = "http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46"
      this.back.title = 'Tassel'
      this.back.play()
    } else {
      this.back.stop()
    }
  }
})

css的主要代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.music{
  display: inline-block;
  width: 60rpx;
  height: 60rpx;
  position: fixed;
  top: 40rpx;
  right: 40rpx;
  z-index: 9999;
}

.on{
  animation:rotating 2.5s linear infinite;
}   // css动画，控制图标一直旋转

@keyframes rotating{
from{transform:rotate(0)}
to{transform:rotate(360deg)}
}

到这里，小程序背景音乐的功能就实现了，希望能对大家产生一定帮助。