使用aplayer内嵌播放器播放个人网易云歌单

可以按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 {//拼接完整的urlString 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破除网易云音乐版权限制，播放网易云任意歌曲

使用aplayer内嵌播放器播放个人网易云歌单相关推荐

xmd后缀名改mp3_GitHub - dh9527/xMDPlayer: 一个可以在线听网易云音乐、QQ音乐、酷狗音乐的音乐播放器，还可以让你听自己的网易云歌单哦！...
xMDPlayer 一个可以在线听网易云音乐.QQ音乐.酷狗音乐的音乐播放器,还可以让你听自己的网易云歌单哦! A player that can make you listen to music o ...
Python爬虫之网易云歌单音频爬取（解决urlretrieve爬取文件不能播放问题）
网易云歌单音频爬取写在前面:最近学习爬虫,对小说和图片都进行过简单爬取,所以打算爬取音频,但是其中遇到点问题也解决了,写下博客记录并希望对大家也有帮助. 爬取对象:对于目前主流的几个音频播放网站,我 ...
linux终端音乐播放器,Linux终端音乐播放器cmus攻略: 操作歌单
cmus是一款开源的终端音乐播放器.它小巧快速,而又功能强大.cmus支持Ogg/Vorbis.MP3.FLAC.Musepack.WavPack.WMA.WAV.AAC.MP4等格式,包含Gaple ...
音乐播放器微信小程序开发-歌单界面（简陋版）
仿QQ音乐app的歌单界面制作了一个简易且简陋的歌单界面. 首先po一张最终效果图(很多功能还没实现,以及还有bug没有改好) 因为不涉及到逻辑,目前只需一些网页开发经验与知识即可(当然啦,还需要一定 ...
前端学习小demo：使用HTML+CSS+bootstrap+Vue2.0编写一个简易的音乐播放器（仿网易云）
具体的操作流程(实现步骤): 1.歌曲搜索 2.歌曲播放 3.歌曲评论 4.播放歌曲的MV(有的歌曲没有MV) 代码编写过程: 1.创建一个Vue项目(前提是安装好了node.js.npm.vue) ...
Android使用饺子播放器播放服务器端的视频
在之前的毕设项目中需要做视频播放功能,使用了第三方播放器饺子播放器,感觉非常方便. 网上也有很多关于饺子播放器的用法. 首先在build.gradle中添加依赖 implementation 'cn. ...
vlc播放器播放mp4_比较了4个开放音乐播放器：VLC，QMMP，Clementine和Amarok
vlc播放器播放mp4 2016年8月,我写了关于为什么喜欢Guayadeque音乐播放器的文章 ,然后使用对我来说似乎最重要的六个特征来评估其他音乐播放器: Quod Libet , Gmusicb ...
Android多媒体学习五：调用Android自带的播放器播放Audio
Android有其自带的播放器,我们可以使用隐式Intent来调用它:通过传入一个Action为ACTION_VIEW同时,指定Data为所要播放的Audio的Uri对象,并指定格式信息,则我们就可以 ...
使用阿里云播放器播放 .flv 和 hls(.m3u8) 格式的视频流
一.使用阿里云播放器播放 .flv 和 hls(.m3u8) 格式的视频流官方教程:https://help.aliyun.com/document_detail/125570.htm?spm= ...

使用aplayer内嵌播放器播放个人网易云歌单

使用aplayer内嵌播放器播放个人网易云歌单相关推荐

最新文章

热门文章