Improvement of wechat applet 26 playing music page ②

26.1 Realize the next song and the previous song

---

Interface ： http://localhost:3000/song/detail?ids=347230 Get music details , In this case, we only need to get musicId You can get All the information about this song .

1. Encapsulate a method to obtain songs and update song information

//  Get the details of a single music 
    async getMusicDetail(musicId) {
    
        //http://localhost:3000/song/detail?ids=347230
        let data = await request("song/detail", {
    ids: musicId});
        let song = data.songs[0];
        this.setData({
    
            song
        })
    },

2. direct Go to call Related methods Can achieve The function of . Our approach In fact, it has been written .

    //  Click the callback of cutting song 
    handleSwitch(event){
    

        // 1. PubSubJS  Implementation method 
        //  Get the type of cut song 
        let type = event.currentTarget.id;
        PubSub.publish('switchType', type);
        PubSub.subscribe('musicId', (msg, musicId) => {
    
            this.setData({
    
                isPlay:  true
            });
            this.getMusicDetail(musicId);
            this.musicControl(this.data.isPlay,musicId);
        });
    },

---

26.2 Static build playback progress bar

<view class="songDetailContainer">
    <view class="author">{
   {song.ar[0].name}}</view>
    <view class="circle"></view>
    <image class="needle {
     {isPlay? 'needleRotate':''}}" src="/static/images/song/needle.png"></image>

    <view class="discContainer {
     {isPlay? 'discRotate':''}}" >
        <image class="disc" src="/static/images/song/disc.png"></image>
        <image class="musicImg" src="{
     {song.al.picUrl}}"></image>
    </view>
<!-- Progress bar control area -->
    <view class="progressControl">
        <text>00:00</text>
        <!-- General progress bar -->
        <view class="barControl">
            <!-- Real time progress bar -->
            <view class="audio-currentTime-Bar">
                <!-- Little ball -->
                <view class="audio-circle"></view>
            </view>
        </view>
        <text>03:00</text>
    </view>

<!-- The bottom controls the playback area -->
    <view class="musicControl">
        <text class="iconfont icon-zhongbo"></text>
        <text id="pre" class="iconfont icon-shangyishoushangyige" bindtap="handleSwitch"></text>
        <text class="iconfont {
     {isPlay? 'icon-zanting':'icon-bofang'}} big" bindtap="handleMusicPlay"></text>
        <text id="next" class="iconfont icon-xiayigexiayishou" bindtap="handleSwitch"></text>
        <text class="iconfont icon-24gl-playlistMusic5"></text>
    </view>
</view>

/* Progress bar control area */
.progressControl {
    
    width: 640rpx;
    height: 80rpx;
    line-height: 80rpx;
    line-height: 80rpx;
    padding-bottom: 200rpx;
    display: flex;

}

.barControl {
    
    position: relative;
    width: 450rpx;
    height: 4rpx;
    background: rgba(0,0,0,0.4);
    margin: auto;
}

.audio-currentTime-Bar {
    
    position: absolute;
    top: 0;
    left: 0;
    width: 100rpx;
    z-index: 1;
    height: 4rpx;
    background: red;
}

/* Little ball */
.audio-circle {
    
    position: absolute;
    right: -12rpx;
    top: -5rpx;
    width: 12rpx;
    height: 12rpx;
    border-radius: 50%;
    background: #fff;
}

---

26.3 Dynamically display the relevant contents of the progress bar

1. Dynamic display time

<!-- Progress bar control area -->
    <view class="progressControl">
        <text>{
   {curretTime}}</text>
        <!-- General progress bar -->
        <view class="barControl">
            <!-- Real time progress bar -->
            <view class="audio-currentTime-Bar">
                <!-- Little ball -->
                <view class="audio-circle"></view>
            </view>
        </view>
        <text>{
   {durationTime}}</text>
    </view>

2. Use Third party date processing class library Moment.js

3. Encapsulate an acquisition Function of total playback time

 //  Get the playback time 
    getTime(song){
    
        let durationTime = moment(song.dt).format('mm:ss');
        this.setData({
    
            durationTime
        })
    },

4. Add one to update monitor

        //  The progress of the music manager's real-time playback 
        appInstance.globalData.backgroundAudioManager.onTimeUpdate(() => {
    
            let currentTime = moment(appInstance.globalData.backgroundAudioManager.currentTime * 1000).format('mm:ss');
            if(this.data.isPlay && this.data.song.id == this.data.preMusicId){
    
                this.setData({
    
                    currentTime
                });
            }
        });

5. final js Code （ contain Repair Before Of Playing problems . You can use this code .）

// pages/songDetail/songDetail.js
import request from "../../utils/request";
import PubSub from "pubsub-js";
import moment from 'moment';
const appInstance = getApp();
Page({
    

    /** *  Initial data of the page  */
    data: {
    
        isPlay: false, //  Identify whether the music is played 
        song: {
    },
        preMusicId: "", //  Music played before  ID
        currentTime: "00:00", //  Real time 
        durationTime: "00:00" //  Total duration 
    },

    //  Click the callback of cutting song 
    handleSwitch(event){
    

        // 1. PubSubJS  Implementation method 
        //  Get the type of cut song 
        let type = event.currentTarget.id;
        PubSub.publish('switchType', type);
        PubSub.subscribe('musicId', (msg, musicId) => {
    
            this.setData({
    
                isPlay:  true
            });
            this.getMusicDetail(musicId);
            this.musicControl(this.data.isPlay,musicId);
        });
    },

    //  Get the details of a single music 
    async getMusicDetail(musicId) {
    
        //http://localhost:3000/song/detail?ids=347230
        let data = await request("song/detail", {
    ids: musicId});
        let song = data.songs[0];

        //  Get the total playing time 
        this.getTime(song);

        this.setData({
    
            song
        })
    },

    //  Get the total playing time 
    getTime(song){
    
        let durationTime = moment(song.dt).format('mm:ss');
        this.setData({
    
            durationTime
        })
    },


    //  Click play / Suspended   Callback function 
    handleMusicPlay(){
    
        this.setData({
    
            isPlay:!this.data.isPlay
        });
        this.musicControl(this.data.isPlay,this.data.song.id)
    },

    //  Control music playback / Suspended   Function function 
    async musicControl(isPlay, musicId) {
    
        console.log(musicId + "||" + this.data.preMusicId);
        if (isPlay) {
    //  The music starts playing 
            if(this.data.preMusicId == musicId || musicId == appInstance.globalData.musicID){
    
                appInstance.globalData.backgroundAudioManager.play();
            }else{
    
                //  Get music playback link 
                appInstance.globalData.backgroundAudioManager.stop();
                let musicLinkData = await request('song/url', {
    id: musicId});
                appInstance.globalData.backgroundAudioManager.title = this.data.song.name;
                appInstance.globalData.backgroundAudioManager.src = musicLinkData.data[0].url;
            }

        } else {
    //  Pause play 
            appInstance.globalData.backgroundAudioManager.pause();
        }
        this.setData({
    
            preMusicId: musicId
        })
    },

    /** *  Life cycle function -- Monitor page loading  */
    onLoad(options) {
    
        // Get event object 
        let that = this;
        const eventChannel = this.getOpenerEventChannel();
        eventChannel.on('song', function(data) {
    
            that.setData({
    
                song: data
            })
        });

        //  Get the total playing time 
        this.getTime(this.data.song);

        wx.setNavigationBarTitle({
    
            title: this.data.song.name
        });

        if(appInstance.globalData.isMusicPlay && this.data.song.id === appInstance.globalData.musicID){
    
            this.handleMusicPlay();
        }

        //  Music manager plays monitor 
        appInstance.globalData.backgroundAudioManager = wx.getBackgroundAudioManager();
        appInstance.globalData.backgroundAudioManager.onPlay(() => {
    
            this.setData({
    
                isPlay: true
            });
            appInstance.globalData.musicID = this.data.preMusicId;
            appInstance.globalData.isMusicPlay = true;
        });
        //  Music Manager pauses listening 
        appInstance.globalData.backgroundAudioManager.onPause(() => {
    
            this.setData({
    
                isPlay: false
            })
            appInstance.globalData.musicID = this.data.preMusicId;
            appInstance.globalData.isMusicPlay = true;
        });
        //  Music managers stop listening 
        appInstance.globalData.backgroundAudioManager.onStop(() => {
    
            this.setData({
    
                isPlay: false
            })
            appInstance.globalData.musicID = this.data.preMusicId;
            appInstance.globalData.isMusicPlay = false;
        });
        //  The progress of the music manager's real-time playback 
        appInstance.globalData.backgroundAudioManager.onTimeUpdate(() => {
    
            let currentTime = moment(appInstance.globalData.backgroundAudioManager.currentTime * 1000).format('mm:ss');
            if(this.data.isPlay && this.data.song.id == this.data.preMusicId){
    
                this.setData({
    
                    currentTime
                });
            }
        });

    },

    /** *  Life cycle function -- Listening page first rendering completed  */
    onReady() {
    

    },

    /** *  Life cycle function -- Monitor page display  */
    onShow() {
    

    },

    /** *  Life cycle function -- Monitor page hidden  */
    onHide() {
    

    },

    /** *  Life cycle function -- Monitor page uninstall  */
    onUnload() {
    

    },

    /** *  Page related event handler -- Monitor user pull-down action  */
    onPullDownRefresh() {
    

    },

    /** *  Handling function of page pull bottom event  */
    onReachBottom() {
    

    },

    /** *  Users click the upper right corner to share  */
    onShareAppMessage() {
    

    }
})