用鼠标与指尖
让互联网更加有趣

给你的网站或博客添加QQ音乐/网易云音乐歌单音乐播放器

给你的网站或博客添加QQ音乐/网易云音乐歌单音乐播放器-小伟博客

互联网多姿多彩,网页也少不了我们去探索,特别是我们自己的网站,博客等个人站,写文章的时候,写代码的时候,我们无聊可以听听哥放松放松无聊的心情。

給自己网站添加一个歌单播放器,让你的网站更加完美。

歌单需要API接口,我博客提供网易云音乐和QQ音乐歌单的API接口,可调用自己歌单的音乐。

歌单API接口文档

网易云音乐:http://www.mlwei.com/1446.html

QQ音乐:http://www.mlwei.com/1441.html

给自己网站添加一个歌单播放器:

首先在你网站要添加播放器的页面添加以下代码:

先确保你页面引入了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>

然后刷新页面即可。

支付宝扫码打赏 微信扫码打赏

如果文章对你有帮助,欢迎点击上方按钮打赏作者

未经允许不得转载:小伟博客 » 给你的网站或博客添加QQ音乐/网易云音乐歌单音乐播放器

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

小伟博客 · 给你感兴趣的内容

联系我们官方交流群