VPS参考测评推荐
专注分享VPS主机优惠信息
衡天云优惠活动
华纳云最新优惠促销活动
jtti最新优惠促销活动

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

locvps
主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

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

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

首先,我要感谢这个项目的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,欢迎您大大指出,并期待我们共同成长。

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

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

  • 暂无相关推荐文章

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

【腾讯云】领8888元采购礼包,抢爆款云服务器 每月 9元起,个人开发者加享折上折!
打赏
转载请注明原文链接:主机参考 » 那些年看微信小程序模仿网易云音乐(微信小程序音乐游戏)的相关回放
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!