微信网站模板大全,wordpress下載,中国商业企业网,公司网站制作服务这个是怎么实现的#xff1f;一起来看看吧APlayer首先我们需要一个音频播放器#xff0c;这里我用到了APlayer#xff0c;这是由bilibili前端大神DIYgod开源的播放器#xff0c;有兴趣的可以去TA的主页看看#xff0c;非常惊艳#xff0c;这里我就不多说了我们看一下APla…这个是怎么实现的一起来看看吧APlayer首先我们需要一个音频播放器这里我用到了APlayer这是由bilibili前端大神DIYgod开源的播放器有兴趣的可以去TA的主页看看非常惊艳这里我就不多说了我们看一下APlayer的官方文档方法很简单const ap new APlayer({container: document.getElementById(aplayer),audio: [{name: name,artist: artist,url: url.mp3,cover: cover.jpg}]});这里的audio是一个音频列表可以是一个对象或对象数组对象具体的参数如下名称描述name音频名称artist音频艺术家url音频链接cover音频封面lrc音频歌词这里我们选择最方便的一种直接给LRC链接网易云音乐API这部分我找到了网上有人分享的API这种官方不可能给公开API所以还是要小心使用说不定哪天就被修改了我们现在其实想要两个一个是歌单的列表还有一个是歌词。# 歌单https://music.163.com/api/playlist/detail?id37880978id为歌单ID# 歌词https://music.163.com/api/song/lyric?ospcid93920lv-1kv-1tv-1id为歌曲IDlv值为-1我猜测应该是判断是否搜索lyric格式kv值为-1这个值貌似并不影响结果意义不明tv值为-1是否搜索tlyric格式接口实现虽然我们已经找到了网易云音乐API但是返回的数据不是我们所需要的呀比如这个歌单的接口# Requesthttps://music.163.com/api/playlist/detail?id2119983629# Response{result:{subscribers:[],subscribed: false,creator:{...},artists: null,tracks:[{album: {name: メトロノーム,id: 36787278, type: 专辑,size: 12, picId:18419018788768520,}alias: [],artists: [{name: MACO, id: 901025, picId: 0, img1v1Id: 0, briefDesc: ,…}],audition: null,bMusic: {...},commentThreadId: R_SO_4_515573221,copyFrom: ,copyright: 1,copyrightId: 7003,crbt: null,...}]}}里面字段很多我上面只列举了一部分tracks就是歌单列表但是很显然和我们需要的格式还差很多那么怎么来转换一下变成我们需要的数据格式呢?[{name: name,artist: artist,url: url.mp3,cover: cover.jpg,lrc: a.lrc}]这里我们就需要在服务端来完成了思路很简单在服务器上请求https://music.163.com/api/playlist/detail?id2119983629这个接口然后拿到结果后手动处理一下最后再返给客户端相当于做了一次中转我这里服务端是用koa实现的其他框架应该差不多服务端发起请求在服务端发起请求也可以用我们熟悉的fetch不过你需要先安装node-fetch这个库yarn add node-fetch然后你就可以像前端一样发起请求了const fetch require(node-fetch);//...const getPlayList (id) {return fetch(http://music.163.com/api/playlist/detail?id${id}).then((response) {if (response.ok) {return response.json();}}).catch((err) {console.warn(err);})}接口定义现在我们需要新增一个接口用来处理歌单返回出我们需要的格式//获取音乐列表router.get(/playlist/:id, async (ctx, next) {const responseData {success: false,data:[],message: ,}const { id } ctx.params;try {const data await getPlayList(id);if(data.code200){const playList data.result.tracks.map(item({id: item.id,name: item.name,artist: item.artists.map(elel.name).join(,),//由于歌手是一个数组这里我们把它转换成字符串拼接url: https://music.163.com/song/media/outer/url?id${item.id}.mp3,//歌曲地址cover: item.album.picUrl.replace(/http:/,https:),lrc:null}))responseData.success true;responseData.message 操作成功;responseData.data playList;ctx.body responseData;}} catch (error) {responseData.success false;responseData.message error.message;responseData.data [];ctx.body responseData;}});注意这里的歌曲链接url本来返回信息里面是不包含的只有歌曲ID不过我们发现通过https://music.163.com/song/media/outer/url?idID可以直接在线播放指定ID的歌曲所以我们这里直接写在返回结果上。歌词处理还有一个问题就是歌词上面的接口中歌词返回结果也不是我们需要的格式# Requesthttps://music.163.com/api/song/lyric?ospcid93920lv-1kv-1tv-1# Response{sgc: true,sfy: false,qfy: false,lrc: {version: 7,lyric: [00:29.620]细雨带风湿透黄昏的街道\n[00:35.050]抹去雨水双眼无帮地仰望\n[00:40.240]望向孤单的晚灯是那伤感的记忆\n[00:48.630]再次泛起心里无数的思念\n[00:54.000]以往片刻欢笑仍挂在脸上\n[00:58.770]愿你此刻可会知是我衷心的说声\n[01:06.310]喜欢你\n[01:08.940]那双眼动人笑声更迷人\n[01:14.330]愿再可轻抚你那可爱面容\n[01:22.490]挽手说梦话象昨天你共我\n[01:42.970]满带理想的我曾经多冲动\n[01:48.340]埋怨与她相爱难有自由\n[01:53.040]愿你此刻可会知是我衷心的说声\n[02:00.420]喜欢你\n[02:03.230]那双眼动人笑声更迷人\n[02:08.540]愿再可轻抚你那可爱面容\n[02:16.750]挽手说梦话象昨天你共我\n[02:24.740]每晚夜里自我独行\n[02:27.670]随处荡 多冰冷\n[02:35.070]以往为了自我挣扎从不知她的痛苦\n[02:49.380]喜欢你\n[02:52.020]那双眼动人笑声更迷人\n[02:57.420]愿再可轻抚你那可爱面容\n[03:05.590]挽手说梦话象昨天你共我\n[03:13.870]挽手说梦话象昨天你共我\n},klyric: {...},code: 200}反正就是很全面但是我们需要的仅仅是里面的内容部分比如上面我就只需要这一段[00:29.620]细雨带风湿透黄昏的街道[00:35.050]抹去雨水双眼无帮地仰望[00:40.240]望向孤单的晚灯是那伤感的记忆[00:48.630]再次泛起心里无数的思念[00:54.000]以往片刻欢笑仍挂在脸上[00:58.770]愿你此刻可会知是我衷心的说声...所以我们需要再次做一个中介处理const getLyric (id) {return fetch(http://music.163.com/api/song/lyric?ospcid${id}lv-1kv-1tv-1).then((response) {if (response.ok) {return response.json();}}).catch((err) {console.warn(err);})}//获取音乐歌词router.get(/lyric/:id, async (ctx, next) {const { id } ctx.params;try {const lyric await getLyric(id);ctx.body lyric.lrc.lyric;//返回指定部分} catch (error) {ctx.body ;}});这样在上面歌词列表中就可以直接用/api/lyric/:ID来获取歌词了//...{id: item.id,name: item.name,artist: item.artists.map(elel.name).join(,),url: https://music.163.com/song/media/outer/url?id${item.id}.mp3,cover: item.album.picUrl.replace(/http:/,https:),lrc:/api/lyric/${item.id}//这里歌词写上我们定义的接口地址}//...测试一下吧通过以上处理我们接口就返回我们自定义的数据格式了# Requesthttps://localhost:3000/api/playlist/2119983629# Response{success: true,data: [{id: 515573221,name: Sweet Memory,artist: MACO,url: https://music.163.com/song/media/outer/url?id515573221.mp3,cover: https://p1.music.126.net/-U7mfaIjENUu8G_O0Dhv8g/18419018788768520.jpg,lrc: /api/lyric/515573221},{id: 488388942,name: 願い~あの頃のキミへ~,artist: 當山みれい,url: https://music.163.com/song/media/outer/url?id488388942.mp3,cover: https://p1.music.126.net/kbLlBkGfEcA3RJyC5JhkDA/18346451021830743.jpg,lrc: /api/lyric/488388942},...],message: 操作成功}添加到博客其实上面对接口的数据改造才是关键下面添加到自己的页面就很简单了。如果你是传统HTML页面可以直接文章开头的方式引用const ap new APlayer({container: document.getElementById(aplayer),audio: [{name: name,artist: artist,url: url.mp3,cover: cover.jpg}]});如果使用了使用模块管理器:import APlayer/dist/APlayer.min.css;import APlayer from APlayer;const ap new APlayer(options);如果是react项目那么可以用封装好的react-aplayerimport React from react;import ReactAplayer from react-aplayer;export default class App extends React.Component {// event binding exampleonPlay () {console.log(on play);};onPause () {console.log(on pause);};// example of access aplayer instanceonInit ap {this.ap ap;};render() {const props {theme: #F57F17,lrcType: 3,audio: [{name: 光るなら,artist: Goose house,url: https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.mp3,cover: https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.jpg,lrc: https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc,theme: #ebd0c2}]};return ({...props}onInit{this.onInit}onPlay{this.onPlay}onPause{this.onPause}/{/* example of access aplayer instance API */} this.ap.toggle()}toggle);}}如果是vue项目可以使用vue-aplayer:music{title: secret base~君がくれたもの~,artist: Silent Siren,src: https://moeplayer.b0.upaiyun.com/aplayer/secretbase.mp3,pic: https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg}/小节这里的歌单我选择了自己收藏的歌曲。每次用网易云音乐客户端播放听歌的时候收藏的歌曲在我的博客上也可以同步进行更新。差不多就这些了可能对于专业后端开发来说这些完全就是小学生操作但是对于一个前端来说做这些事就感觉闯入了一片新天地还是有很多感悟的。很多以前前端做不了的事现在nodeJS也能帮我们解决进一步打通了前后端的天然屏障离全栈也越来越近了 ^ ^大家如果喜欢我的博客可以多多关注一下
