可以按f12 打开控制台看到 我的插件应用
这篇文章的重点就是在与第一个的 插件 aplayer 关于他的一些关于用处无关的介绍就不多说了
主要是讲他作为网页端内置音乐播放器 可以实现有很多的功能 具体有很多如果想要去了解的话 可以去看看 关于这个 音乐播放器的官网 上面图片展示出的link
这里简单的说一下关于怎么实现web端效果和请求那一个网易云api 可以实现效果 下面就是基本效果
然后就是关于怎么使用网易云的api了
先在前台使用 axios 发送ajax请求后端代码 异步刷新音乐盒
这里使用vue axios简化操作 如果不想用这个方法 可以到下面的引用使用 jquery的ajax请求
let vm3 = new Vue({ el: "#aplayer", data: { id: "935959485", //这里是我音乐盒的id 查找自己音乐盒就到网易云web端查看url的id值 uri:"getPlayList", // 自己设置的请求地址 audio: [] // 储存返回来的信息 }, mounted(){ var playerOption = {// 设置播放器基本参数 container: document.getElementById('aplayer'), fixed: true, volume:0.7, order:'list', theme:'#988bbc', listFolded:false, audio: [] }; this.initAplayer(playerOption,this.id); //参数放到初始化方法中 }, methods:{ initAplayer(playerOption,id){ var url = '/'+this.uri+"?listId="+id; //这里就是axios 请求的方式 axios.get(url).then(response => { console.log(response.data) playerOption.audio=response.data; var ap = new APlayer(playerOption); }).catch(function (error) { console.log(error); alert('获取歌单信息失败！'); }); } } });下面是后端的代码 其实也就是请求网易云的api 然后做一些简化处理 最后返回到前台
import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONArray; import com.alibaba.fastjson.JSONObject; import com.owl.owlBlog.bo.Music; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RestController; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.net.HttpURLConnection; import java.net.URL; import java.util.ArrayList; import java.util.List; @RestController @CrossOrigin public class MusicController { private final String prefixUrl = "http://music.163.com/api/playlist/detail?id="; private final String playUrl = "http://music.163.com/song/media/outer/url?id="; @GetMapping("/getPlayList") public List<Music> getPlayList(String listId) throws IOException { //拼接完整的url String lastUrl = prefixUrl + listId; //发起http请求获取歌单信息 URL url = new URL(lastUrl); HttpURLConnection conn = (HttpURLConnection) url.openConnection(); String result = getResponse(conn); JSONArray arr = JSON.parseObject(result).getJSONObject("result").getJSONArray("tracks"); List<Music> list = getAllMusic(arr); return list; } public String getResponse(HttpURLConnection conn) throws IOException { //设置属性 conn.setDoOutput(true); conn.setDoInput(true); conn.setRequestMethod("GET"); conn.setRequestProperty("User-Agent", "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Maxthon;)"); conn.setRequestProperty("cookie", "appver=1.5.0.75771"); conn.setRequestProperty("referer", "http://music.163.com/"); //开启连接 conn.connect(); //获取响应 BufferedReader br = new BufferedReader(new InputStreamReader(conn.getInputStream())); String line; StringBuffer sb = new StringBuffer(); while ((line = br.readLine()) != null) { sb.append(line); } //关闭流 br.close(); //关闭连接 conn.disconnect(); return sb.toString(); } public List<Music> getAllMusic(JSONArray arr) { List<Music> list = new ArrayList<>(); for (int i = 0; i < arr.size(); i++) { JSONObject obj = arr.getJSONObject(i); Music music = new Music(); music.setName(obj.getString("name")); music.setUrl(playUrl + obj.getString("id") + ".mp3"); music.setArtist(obj.getJSONArray("artists").getJSONObject(0).getString("name")); music.setCover(obj.getJSONObject("album").getString("blurPicUrl")); music.setLrc(""); list.add(music); } return list; } }然后效果就可以出来了 如果没有出来基本上是 关于基本的jar包或者css，js路径没有导入的问题 仔细检查下就好，关于其中的有部分代码是从其他的博客上面看到的 但是因为没有补全 所以想自己整理一遍 然后把整个过程给写下来
但是没有实现字幕的问题 暂时没有去解决
个人网站 ：www.owlfeng.cn
引用:使用APlayer破除网易云音乐版权限制，播放网易云任意歌曲
