APlayer的配置方法和相关资料整理（已完成）

APlayer的配置方法和相关资料整理（已完成）

关于之前折腾小智AI和MCP的时候搜索了很多关于酷我音乐api接口的相关资料
结果没过多长时间就忘了（5个月前吧）

后面找时间整理回来吧
所以我才说啊，感觉自己学东西很快，但是存不起来，一直以来都没有整理的习惯

以及APlayer播放器的配置和使用方法

我看了看可以在本地部署，但歌曲轮询的部分还需要深入了解下 （-目前已经得到解决了）

github开源项目：[APlayer](https://github.com/DIYgod/APlayer)

配置和使用教程：

代码实现（简洁版）：

  1. html本地创建
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐播放器</title>
    <link rel="stylesheet" href="./dist/APlayer.min.css">
</head>
<body>  
    <div id="aplayer"></div>

    <script src="./dist/APlayer.min.js"></script>
    <script>
        fetch('https://api.injahow.cn/meting/?type=playlist&id=2619366284')
            .then(response => response.json())
            .then(musicData => {
                const ap = new APlayer({
                    container: document.getElementById('aplayer'),
                    fixed: true,
                    autoplay: false,
                    volume: 0.6,
                    lrcType: 3,
                    mutex: true,
                    order: 'random',
                    preload: 'none',
                    listFolded: false,
                    theme: '#ee8243',
                    audio: musicData.map(song => ({
                        name: song.name,
                        artist: song.artist,
                        url: song.url,
                        cover: song.pic,
                        lrc: song.lrc
                    }))
                });
            });
    </script>
</body>
</html>
  1. 加入到js脚本当中引用 aplayer.js
<script>
fetch('https://api.injahow.cn/meting/?type=playlist&id=2619366284')
    .then(response => response.json())
    .then(musicData => {
        const ap = new APlayer({
            // 核心配置
            container: document.getElementById('aplayer'),  // 播放器容器元素
            audio: musicData.map(song => ({                 // 音频列表（从API数据转换）
                name: song.name,      // 歌曲名称
                artist: song.artist,  // 艺术家
                url: song.url,        // 音频文件URL
                cover: song.pic,      // 专辑封面
                lrc: song.lrc         // 歌词文件URL
            })),
            
            // 播放器行为配置
            fixed: true,        // 固定模式：true=固定在页面底部，false=普通内嵌模式
            autoplay: false,    // 自动播放：true=自动播放，false=手动播放（推荐false，避免浏览器限制）
            volume: 0.6,        // 初始音量：0~1之间的数值，0.6表示60%音量
            mutex: true,        // 互斥模式：true=同时只能有一个播放器播放，false=允许多个同时播放
            order: 'random',    // 播放顺序：'list'=列表顺序，'random'=随机播放
            
            // 歌词配置
            lrcType: 3,         // 歌词类型：1=HTML模式，2=js对象模式，3=lrc文件模式
            
            // 性能配置
            preload: 'none',    // 预加载：'none'=不预加载，'metadata'=只加载元数据，'auto'=自动加载
            
            // 界面配置
            listFolded: false,  // 播放列表：true=默认折叠，false=默认展开
            theme: '#ee8243'    // 主题颜色：十六进制颜色值
        });
    });
</script>

然后在<header>当中引用即可

<link rel="stylesheet" href="./dist/APlayer.min.css">
<script src="./dist/APlayer.min.js"></script>
<script src="./aplayer.js"></script>

实际效果参考

image

说实在的，我本来也就是因为看到了这篇文章的内容才有了想要给自己的博客配置APlayer的想法
尤其是歌单当中的各种歌曲

但据情况来看，不太可能有那样的（指没有一模一样的音乐api接口，感觉可能是本地配置的）

开源的音乐api通道接口

调取的可能是网易云的api接口，详细可以去看看 网易云音乐（meting-api）

作者：injahow
获取链接：injahow/meting-api

https://user-images.githubusercontent.com/2666735/30651452-58ae6c88-9deb-11e7-9e13-6beae3f6c54c.png

感谢作者分享！

其他

这个的话就找感兴趣的时候再去深入吧，不能贪多（不然互联网上每天上万新的信息产生，有1%的是我感兴趣的，那也至少有100条信息了，看是不可能看完的，尽量是挑一个最感兴趣的方向深入吧）
优先先研究研究美化自己的博客，添加背景图片、以及音乐播放器的操作吧

  1. Python实战项目2——自动获取酷狗音乐工具

  2. INJAHOW API
    image

posted @ 2025-10-07 19:34  tokepson  阅读(5)  评论(0)    收藏  举报