Wechat mini program has music component with rotating animation effect

In wechat development, wrote a simple music player component, recorded.

music

Music player component.

attribute

code

  properties: {
    // Music path
    music: {
      type: String.value: ' '.observer: function (newVal) {
        this._initMusic(newVal)
      }
    },
    / / style
    musicStyle: {
      type: String.value: 'position: absolute; right: 20rpx; top: 20rpx; width: 100rpx; height: 100rpx; '
    },
    // Whether there is rotation effect when playing
    rotate: {
      type: Boolean.value: true
    },
    // Icon path when playing
    iconOn: {
      type: String.value: '/resources/img/music-on.png' // Please fill in the default image address
    },
    // Icon path when paused
    iconOff: {
      type: String.value: '/resources/img/music-off.png' // Please fill in the default image address}}Copy the code

Initialize music

First, receive the address of the music file from the page in Properties,

music: {
  type: String.value: ' '.observer: function (newVal) {
    this._initMusic(newVal)
  }
}
Copy the code

We initialize the music as soon as we receive the music address from the page:

_initMusic: function (newVal) {
  // When a new music is sent to the page, destroy the previous audioCtx first, otherwise the page will be very high
  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
  }
}
Copy the code

AudioStatus is used to record the status of music playback. In data, the default setting is 1:

data: {
    icon: ' '.audioStatus: 1.audioCtx: ' '.musicClass: 'music-on'
}
Copy the code

In the WXML file, only one tag is used:

<image class='music {{ rotate && musicClass }}'  
        style="{{ musicStyle }}"  
        src="{{ icon }}"  
        bindtap='_switch'  
        wx:if="{{ music }}"></image>
Copy the code

Where icon is assigned to play state icon when the component is ready() :

ready() {
    this.setData({
      icon: this.data.iconOn
    })
}
Copy the code

Music rotation effect

The rotation effect of music playback is realized with CSS animation, WXSS file is as follows:

.music {
  position: absolute;
  z-index: 99;
  -webkit-animation-iteration-count: infinite;
}
/* Rotate class */
.music-on {
  animation: music-rotate 4s linear infinite;
}
/* Rotate animation */
@keyframes music-rotate {
  0% {
    transform: rotateZ(0deg); 100%} {transform: rotateZ(360deg); }}Copy the code

Rotate is true and musicClass is ‘music-on’.

Of course, musicClass needs to switch values in the this.setData way.

Blasting ugly figure:

Music control

The manual switch

When manually clicking, use reverse logic to control the play and pause of music:

_switch: function () {
  // Stop it if it is playing
  if (this.data.audioStatus) {
    this.setData({
      audioStatus: 0.icon: this.data.iconOff,
      musicClass: ' '
    })
    this.data.audioCtx.pause()
  // If it is stopped, play
  } else {
    this.setData({
      audioStatus: 1.icon: this.data.iconOn,
      musicClass: 'music-on'
    })
    this.data.audioCtx.play()
  }
}
Copy the code

Other situations

At the same time, the following cases should be dealt with:

• When sharing, the screen for selecting friends is displayed and the music stops. After sharing, the music does not continue to play
• When I jump to the next page, the music continues
• When you retract from this page to the previous one, the music continues

The solution is to add two more methods to the component’s methods:

// In the component's methods:

// called in onShow() on the reference component page
// Otherwise, the music will not play automatically if the page is shared and returned
onShow: function () {
  if (this.data.music && this.data.audioStatus) {
    this.data.audioCtx.play()
  }
},

// called from onHide() in the reference component page
Otherwise, the music continues after jumping to the next page
onHide: function () {
  if (this.data.music && this.data.audioStatus) {
    this.data.audioCtx.pause()
  }
  this.setData({
    animationData: {}})}Copy the code

These methods are called in onShow and onHide on the page, respectively, when the parent component gets the child component instance object:

For example, to add a

component with id “music-Componet”, this is called:

// Write in the call page

onShow: function () {
    this.selectComponent('#music-component').onShow()
},

onHide: function () {
    this.selectComponent('#music-component').onHide()
}
Copy the code

Finally, in the detached component, call the onHide method as well:

// Destroy the music while the page is closed
detached() {
    this.onHide()
}
Copy the code

use

You can

• Read this article and write one according to your own situation
• Or, just make do