Meting API:音乐播放服务接口

目录
  1. 1. Meting API
  2. 2. 使用Meting API
  3. 3. 在网页上加个小窗口
  4. 4. 在hexo中使用

在HeoMusic里使用了Meting API，研究一下，发现在可以用来在网页上放置音乐播放模块。

Meting API

Meting API 是一个多功能的音乐播放服务接口，能够帮助开发者集成多种音乐平台的播放功能到自己的应用中。
项目地址：injahow/Meting

  • 下载镜像
    docker pull intemd/meting-api:latest
  • 运行容器
    docker run -d --name meting -p 4000:3000 intemd/meting-api:latest


此镜像没有armv7版本。

使用Meting API

把ip:4000反代，以便在公网可以访问。https://music.zhheo.com/meting/ 是HeoMusic提供的接口地址。

参数说明：

  • server: 数据源
    netease 网易云音乐(默认)
    tencent QQ音乐

  • type: 类型
    name 歌曲名
    artist 歌手
    url 链接
    pic 封面
    lrc 歌词
    song 单曲
    playlist 歌单

  • id: 类型ID（封面ID/单曲ID/歌单ID）

以下代码保存为music.html

1
2
3
4
5
6
7
8
9
10
11
<script>
	var meting_api='music.zhheo.com/meting/?server=:server&type=:type&id=:id&auth=:auth&r=:r';
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/meting/2.0.1/Meting.min.js"></script>
<meting-js
	server="netease"
	type="playlist"
	id="3778678">
</meting-js>

打开后：

在网页上加个小窗口

  • style.css：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    /* 浮动小窗口样式 */
    #floating-window {
        position: fixed;
        left: 20px;
        bottom: 20px;
        width: 300px;
        height: 200px;
        background: white;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        display: flex;
        flex-direction: column;
        z-index: 1000;
    }

    #floating-header {
        padding: 5px 10px;
        background: #f0f0f0;
        border-bottom: 1px solid #ddd;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: move;
    }

    #close-btn {
        background: none;
        border: none;
        font-size: 16px;
        cursor: pointer;
    }

    #floating-iframe {
        flex-grow: 1;
        width: 100%;
        border: none;
    }

    /* 响应式设计 - 在小屏幕上调整大小 */
    @media (max-width: 768px) {
        #floating-window {
            width: 250px;
            height: 150px;
        }
    }
  • script.js：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    document.addEventListener('DOMContentLoaded', function() {
        const floatingWindow = document.getElementById('floating-window');
        const floatingHeader = document.getElementById('floating-header');
        const closeBtn = document.getElementById('close-btn');
        const iframe = document.getElementById('floating-iframe');
        
        // 关闭按钮功能
        closeBtn.addEventListener('click', function() {
            floatingWindow.style.display = 'none';
        });
        
        // 拖动功能
        let isDragging = false;
        let offsetX, offsetY;
        
        floatingHeader.addEventListener('mousedown', function(e) {
            isDragging = true;
            offsetX = e.clientX - floatingWindow.getBoundingClientRect().left;
            offsetY = e.clientY - floatingWindow.getBoundingClientRect().top;
            floatingWindow.style.cursor = 'grabbing';
        });
        
        document.addEventListener('mousemove', function(e) {
            if (!isDragging) return;
            
            floatingWindow.style.left = (e.clientX - offsetX) + 'px';
            floatingWindow.style.top = (e.clientY - offsetY) + 'px';
            floatingWindow.style.bottom = 'auto'; // 取消底部定位
        });
        
        document.addEventListener('mouseup', function() {
            isDragging = false;
            floatingWindow.style.cursor = 'grab';
            
            // 如果窗口靠近底部，自动吸附到底部
            const windowHeight = window.innerHeight;
            const windowBottom = floatingWindow.getBoundingClientRect().bottom;
            
            if (windowHeight - windowBottom < 50) {
                floatingWindow.style.top = 'auto';
                floatingWindow.style.bottom = '20px';
            }
        });
        
        // 改变iframe的URL（如果需要从外部控制）
        function changeIframeUrl(url) {
            iframe.src = url;
        }
        
        // 示例：5秒后更改iframe内容（可选）
        // setTimeout(() => changeIframeUrl('https://another-website.com'), 5000);
    });
  • 引用页面代码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <!DOCTYPE html>
    <html>
    <head>
        <title>浮动小窗口示例</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <!-- 页面主要内容 -->
        <div class="content">
            <p>这里是网页的主要内容...</p>
            <!-- 更多内容 -->
        </div>
        
        <!-- 浮动小窗口 -->
        <div id="floating-window">
            <div id="floating-header">
                <span>music</span>
                <button id="close-btn">×</button>
            </div>
            <iframe id="floating-iframe" src="music.html" frameborder="0"></iframe>
        </div>
        
        <script src="script.js"></script>
    </body>
    </html>

在hexo中使用

1
2
3
4
5
6
7
8
9
10
11
12
{% raw %}
 <link rel="stylesheet" type="text/css" href="/music/style.css">
<div id="floating-window">
        <div id="floating-header">
            <span>music</span>
            <button id="close-btn">×</button>
        </div>
        <iframe id="floating-iframe" src="/music/music.html" frameborder="0"></iframe>
    </div>
    
    <script src="/music/script.js"></script>
{% endraw %}
  • 用标签禁用Markdown转换。