HTML5底部悬浮音乐播放器单页版

HTML5底部悬浮音乐播放器单页版

根据Jrohy的QPlayer重做的一款简洁小巧的HTML5底部悬浮音乐播放器,目前只支持网易云哈

演示图片

图片[1]-HTML5底部悬浮音乐播放器单页版-乡野博文

我做成了单页 当然如果你比较懒 可以调用我的,我的可能会随时会倒闭(哈哈哈)

如果你是博客程序比如:WordPress等 作者做了插件,当然也可以用我这样的.

GIT:https://moeshin.github.io/QPlayer2/demos (自行看下)

我改的比较简单,只适合做新手。也做了一个解析接口页面一起放在里面了

图片[2]-HTML5底部悬浮音乐播放器单页版-乡野博文

解析后复制内容在播放代码里面修改歌曲

添加歌曲如下图

图片[3]-HTML5底部悬浮音乐播放器单页版-乡野博文
图片[4]-HTML5底部悬浮音乐播放器单页版-乡野博文

开始

}, 结束

如果你想要调用我的 那我的代码是这样的(后期我会修改接口方法等…也可能倒闭)直接复制一下代码到你的网站主文件下方或者底部文件(用我的歌曲就改不下来了)

这个我默认了是让他进入自动展开歌词/列表-如果你不想请你屏蔽/删除JS代码 script.js 文件

    <link rel="stylesheet" href="QPlayer.css">
    <script src="QPlayer.js"></script>
   <script src="script.js"></script>
      <script src="style.css"></script>
<script id="js-code">
window.QPlayer.list = [
     <!-- 从这个下面开始复制 -->        
    {
        "name": "西海情歌",
        "artist": "刀郎",
        "audio": "https://api.i-meto.com/meting/api?server=netease&type=url&id=77098&auth=233613320533d9c2c4ba4578411a7f3082224a3e",
        "cover": "https://api.i-meto.com/meting/api?server=netease&type=pic&id=45079976739605&auth=2f4e8e4c4906fe2f0976a7d4a14aa95cbae6dbf3",
        "lrc": "https://api.i-meto.com/meting/api?server=netease&type=lrc&id=77098&auth=4b02eb3bccfd1ebbd355ad2b68ddce5dcf6ece39"
    },
    {
        "name": "冲动的惩罚",
        "artist": "刀郎",
        "audio": "https://api.i-meto.com/meting/api?server=netease&type=url&id=77469&auth=872197177f66a94b7dbd3f5fa589d664824e52d3",
        "cover": "https://api.i-meto.com/meting/api?server=netease&type=pic&id=109951163281535703&auth=f87a3998b5d07baaa3979308db40b3fe278a2835",
        "lrc": "https://api.i-meto.com/meting/api?server=netease&type=lrc&id=77469&auth=59951cfcbb9e926eb7874afb9f8a41c2d35b7edc"
    },
    {
        "name": "水中花+半梦半醒之间",
        "artist": "刀郎 / 谭咏麟",
        "audio": "https://api.i-meto.com/meting/api?server=netease&type=url&id=5265227&auth=8ce2d2260b1da4acc6e4067ba4e8353794c0fad9",
        "cover": "https://api.i-meto.com/meting/api?server=netease&type=pic&id=109951163877210795&auth=011b549704c42f3315c4970a802ccb09cbd312ef",
        "lrc": "https://api.i-meto.com/meting/api?server=netease&type=lrc&id=5265227&auth=d566bc2bda44af983558d37ef8f319837073ae4b"
    }
	<!-- 复制歌单到了这里就行 -->
];
</script>
温馨提示:本文最后更新于2022-06-10 07:18:18,某些文章具有时效性,若有错误或已失效,请在下方留言或联系乡野博文
您阅读这篇文章共花了: 0小时00分00秒
-----本页内容已结束,喜欢请分享!-----
HTML5底部悬浮音乐播放器单页版-乡野博文
HTML5底部悬浮音乐播放器单页版
此内容为付费资源,请付费后查看
300积分
付费资源
© 版权声明
THE END
喜欢本站内容,请点【点赞】【分享】和【收藏】~
点赞10 分享
评论 抢沙发

请登录后发表评论