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

在微信开发中，写过的一个简单的音乐播放组件，记录下。

music

音乐播放组件。

属性

属性名	类型	默认值	说明
music	string		传入的音乐资源地址
musicstyle	string	(随便写了个)	音乐组件的样式
rotate	boolean	true	播放时是否有旋转效果
iconon	string	(随便写了个)	音乐播放时的icon地址
iconoff	string	(随便写了个)	音乐暂停时的icon地址

代码

properties: {
    // 音乐路径
    music: {
      type: string,
      value: '',
      observer: function (newval) {
        this._initmusic(newval)
      }
    },
    // 样式
    musicstyle: {
      type: string,
      value: 'position: absolute; right: 20rpx; top: 20rpx; width: 100rpx; height: 100rpx;'
    },
    // 播放时是否有旋转效果
    rotate: {
      type: boolean,
      value: true
    },
    // 播放时的icon路径
    iconon: {
      type: string,
      value: '/resources/img/music-on.png' // 请填写默认的图片地址
    },
    // 暂停时的icon路径
    iconoff: {
      type: string,
      value: '/resources/img/music-off.png' // 请填写默认的图片地址
    }
  }

初始化音乐

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

music: {
  type: string,
  value: '',
  observer: function (newval) {
    this._initmusic(newval)
  }
}

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

_initmusic: function (newval) {
  // 当页面传来新的music时，先销毁之前的audioctx，否则页面会很嗨
  if (this.data.audioctx) {
    this.data.audioctx.destroy()
  }
  if (newval) {
    var audioctx = wx.createinneraudiocontext()
    this.setdata({
        audioctx: audioctx
    })
    if (this.data.audiostatus == '1') {
        audioctx.autoplay = true
    }
    audioctx.loop = true
    audioctx.src = newval
  }
}

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

data: {
    icon: '',
    audiostatus: 1,
    audioctx: '',
    musicclass: 'music-on'
}

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

<image class='music {{ rotate && musicclass }}'  
        style="{{ musicstyle }}"  
        src="{{ icon }}"  
        bindtap='_switch'  
        wx:if="{{ music }}"></image>

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

ready() {
    this.setdata({
      icon: this.data.iconon
    })
}

音乐旋转效果

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

.music {
  position: absolute;
  z-index: 99;
  -webkit-animation-iteration-count: infinite;
}
/* 旋转class */
.music-on {
  animation: music-rotate 4s linear infinite;
}
/* 旋转动画 */
@keyframes music-rotate {
  0% {
    transform: rotatez(0deg);
  }

  100% {
    transform: rotatez(360deg);
  }
}

当 rotate 为true时，使 this.data.musicclass = 'music-on' ，就能实现旋转了。

爆丑照：

音乐控制

手动切换

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

_switch: function () {
  // 如果是播放就停止   
  if (this.data.audiostatus) {
    this.setdata({
      audiostatus: 0,
      icon: this.data.iconoff,
      musicclass: ''
    })
    this.data.audioctx.pause()
  // 如果是停止就播放 
  } else {
    this.setdata({
      audiostatus: 1,
      icon: this.data.iconon,
      musicclass: 'music-on'
    })
    this.data.audioctx.play()
  }
}

其它情况

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

• 分享时，进入选好友界面、音乐停止，分享回来后，音乐没有继续播放
• 从此页面跳转到下一个页面时，音乐还在继续
• 从此页面撤回到上一个页面时，音乐还在继续

解决的方法，是在组件的methods中又写了两个方法：

// 写在组件的methods中：

// 在引用组件页面的onshow()中调用
//  否则，如果当发生分享页面行为并返回时，音乐不会自动播放
onshow: function () {
  if (this.data.music && this.data.audiostatus) {
    this.data.audioctx.play()
  }
},

// 在引用组件页面的onhide()中调用
//  否则，在跳转到下一个页面后，音乐还在继续
onhide: function () {
  if (this.data.music && this.data.audiostatus) {
    this.data.audioctx.pause()
  }
  this.setdata({
    animationdata: {}
  })
}

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

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

// 写在调用页面中

onshow: function () {
    this.selectcomponent('#music-component').onshow()
},

onhide: function () {
    this.selectcomponent('#music-component').onhide()
}

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

// 页面关闭时销毁音乐
detached() {
    this.onhide()
}

使用

你可以

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