那些年看微信小程序模仿网易云音乐（微信小程序音乐游戏）的相关回放

前言作者是一名前线士兵。学了一段时间小程序后，他决定复制一个手机软件来练手。他平时热爱音乐，发现各种音乐平台的小程序都比较简单，于是选择了这个方向模仿学习。在这个过程中，他也遇到了很多问题。在解决了这些问题之后，他也获得了一些收获。今天，我将与您分享在这个小程序中播放音乐最困难的部分。

首先，我要感谢这个项目的api提供者binaryify选择了这个项目。也是因为后端api是大老板提供的。当需要数据时，只需发起一些接口请求即可，这更适合我这样的初学者入门，只需编写一些简单的前端逻辑即可。

因为播放页面需要处理的事情很多（比如歌词的处理和显示，进度条的快进快退等。），而且坑很多，为了尽量描述清楚，本文主要介绍与音乐播放相关的各种操作，关于这个项目其他页面的细节将在后续文章中详细介绍。谢谢你的理解。

项目界面预览:git地址github.com/shengliangg…

云村和视频模块还没开发出来，以后有时间再写。这个项目会不定期更新，以后有时间我们会写一个项目使用文档。

一开始有几个关于音乐播放的接口请求，几乎都需要携带歌曲id。在这个项目的所有页面中，播放页面作为一个独立的页面存在，当其他页面跳转到播放页面时，它们将携带歌曲id。

接口封装这个项目中使用了很多接口请求。为了方便起见，我将它们封装在utils文件夹中的api.js文件中，然后引用页面中的接口管理文件。

//方法（HTTP请求方法），网易云API提供了两种请求方法:get和post，const GET =‘GET‘；const POST =‘POST‘；//定义全局常量baseUrl来存储前缀const base URL =‘http://neteasecloudsmusicapi . zhaoboy . com‘；函数request（方法，URL，数据）{return new promise（函数（resolve，reject）{ let header = {//定义请求头‘content -type‘:‘application/JSON‘，}；wx . request（{ URL:base URL+URL，method:方法，data:方法=== POST？JSON。stringify（data）:data，header: header，success（RES）{//请求成功//判断状态码----errCode状态。根据后端定义判断是否（RES . data . code = = 200）{//请求成功解析（RES）；} else {//其他异常拒绝（‘运行时错误，请稍后重试‘）；} }，fail（err）{//请求失败Reject（err）} } } Const API = { get song detail:（data）=》Request（get，`/song/detail `，data），//获取歌曲详细信息get song gurl:（data）=》Request（get，`/song/URL `，data），//获取歌曲路径}；Module.exports = {API: API}复制代码这里只有两个请求API在这个页面中使用，可以通过将它们引入到需要接口请求的页面中来使用。

const $ API = require（‘../../utils/API . js’）。API

音乐处理页面的数据源此页面中使用的数据源。

Data: {Musical: -1，//Music id hidden: false，//加载动画时是否隐藏isPlay: true，//无论歌曲是否播放，song: play（）函数都需要一个形式参数:Musical，这个参数非常重要，将在后续的接口请求中使用。

//Play music Play（musical）{ const that = this；//将这个对象复制到那个对象。setdata（{ hidden:false，musical}）应用程序。globaldata。Musiced = music ed//将当前音乐id传递给整个世界//通过music ed发起接口请求以请求歌曲详细信息//获取歌曲音频，然后将显示歌曲的名称和歌手的信息，即获取歌曲详细信息；如果失败，则回放出错。$ API . getsongdetail（{ ids:musical }）。然后（RES =》{//console . log（‘API成功，歌曲详细信息:‘，RES）；if（RES . data . songs . length = = 0）{ this . tips（‘服务器正忙~ ~‘，‘OK‘，False）} else {//Get successful app . global data . songname = RES . data . songs show lyric（）{ this . setdata（{ hidden lyric:！this . data . hiddenlyric }）}），复制代码格式化歌词，请求回歌词后，需要单独处理歌词。

//Format lyrics parse lyric:function（text）{ let result =感觉还不错，但可惜的是，好像到现在为止，这个原生音频播放器还不能设置歌词，只能设置基本属性，这也是一个小遗憾。希望微信团队以后能改进。

历史歌曲列表去重:每次用户播放一首歌曲时，它都会存储在历史列表中。在存储它之前，判断该歌曲是否已经存在。如果不存在，则直接存储在历史歌单数组后面。如果歌曲已经存在，它将从旧记录中删除并存储在新记录中。

//重复unique（arr，musical）{ let index = arr。indexOf（musical）//使用index of方法判断当前音乐剧是否已经存在，如果存在，则获取其下标if（index！= -1）{//如果历史播放中已经存在，则删除旧记录并存储在新记录中arr . splice（index，1）arr . push（musical）} else { arr . push（musical）//如果不存在，则直接存储在历史歌单中} return arr //返回新数组}复制代码的第二步是更新数据源的一些数据。操作和功能都比较简单，所以说第三步非常重要。使用BackgroundAudiomanager。OnTimeUpdate（）来监控背景音乐的进度更新，页面进度条的二次更新与此有关！wxml:{ { current time } } { { duration } }复制代码BackgroundAudioManager。CurrentTime和BackgroundAudioManager。CurrentTime将分别以秒为单位返回音频播放位置和音频长度，而进度条左侧的当前时间和右侧的歌曲总时长需要以00:00格式显示，因此使用formatSecond（）来设置秒的格式。

格式时间//格式时间格式秒（秒）{var second type =秒的类型；if（second type = = =“number“| | second type = = =“string“）{ second = parse int（second）；var minute = Math.floor（秒/60）；秒=秒-分钟* 60；return（“0“+分钟）。slice（-2）+“:“+（“0“+秒）。切片（-2）；} else { return“00:00“；}}，复制代码歌词滚动wxml:

纯音乐，无歌词{{item//进度条开始滑动，触发start:函数（e）{//控制进度条停止，防止进度条晃动this . setdata（{ slide:true }）}，当复制代码结束滑动时，通过后台audiomanager让音频跳转到指定位置。seek（position），然后判断当前歌词已经到了多少行，并立即在数据源中设置currentIndex，这样歌词就会改变上面歌词跳转方法中marginTop的值，歌词就会跳转到相应的位置。

//结束滑动触发器:function（e）{ const position = e . detail . valuelet backgroundaudiomanager = this.data.backgroundaudiomanager//Get背景音频示例//console . log（position）backgroundaudiomanager . seek（position）//更改歌曲的进度this . setdata（{ currentprocessnum:position，slide:false }）//确定有多少行用于（让j = 0；j第四步，使用backgroundAudioManager.onEnded（）监控背景音乐的自然结尾，然后调用nextSong（）函数，该函数用于播放等待列表中的歌曲。播放上一首歌曲，播放下一首歌曲播放上一首歌曲，所以现在这首歌曲成为下一首歌曲，因为当前播放的每首歌曲都将被推（）到历史列表中，所以将当前歌曲（从该数组中删除历史列表数组中的最后一项，并将其头插入到待播放列表中）放入待播放歌曲列表中，然后调用Play（）方法（incoming）。

//播放beforeSong的最后一首歌曲（）{！//播放和暂停HandleToggleBGAudio（）{ const backgroundAudiomanager = this.data.backgroundAudiomanager//If它当前正在播放，if（this . data . is Play）{ backgroundAudiomanager . pause（）；//Pause} else {//如果当前已暂停，backgroundaudiomanager . play（）；//play } this . setdata（{ isPlay:！这个。数据。isplay}}，复制代码总结这个项目并不复杂，适合初学者，因为不需要写复杂的后端，只需要写js逻辑就可以了，当我听到我的模仿小程序可以发布音乐时，我会有很大的成就感，但与此同时，仍然有一些坑等待大家处理。在写这个小程序的时候，我也遇到了不少问题。遇到问题先思考，想不出来就看看其他老板写的经验分享。因为我的经验不是特别丰富，我只是一个肤浅的介绍，很多问题的解决我都没有多想。如果您发现我的代码中有任何bug，欢迎您大大指出，并期待我们共同成长。

以上是那些年。看看微信小程序模仿网易云音乐的相关播放细节。更多内容请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 如何解决小程序请求会话失败的问题
• 小程序开发需要哪些技术？（小程序开发需要哪些技术？)
• 微信小程序如何优化？你可能不知道优化知识分享（小程序内存优化）
• 教你如何复制APP微信小程序(复制源代码)
• 微信小程序中echarts的用法以及你可能遇到的坑，快来收藏避雷吧！！（微信小程序echarts降低等级）

本文由主机参考刊发，转载请注明：那些年看微信小程序模仿网易云音乐（微信小程序音乐游戏）的相关回放 https://zhujicankao.com/101138.html