互联网多姿多彩,网页也少不了我们去探索,特别是我们自己的网站,博客等个人站,写文章的时候,写代码的时候,我们无聊可以听听哥放松放松无聊的心情。
給自己网站添加一个歌单播放器,让你的网站更加完美。
歌单需要API接口,我博客提供网易云音乐和QQ音乐歌单的API接口,可调用自己歌单的音乐。
给自己网站添加一个歌单播放器:
首先在你网站要添加播放器的页面添加以下代码:
先确保你页面引入了jQuery.js,没有就在头部</head>之前添加:
<script type="text/javascript" src="//mat1.gtimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
在头部</head>之前引入播放器样式CSS:
<link rel="stylesheet" href="//cdn.staticfile.org/aplayer/1.10.1/APlayer.min.css">
在底部</body>前引入播放器JS文件:
<script src="//cdn.staticfile.org/aplayer/1.10.1/APlayer.min.js"></script>
然后在你要添加播放器的地方添加主要代码:
<div id="aplayer"></div>
<script language="JavaScript">
var music = new Array();
$.ajax({
type: "GET",
url: 'https://api.mlwei.com/music/api/?key=523077333&id=3641614987&type=songlist&cache=1&size=m4a',//歌单API接口
dataType: 'json',
success: function(result){
var ap = new APlayer({
element: document.getElementById('aplayer'),
lrcType: 3,//歌词类型
volume: 1,//音量,100%
mutex: true,//互斥打开,阻止多个播放器同时播放,当前播放器播放时暂停其他播放器
fixed: true,//吸底模式,就是本站左下角播放器样式
theme: '#45B6F7',//播放器主题色
autoplay: true,//自动播放打开,关闭改成 false
order: 'list',//顺序播放,随机播放改成random
audio: result.Body
});
}
});
</script>
然后刷新页面即可。