[Vue] 最简单的网易云音乐播放器源码分享

分享一下最近制作的网易云播放器，实现了一些最为简易的功能

实现效果

播放音乐

播放mv

显示评价

首先需要配置网易云的api，需要本机安装

网易云音乐API链接

按照操作克隆本地，npm安装一下即可，非常简单

具体实现代码

<template><div><h1>Player</h1><input type="text" v-model="name" @keyup.enter="getSongs"></input><button @click="getSongs">搜索</button><br><br><img v-if="isShowSong" v-bind:src="imageUrl" width="200px" height="200px" style="border-radius: 50%" :class="{'playing': isPlaying}"><video v-if="isShowMv" v-bind:src="mvUrl" controls autoplay width="400px" height="300px"></video><br><audio v-if="isShowSong" v-bind:src="url" controls autoplay @play="play" @pause="pause"></audio><br><div v-if="true">歌曲列表<ul><li v-for="item in songList">{{item.name}}<button @click="getSing(item.id)">播放</button><button @click="getMv(item.mvid)" v-if="item.mvid!==0">播放MV</button></li></ul></div><br><div v-if="isShowSong || isShowMv">歌曲评论<ul><li v-for="item in reviewList">{{item.user.nickname}}:{{item.content}}</li></ul></div></div></template><script>export default {data() {return {name: '',songList: [],reviewList: [],url: '',imageUrl: '',isShowMv: false,isShowSong: false,isPlaying: false,mvUrl: '',}},methods: {// 获取歌曲列表getSongs() {let _this = thisthis.$axios.get("http://localhost:3000/search?keywords=" + this.name).then(res=>{console.log(res)_this.songList = res.data.result.songs;})},// 获取评论getReviews(id) {let _this = thisthis.$axios.get("http://localhost:3000/comment/hot?type=0&id=" + id).then(res=>{console.log(res)_this.reviewList = res.data.hotComments;})},// 获取单曲getSing(id) {let _this = thisthis.$axios.get("http://localhost:3000/song/url?id=" + id).then(res=>{console.log(res)_this.isShowSong = true_this.isShowMv = false_this.url = res.data.data[0].url})// 设置图片this.getImage(id)// 设置评论this.getReviews(id)},// 获取MVgetMv(id) {let _this = thisthis.$axios.get("http://localhost:3000/mv/url?id=" + id).then(res=>{console.log(res)_this.isShowMv = true_this.isShowSong = false_this.mvUrl = res.data.data.url})// 设置评论this.getReviews(id)},// 获取图片getImage(id) {let _this = thisthis.$axios.get("http://localhost:3000/song/detail?ids=" + id).then(res=>{console.log(res)_this.imageUrl = res.data.songs[0].al.picUrl})},// 播放歌曲play() {this.isPlaying = true;},// 暂停歌曲pause() {this.isPlaying = false;},},};</script><style scoped>/* 歌曲图片旋转 */.playing {transform: rotate(360deg);animation: rotation 20s linear infinite;}@keyframes rotation {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}</style>