简洁小巧的HTML5底部悬浮音乐播放器单页版简单方便调用源码

这几天有人需要这个我就发出来，做成了通用版，修改了一些代码没话了一些，接口是网上的，后期我会贴上自带接口

看下效果，当然本篇文章可能会自带

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

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

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

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

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

添加歌曲如下图

{ 开始

}, 结束

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

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

    <link rel="stylesheet" href="https://jsg522.top/dist/QPlayer.css">
    <script src="https://jsg522.top/dist/QPlayer.js"></script>
    <script src="https://jsg522.top/dist/script.js"></script>
      <script src="https://jsg522.top/dist/style.css"></script>

<script id="js-code">
window.QPlayer.list = 
<!-- 从这个下面开始复制 -->
[
    {
        "name": "囍（Chinese Wedding）",
        "artist": "葛东琪",
        "audio": "https://api.i-meto.com/meting/api?server=netease&type=url&id=1303289043&auth=377159ae90aa99649566929ef81d193d42cd9f48",
        "cover": "https://api.i-meto.com/meting/api?server=netease&type=pic&id=109951163472855051&auth=99784164a36cabeda6c2308907dfe4fedc22a4bc",
        "lrc": "https://api.i-meto.com/meting/api?server=netease&type=lrc&id=1303289043&auth=3a0e1b84c8ef4732f8a6c18f6264bb9acabd5971"
    },
    {
        "name": "热爱105°C的你",
        "artist": "阿肆",
        "audio": "https://api.i-meto.com/meting/api?server=netease&type=url&id=1840459406&auth=2525b9a13b86cf3471d02e5ccd10846cf7cea6b7",
        "cover": "https://api.i-meto.com/meting/api?server=netease&type=pic&id=109951166098679116&auth=db4e17c2972422d2ec63dad7b85928c23c75e1f2",
        "lrc": "https://api.i-meto.com/meting/api?server=netease&type=lrc&id=1840459406&auth=1131f732c6f89416846ce9444229a13ec2b334fb"
    },
    {
        "name": "红梅赞",
        "artist": "肖战",
        "audio": "https://api.i-meto.com/meting/api?server=netease&type=url&id=1439975538&auth=b67fee8a7a89f820c9ef93af2935b387748b0021",
        "cover": "https://api.i-meto.com/meting/api?server=netease&type=pic&id=109951164898369103&auth=c0abc35f80ca42ab3ab59b055ef1cb0cdb5a1663",
        "lrc": "https://api.i-meto.com/meting/api?server=netease&type=lrc&id=1439975538&auth=e40e5f9bd9cd66bcfea51ff8fd325369ba165300"
    },
    {
        "name": "所 以 愛 會 消 失 對 不 對",
        "artist": "东东",
        "audio": "https://api.i-meto.com/meting/api?server=netease&type=url&id=1475571759&auth=c01def6e2a2334aeabe53fd8a040c7cfd9d9b9ff",
        "cover": "https://api.i-meto.com/meting/api?server=netease&type=pic&id=109951165287187906&auth=917120f000b5912e0772b17468da45f4a696b175",
        "lrc": "https://api.i-meto.com/meting/api?server=netease&type=lrc&id=1475571759&auth=8c25e21933816548117b6bacd4160415686b778e"
    },
    {
        "name": "好想爱这个世界啊 (Live)",
        "artist": "华晨宇",
        "audio": "https://api.i-meto.com/meting/api?server=netease&type=url&id=1436910205&auth=d06806cf5c12484b3adec0f520d1caf15560727c",
        "cover": "https://api.i-meto.com/meting/api?server=netease&type=pic&id=109951164863688864&auth=62012e61f15ec4605ee107c4a5fa5be25ec048a8",
        "lrc": "https://api.i-meto.com/meting/api?server=netease&type=lrc&id=1436910205&auth=be0f34016247f43383b33e3a3058f6b0eebe2265"
    },
    {
        "name": "雅俗共赏",
        "artist": "许嵩",
        "audio": "https://api.i-meto.com/meting/api?server=netease&type=url&id=411214279&auth=e64432591c1171fcfc41d6bfaaf5716da372a6c4",
        "cover": "https://api.i-meto.com/meting/api?server=netease&type=pic&id=3431575794705764&auth=71e9b481318201c8f07b5924e9cf645e8fa9da53",
        "lrc": "https://api.i-meto.com/meting/api?server=netease&type=lrc&id=411214279&auth=3c01ec9f303dc16c788356d463e95b406b6f6002"
    }
	
]
<!-- 复制歌单到了这里就行 -->
</script>

源码下载自行搭建 欢迎下方留言讨论