WeChat Applet Learn Notes Music Player (bottom playback component)

WeChat Applet Learning Notes (IV) Music Player (Bottom Playback Component)

The playback component at the bottom mainly consists of playback control (previous song, playback/pause, next song) and playback progress bar.The content of these components changes according to the song currently playing, so they need to be bound dynamically.In addition, the Play and Pause button can only display one of them at any time, depending on the current state of the song being played. If paused, the Play is displayed, otherwise the Pause is displayed.So first add data about the song being played to the data of musicdemo.js.

1. musicdemo.js

data: {
    /**Current song playing status, true playing, false pausing */
    isPlay:true,
    /**Current Play Location (Time) */
    currentTime: 1000,
    /**The total time the song is currently playing */
    totalTime: 6800, 
    /**Playing song information */
    currentPlayMusic: {
      musicImage:"/img/list_1.jpg",
      musicName:"Moving heart",
      singerName:"Ginger Yuheng",
      musicSrc:"/music/Moving heart.mp3"
    },
    /**Page Tab Tag Data */
    tab:0     
  },

2. Design of musicdemo.wxml

<!--Playback component at bottom of page-->
  <view class="footer">
    <!--Playback Control-->
    <view class="current-music-controls">
      <image src="/img/myUp.png" />
      <image src="/img/icon-play.png" hidden="{{isPlay}}" />
      <image src="/img/icon-pause.png" hidden="{{!isPlay}}" />
      <image src="/img/myNext.png" />
    </view>
    <!--Play progress bar-->
    <view class="current-music-playback-progress">
      <text>{{currentTime}}</text>
      <slider block-size="12" block-color="red"></slider>
      <text>{{totalTime}}</text>
    </view>
  </view>
  <!--End of Play Component at Bottom of Page-->

3. Setup of musicdemo.wxss style

/*==============Bottom Style Settings=======================*/
.footer{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 12vh;
  background-color: yellowgreen;
}
.current-music-controls{
  flex: 3;
  text-align: center;
}
.footer>.current-music-controls>image{
  margin: 0 1px;
  width: 65rpx;
  height: 65rpx;
}
.current-music-playback-progress{
  flex: 7;  
}
.footer>.current-music-playback-progress>slider{
  display: inline-block;
  width: 35vw;
}

The end result is as follows

4. Playing music

Music playback uses InnerAudioContext, which can get instances through the wx.createInnerAudioContext interface.Its common properties are

string src: address of the audio resource for direct playback

boolean autoplay: Whether to play automatically, defaulting to false

number duration: The length of the current audio in units s.Return only if there is currently a valid src (read-only)

number currentTime: Play location (units s) of the current audio.Return only if there is currently a valid src, leaving the last 6 decimal places (read-only)

Common methods:

InnerAudioContext.play(): Play

InnerAudioContext.pause(): Pause

InnerAudioContext.seek(number position): Go to the specified location

InnerAudioContext.onEnded(function callback): Listens for events where audio is played naturally to the end

InnerAudioContext.onTimeUpdate(function callback): Listens for audio playback progress update events.

The above attributes and methods are used in this program. For other attributes and methods, please refer to the official documentation.

1. Create an instance of InnerAudioContext

First create the musicCtx in the data.Then create an instance of InnerAudioContext in the onLoad function.

data: {
    /**InnerAudioContext Example */
    musicCtx:"",



/**
   * Lifecycle Functions--Listen for Page Loading
   */
  onLoad: function (options) {
    this.data.musicCtx = wx.createInnerAudioContext();//Create InnerAudioContext instance
    this.data.musicCtx.autoplay=true;//Autoplay
    this.data.musicCtx.src=this.data.currentPlayMusic.musicSrc;//Set up to play music
  },

At this time, music can be played.

2. Pause and play of music

When the program runs, the default song is played, that is, it is in the playing state.Next, the control function of music playback is implemented.First bind events to play and pause buttons, and then process the events in the js file.

musicdemo.wxml code

<image src="/img/icon-play.png" hidden="{{isPlay}}" bindtap="playMusic" />
<image src="/img/icon-pause.png" hidden="{{!isPlay}}" bindtap="pauseMusic" />

musicdemo.js code

/**Music Playback Control Function */
  musicPlay:function(){
    this.data.musicCtx.play();
    this.setData({
      isPlay:true
    })
  },
  musicPause:function(){  
    this.data.musicCtx.pause();
    this.setData({
      isPlay:false
    })
  },

  /**
   * Lifecycle Functions--Listen for Page Loading
   */

3. Show playback progress

Play progress, you need to get the current music playback position and the total length of the music, and then format and display the time.The music Demo.wxml code is modified as follows:

<!--Play progress bar-->
    <view class="current-music-playback-progress">
      <text>{{showMusicPlayTime}}</text>
      <slider value="{{currentTime}}" block-size="12" block-color="red" min="0" max="{{totalTime}}"></slider>
      <text>{{showMusicTotalTime}}</text>
    </view>

The music Demo.js code is modified as follows:

First declare the function above the page

/**Formatting time */
function formatTime(time) {
  var f = parseInt(time / 60)
  var s = (time % 60).toFixed(0)
  return f + ":" + s
}

Page({
  /**
   * Initial data for page
   */
  data: {
    /**Current Display Play Time */
    showMusicPlayTime:"",
    /**Show the total time of the current song */
    showMusicTotalTime:"",



/**
   * Lifecycle Functions--Listen for Page Loading
   */
  onLoad: function (options) {
    this.data.musicCtx = wx.createInnerAudioContext();//Create InnerAudioContext instance
    this.data.musicCtx.autoplay=true;//Autoplay
    this.data.musicCtx.src=this.data.currentPlayMusic.musicSrc;//Set up to play music
    
    this.data.musicCtx.onTimeUpdate(() => {//Update Progress Bar
      this.setData({
        currentTime:this.data.musicCtx.currentTime,
        totalTime:this.data.musicCtx.duration,
        showMusicPlayTime: formatTime(this.data.musicCtx.currentTime),
        showMusicTotalTime: formatTime(this.data.musicCtx.duration)
      })
    })
  },

4. Achieve progress bar selection playback

To achieve progress bar selection playback, you need to get the time point the user selected on the progress bar.Then call the seek method of InnerAudioContext.

InnerAudioContext.seek(number position): Jump to the specified location

Parameter: number position jump time, unit s.Accurate to the last 3 decimal places, supporting ms-level accuracy

bindchange eventhandle   no Event triggered after a drag is completed, event.detail = {value}

The music demo.wxml code is as follows:

<slider bindchange="seekPlay" value="{{currentTime}}" block-size="12" block-color="red" min="0" max="{{totalTime}}"></slider>

The musicdemo.js code is as follows:

/**Progress Bar Click Play */
  seekPlay:function(e){
    this.data.musicCtx.seek(e.detail.value);//Jump to Play
  },

The playback component at the bottom of the page is now complete.

Tags: Front-end

Posted on Fri, 27 Mar 2020 02:04:13 -0400 by pavanpuligandla