音乐插件 APlayer

89 0

官网: 中文
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参数即可,具体参考官方文档。

主题

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

0
  • 本文分类:JavaScript
  • 本文标签:APlayer
  • 流行热度:已超过 89 人围观了本文
  • 发布日期:2020年05月8日 - 1时42分22秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿站点。未经许可,禁止转载。
微信收款码
微信收款码