html实现网页左下角音乐播放器

「爱情、让人受尽委屈。」 2023-10-04 15:19 9阅读 0赞

**html实现网页左下角音乐播放器**  
效果图如下：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzUzNzEw_size_16_color_FFFFFF_t_70]

实现代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
    <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
    <div id="aplayer" class="aplayer" data-autoplay="true"  data-id="5208409284" data-server="netease" data-type="playlist" data-fixed="true" data-listfolded="true" data-order="random" data-theme="#F58EA8"></div>
    <script src="https://unpkg.com/meting@1.2.0/dist/Meting.min.js"></script>
    </body>
    </html>

上面代码中使用的是网易云音乐，具体参数介绍如下：data-id: 歌曲/专辑/歌单ID

data-server: 音乐平台，支持如下参数：  
netease （网易云音乐）  
tencent （qq音乐）  
xiami （虾米音乐）  
kugou （酷狗音乐）  
baidu （百度音乐）

data-type: 请求类型，支持如下参数：  
song （单曲）  
album （专辑）  
playlist （歌单）  
search （搜索）

data-mode: 播放模式，支持如下参数：  
random （随机）  
single （单曲）  
circulation （列表循环）  
order （列表）

data-autoplay: 自动播放 ，支持如下参数：  
true  
false

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzUzNzEw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210603190218862.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzUzNzEw,size_16,color_FFFFFF,t_70