网易云音乐开发--音乐播放暂停切换上下首功能实现

播放歌曲性能优化

 问题就是我们点击播放，暂停之后，再次播放，它会多次发起请求。而我们现在对它的优化是，不需要重复的发起请求

这里我们通过把musicLink改为形参的方式，如果有给它传入参数，没有链接那么就让它发起请求，如果有那就继续走下去。而且我们将musicLink保存到data中 

那么它只向服务器发起一次请求 

进度条区域静态搭建

搭建进度条

 <view class="progressControl">
        <text>00:00</text>
        <!-- 总进度条 -->
        <view class="barControl">
        <!-- 实时进度条 -->
            <view class="audio-currentTime-Bar">
                <!-- 小圈球 -->
                <view class="audio-circle">
                    
                </view>
            </view>
        </view>
        <text>03:00</text>
    </view>

.progressControl{
    position: absolute;
    bottom: 200rpx;
    width: 640rpx;
    height: 80rpx;
    line-height: 80rpx;
    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;
}
.audio-circle{
    position: absolute;
    right: 12rpx;
    top: -5rpx;
    width: 12rpx;
    height: 12rpx;
    border-radius: 50%;
    background: #fff;
}

音乐总时长格式化显示

我们这个localhost:3000/recommend/songs

返回过来的数据的dt就是总时长 

 我们在data中定义俩个变量来存储时长

我们这里使用的是以分钟为单位，而返回来的数据是以毫秒为单位。我们需要转换，但是我们可以借助第三方的库Moment.js 中文网 (momentjs.cn)

npm install moment --save

老样子，我们下载好包，引用它。但是这样会出错，因为我们在miniprogram_npm下没有找到了，所以我们还需要构建npm

 这样就实现了 音乐总时长格式化显示

 let durationTime=moment(songData.songs[0].dt).format('mm:ss')
        this.setData({
            song:songData.songs[0],
            durationTime
        })

音乐实时播放时间格式化显示

这里我们需要使用这个函数

this.backgroundAudioManager.onTimeUpdate(()=>{
            let currentTime=moment(this.backgroundAudioManager.currentTime*1000).format('mm:ss')
            this.setData({
                currentTime
            })
        })

进度条动态实现

就是原先我们的宽度是写死100rpx，删掉这个，我们不能写死，我们需要动态的显示它

计算公式就是 实时时间/总时长=（求的值）/总宽度（也就是450rpx） 

 let currentWidth=this.backgroundAudioManager.currentTime/this.backgroundAudioManager.duration*450

音乐播放自动结束自动切歌下一首

观看文档，我们这里要使用BackgroundAudioManager.onEnded(function listener)这个事件 

 自动切换至下一首音乐，并且自动播放，然后将实时进度条的长度还原成0

 this.backgroundAudioManager.onEnded(()=>{
            PubSub.publish('switchType','next')
            this.setData({
                currentWidth:0,
                currentTime:'00:00'
            })
        })

播放音乐页面完成

实现页面直接的跳转完成设计

 toRecommendSong(){
            console.log(1);
            wx.navigateTo({
              url: '/pages/recommendSong/recommendSong',
            })
        },