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

这篇具有很好参考价值的文章主要介绍了网易云音乐开发--音乐播放暂停切换上下首功能实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

播放歌曲性能优化

网易云音乐开发--音乐播放暂停切换上下首功能实现问题就是我们点击播放，暂停之后，再次播放，它会多次发起请求。而我们现在对它的优化是，不需要重复的发起请求

网易云音乐开发--音乐播放暂停切换上下首功能实现这里我们通过把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',
            })
        },

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