微信小程序有旋转动画效果的音乐组件

在律师小程序开发中，写过的一个简单的音乐播放组件，记录下。

music 
音乐播放组件。

属性

代码

1. properties: {
2. // 音乐路径
3. music: {
4. type: String,
5. value: '',
6. observer: function (newVal) {
7. this._initMusic(newVal)
8. }
9. },
10. // 样式
11. musicStyle: {
12. type: String,
13. value: 'position: absolute; right: 20rpx; top: 20rpx; width: 100rpx; height: 100rpx;'
14. },
15. // 播放时是否有旋转效果
16. rotate: {
17. type: Boolean,
18. value: true
19. },
20. // 播放时的icon路径
21. iconOn: {
22. type: String,
23. value: '/resources/img/music-on.png' // 请填写默认的图片地址
24. },
25. // 暂停时的icon路径
26. iconOff: {
27. type: String,
28. value: '/resources/img/music-off.png' // 请填写默认的图片地址
29. }
30. }

初始化音乐

首先，在properties中接收页面传来的音乐文件地址，

1. music: {
2. type: String,
3. value: '',
4. observer: function (newVal) {
5. this._initMusic(newVal)
6. }
7. }

这里的处理是，一旦接收到页面传来的 music 地址，就初始化音乐：

1. _initMusic: function (newVal) {
2. // 当页面传来新的music时，先销毁之前的audioCtx，否则页面会很嗨
3. if (this.data.audioCtx) {
4. this.data.audioCtx.destroy()
5. }
6. if (newVal) {
7. var audioCtx = wx.createInnerAudioContext()
8. this.setData({
9. audioCtx: audioCtx
10. })
11. if (this.data.audioStatus == '1') {
12. audioCtx.autoplay = true
13. }
14. audioCtx.loop = true
15. audioCtx.src = newVal
16. }
17. }

audioStatus 用来记录音乐播放状态，在data中默认设置为1：

1. data: {
2. icon: '',
3. audioStatus: 1,
4. audioCtx: '',
5. musicClass: 'music-on'
6. }

wxml文件里，只用一个 标签：

1. <image class='music {{ rotate && musicClass }}'
2. style="{{ musicStyle }}"
3. src="{{ icon }}"
4. bindtap='_switch'
5. wx:if="{{ music }}"></image>

其中， icon 在组件ready()时赋值成播放状态的icon：

1. ready() {
2. this.setData({
3. icon: this.data.iconOn
4. })
5. }

音乐旋转效果

音乐播放时的旋转效果，是用css动画实现的，wxss文件如下：

1. .music {
2. position: absolute;
3. z-index: 99;
4. -webkit-animation-iteration-count: infinite;
5. }
6. /* 旋转class */
7. .music-on {
8. animation: music-rotate 4s linear infinite;
9. }
10. /* 旋转动画 */
11. @keyframes music-rotate {
12. 0% {
13. transform: rotateZ(0deg);
14. }
15.  
16. 100% {
17. transform: rotateZ(360deg);
18. }
19. }

当 rotate 为true时，使 musicClass 的值为 music-on，就能实现旋转了。

当然， musicClass 需要用 this.setData 的方式来切换值。

爆丑照：

音乐控制

手动切换

手动点击时，用取反的逻辑控制音乐的播放和暂停：

1. _switch: function () {
2. // 如果是播放就停止
3. if (this.data.audioStatus) {
4. this.setData({
5. audioStatus: 0,
6. icon: this.data.iconOff,
7. musicClass: ''
8. })
9. this.data.audioCtx.pause()
10. // 如果是停止就播放
11. } else {
12. this.setData({
13. audioStatus: 1,
14. icon: this.data.iconOn,
15. musicClass: 'music-on'
16. })
17. this.data.audioCtx.play()
18. }
19. }

其它情况

同时，还要对下列情况做处理：

分享时，进入选好友界面、音乐停止，分享回来后，音乐没有继续播放 
从此页面跳转到下一个页面时，音乐还在继续 
从此页面撤回到上一个页面时，音乐还在继续 
解决的方法，是在组件的methods中又写了两个方法：

1. // 写在组件的methods中：
2.  
3. // 在引用组件页面的onShow()中调用
4. // 否则，如果当发生分享页面行为并返回时，音乐不会自动播放
5. onShow: function () {
6. if (this.data.music && this.data.audioStatus) {
7. this.data.audioCtx.play()
8. }
9. },
10.  
11. // 在引用组件页面的onHide()中调用
12. // 否则，在跳转到下一个页面后，音乐还在继续
13. onHide: function () {
14. if (this.data.music && this.data.audioStatus) {
15. this.data.audioCtx.pause()
16. }
17. this.setData({
18. animationData: {}
19. })
20. }

这两个方法分别在页面中的 onShow 和 onHide 中调用，调用方式就是父组件获取到子组件实例对象：

例如，给组件加id为"music-componet"，调用时就是：

1. // 写在调用页面中
2.  
3. onShow: function () {
4. this.selectComponent('#music-component').onShow()
5. },
6.  
7. onHide: function () {
8. this.selectComponent('#music-component').onHide()
9. }

最后，在组件的detached中也调用一下 onHide 方法：

1. // 页面关闭时销毁音乐
2. detached() {
3. this.onHide()
4. }

使用 
你可以

通过阅读本文，根据自身实际情况写一个 
或者，直接凑合用

相关阅读

律师小程序开发框架选择

微信小程序swiper高度自适应，swiper的子元素高度不固定解决方案

律师小程序开发：scroll-view组件的scroll-into-view属性失效问题

律师微信小程序开发：小程序图片使用示例

律师小程序开发前必须了解的小知识