音乐插件 APlayer

官网： 中文
github： 链接

基本用法

引入

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/MoePlayer/APlayer/dist/APlayer.min.css">

<script src="https://cdn.jsdelivr.net/gh/MoePlayer/APlayer/dist/APlayer.min.js"></script>

容器

<div id="aplayer"></div>

初始化

let ap = new APlayer({
    container: document.getElementById('aplayer'),
    audio: [{
        name: "歌曲名",
        artist: "演唱者",
        url: "音乐链接",
        cover: "封面图链接"
    }]
});

audio为一个数组，里面的对象为音乐的信息，只有一个对象的时候，列表不会出来，如果有多个对象，就出自动出现列表。

当然还有一些参数可以自行查看文档，中文贴心的很，基本都是说人话。

歌词

歌词的话有三种方式，歌词文件，歌词文本，自己手动将歌词渲染到html中

这三种方式主要是通过判断lrcType这个option参数的，1对应字符串，2对应手动渲染歌词到html，3则是歌词文件。

歌词字符串

一般来说歌词字符串是常用的一种情况：

let ap = new APlayer({
    container: document.getElementById('aplayer'),
    lrcType: 1,
    audio: [{
         name: "歌曲名",
        artist: "演唱者",
        url: "音乐链接",
        cover: "封面图链接",
        lrc: "歌词string"
    }]
});

歌词手动渲染

let ap = new APlayer({
    container: document.getElementById('aplayer'),
    lrcType: 2,
    audio: [{
         name: "歌曲名",
        artist: "演唱者",
        url: "音乐链接",
        cover: "封面图链接"
    }]
});

lrcType为2，然后歌曲信息里不用写歌词参数，我们自己用js手动将歌词渲染到播放器容器里面

<div id="player">
    <pre class="aplayer-lrc-content">
        [00:00.00]APlayer audio1
        [00:04.01]is
        [00:08.02]amazing
        <!-- ... -->
    </pre>
</div>

有多首就渲染多少个pre，插件自动通过顺序来判断

具体到底是先渲染歌词出来，还是先初始化播放器，自行测试。

歌词文件

let ap = new APlayer({
    container: document.getElementById('aplayer'),
    lrcType: 3,
    audio: [{
         name: "歌曲名",
        artist: "演唱者",
        url: "音乐链接",
        cover: "封面图链接",
        lrc: "歌词文件链接"
    }]
});

插件会自动创建一个get请求，去获取这个歌词文件的。

支持的歌词格式

1. [mm:ss]APlayer
2. [mm:ss.xx]is
3. [mm:ss.xxx]amazing
4. [mm:ss.xx][mm:ss.xx]APlayer
5. [mm:ss.xx]<mm:ss.xx>is
6. [mm:ss.xx]amazing[mm:ss.xx]APlayer

播放器显示模式

有几种模式，使用方式也是设置option参数即可，具体参考官方文档。

主题

测试设置无效，不知道怎么回事