2023年7月11日发(作者：)

微信⼩程序⾳乐播放器写在前⾯　　1.⼊门⼏天⼩⽩的作品，希望为您有帮助，有好的意见或简易烦请赐教　　2.微信⼩程序审核⾳乐类别已经下架，想要发布选题需慎重。附⼀个参考链接，感谢　　3.写的过程中参考了前辈们的⽅法，借过⼏位博客园、CSDN、简书前辈的路，这⾥表⽰感谢。　　4.官⽅API很重要写在第⼆　　资深⼤⽜在地铁上问我有没有玩过微信⼩程序，⾃觉惭愧。于是萌发了写个⼩程序长长见识的想法，毕竟，谁都想要做⼀位⾏业⼤⽜嘛。写这个⼩程序花了4天，中间第⼀天⽆从下⼿，第⼆天开悟，到后两天的优化。这中间我收获极⼤，感谢⽣活。OK,废话不多说。进⼊正⽂正⽂在这⾥　　先看效果吧　　⼩程序有两个页⾯，主页与播放页，因为采⽤了leanCloud作为后台数据开发，所以有⼀个lib包　　树结构，上图 附　　index页的功能描述：提供⾳乐查找与选择，搜索框不输⼊点击搜索得到数据库中所以⾳乐⽂件(.mp3格式)，⽀持对歌名或歌⼿的模糊查询；点击列表中的某⼀⾸即可跳转⾄播放页进⾏播放，从播放页清单回退⾄index页时，index页底部有播放⼩窗，点击可回到播放页　　看这⾥：　　

　　代码送上：

搜索

搜索结果 {{}} {{}} 暂时没有库存，联系冯⼤神上传哈 {{songName}}

　　这个css样式代码我觉得就没啥可看的啦，这个还是看⾃⼰喜好调，如果需要的话，⽂章最下⽅附有Github链接，重要的还是在上啦，⼀起来看看(我觉得不错的地⽅直接在代码上标注了，可以参考⼀下)const AV = require("../../libs/av-weapp-min");//这⾥是对LeanCloud的引⽤，⼤家需要的话可问度娘，很多详细教程，我还是蛮喜欢这个⼯具的var app=getApp()Page({ /** * 页⾯的初始数据 */ data: { imageUrl: "/", searchValue:'',　　　　　　//搜索值 centent_Show: true, //这个可看wxml中的wx:if属性，⽤来动态显⽰与隐藏 searchTop:false, //同上 bgimage: '', //背景图⽚，在得到搜索结果的时候显⽰ toName:'', songName:'' }, searchValueInput: function (e) {//得到搜索框的内容并渲染到data下的searchValue中 var value = ; a({ searchValue: value, }); }, sousuoButton:function(){//对LeanCloud数据库的查询操作 var that=this; //这⾥⾮常重要，注意，此函数中then⽅法内还有⼀个函数，⽽该函数需要⽤到setData渲染数据。经过两层不可以直接⽤a var nameQuery1 = new ('_File'); ns('name', Value); var nameQuery2 = new ('_File'); ns('name', '.mp3'); var query = new (nameQuery1, nameQuery2);//这⾥相当于数据库where语句下的and操作 ().then(function (results) { // results is an array of . //将data转成json格式 //转为数组 var jsonObj = (ify(results)); ist=(); //设置了全局变量，concat()⽅法为数组的复制，playing页⾯需要。具体⽤法可问度娘，app对象为顶部创建的对象 if ( == 0) { a({ centent_Show: false, }); return; } a({ json: ist, searchTop:true, bgimage: "/", centent_Show:true }); (.c) }, function (error) { (error); // error is an instance of AVError. }); }, //点击底部⾳乐bar进⼊play界⾯ littlebar: function () { //这⾥有⼀个较难解决的问题，我会在下⾯单独写出，⼤神要是有思路请赐教，毕竟我才⼊门4天，很多都不懂 var pages=getCurrentPages(); var playingPage=pages[-2]; a({ angle:, }) teBack(); }, //点击清单跳转到播放界⾯　　//data-name="{{}}" data-url="{{}}"//只有在列表渲染的view控件中设置这些属性，该函数才可得到点击后对应的属性（可见上⾯的） playTheMusic:function(e){ (); //⼀个调试⽅法，调试器输出点击的歌曲名 a({ toName: }); var songUrl = ; var songName = ; me = songName; var theUrl = "../playing/playing?songUrl=" + songUrl + "&songName=" + songName //url携带参数 ctTo({ //此种跳转当前页⾯数据会保存在页⾯栈中，可以回退，可问度娘

　　　　url: theUrl,　　}) }, /** *

⽣命周期函数--监听页⾯加载 */ onLoad: function (options) { /**

*

监听⾳乐播放

*/ groundAudioPlay(function () { // callback ('onBackgroundAudioPlay') }) },/** *

⽣命周期函数--监听页⾯显⽰ */ onShow: a({ songName: me , json: ist, searchTop: true, });

}})　　好了，这⾥我想谈⼀下在中我提到的单独讲的内容。情景在于微信⼩程序界⾯之间的跳转，使⽤teTo()⽅法跳转到另⼀个页⾯时可以将当前页⾯存⼊页⾯栈，再通过teBack()⽅法对页⾯栈出栈操作，可回退到当前页⾯，使⽤ctTo()直接跳转，不存⼊页⾯栈。在这个程序中，index->playing->index->playing重复多次⽆法直接实现。这个问题我想了很久还是没有完美的将其解决。　　我的暂时逻辑是：点击对应⾳乐使⽤ctTo()⽅法，不保存页⾯栈，跳转⾄playing页；在playing页点击list图标使⽤teTo()，保存页⾯栈，同时跳到index页，这时候会调⽤onShow()函数，将保存的list信息渲染到index页⾯上；点击index底部的播放⼩框调⽤teBack()⽅法回到playing页(playing页的数据较多，所以采⽤了这种逻辑)　　哪位⼤哥有更好解决⽅法烦请赐教哈　　接下来是playing页：（推荐使⽤）　　此页⾯需要完成播放、暂停、上⼀曲、下⼀曲、回到index页、动态显⽰播放时间和总长度(部分实现)、快进(还未实现)　　看界⾯：　　　　然后上代码了：　　：图标来源于百度图⽚，简单ps抠图后传⾄云端使⽤；中间专辑图旋转感谢，其中的旋转快慢，每次⾓度可通过调节常量值实现，下⾯代码有标注 {{name}} {{cur}} {{duration}} 同样，可在我的Github中查看下⾯是展⽰的时刻，各种逻辑在代码中直接标注了// pages/playing/t AV = require("../../libs/av-weapp-min");var app = getApp()Page({ /** * 页⾯的初始数据 */ data: { name:'测试', url:'', imageUrl:'/', homeImage:"/", animationData: {}, isPlay:false, //播放标志 thePosition:0, //⽤来保存暂停时播放位置 angle:0, //⽤来不断保存旋转次数，⽤于解决界⾯多次跳转后旋转失速问题 cur:'--:--', //当前时间 duration:'--:--' //总时长

}, //返回到清单页//此处在上⾯有提及，点击list图标到index页⾯，并将跳转前最后⼀个旋转⾓度渲染给全局变量 backIndex: function () { teTo({ url: '../index/index', }); =; }, /** * ⽣命周期函数--监听页⾯加载 */ onLoad: function (options) { //加载传递过来的参数　　//options为随url传递过来的参数 a({ name: me, url: l, imageUrl:"/", backUrl:"/", nextUrl:"/", playOrStopUrl:"/", isPlay:true }) //加载页⾯时执⾏播放动作 ckgroundAudio({ dataUrl: , }) }, //播放/暂停 play:function(){ const backgroundAudioManager = kgroundAudioManager(); var theTime; var allTime; if(){ ackgroundAudio(); //推荐都使⽤这个API，我之前不知道这个API，导致在后来的开发中⽆法实现上⾯列举的全部功能 theTime = tTime;//不⽢⼼，所以在点击播放或暂停时可对页⾯进⾏时间的动态渲染，也算是完成了⼀点吧 allTime = on;

var theString1 = d(0); var theInt1 = parseInt(theString1); var m1 = theInt1 / 60; var mString1 = d(0); //截取⼩数点后0位数字，结果为String类型 var mInt1 = parseInt(mString1); //转number var s1 = theInt1 % 60 / 100; var cur = mInt1 + s1; var theString = d(0); var theInt = parseInt(theString); var m = theInt/60; var mString = d(0); var mInt = parseInt(mString); var s = theInt%60/100; var all = mInt+s; a({ playOrStopUrl:"/",//替换为暂停图标 isPlay: false, //渲染⼀些需要的数据 thePosition: theTime, duration:all, cur: cur }); }else{ (ition); (); a({ playOrStopUrl: "/", isPlay:true }); } }, //下⼀⾸ theNext:function(){//对全局变量下的查找清单进⾏操作，如果当前歌曲为最后⼀⾸，跳转到第⼀⾸ var j; var musicList = getApp().(); for (var i = 0; i < ;i++){ if(musicList[i].name==){ j=i; break; }else{ j=-1; } } if (-1==j){ a({ name: musicList[0].name, url: musicList[0].url }); }else{ a({ name: musicList[j+1].name, url: musicList[j + 1].url }); } ckgroundAudio({ dataUrl: , }) }, //上⼀⾸ theBack:function(){//若为第⼀⾸，跳转到最后⼀⾸ var j; var theLength=0; var musicList = getApp().(); theLength=; for (var i = 0; i < ; i++) { if (musicList[i].name == ) { j = i; break; } else { j = 1; } } if (j==0) { a({ name: musicList[theLength-1].name, url: musicList[theLength-1].url }); } else { a({ name: musicList[j-1].name, url: musicList[j-1].url }); } ckgroundAudio({ dataUrl: , }) },/** * ⽣命周期函数--监听页⾯显⽰ */ onShow: function () {//这⾥为专辑图旋转函数，调⽤Animation()接⼝，更多参数详情可看官⽅API var animation = Animation({ duration: 1000, timingFunction: 'ease', }) ion = animation // (2, 2).rotate(45).step() a({ animationData: () }) var n = 0; //连续动画需要添加定时器,所传参数每次+1就⾏ setInterval(function () { n=; if(){//暂停时停⽌旋转，播放旋转的逻辑 n = n + 1;

}else{ n=n; } a({ angle: n, })

(8 * n).step()//8为每次转8°，应该是，个⼈喜好设置 a({ animationData: () }) }.bind(this), 360)//360ms转⼀个⾓度，个⼈喜好设置 }})　　OK，到这⾥就可以实现⼀个演⽰视频中所有功能的简易播放器了，是不是觉得很简单。　　相对于⽹上很多前辈的功能完善的⾳乐播放器来说，我这个真的是望尘莫及，未来还有很长的路要⾛。但是东西出来了嘛， 还是很开⼼的；当然，我还是会不断的去完善它的，这之中的playing页⾯的专辑图浮动旋转效果是我最惊喜的了，之前只是想加个阴影，没想到阴影可以跟随旋转，贼帅。　　感谢可爱的你看了这篇博客　　附Github：