使用 audioplayer+yslrc 制作歌词帖

马黑黑

1️⃣ 插件及其配置

一、audioplayer

audioplayer 是一款刚定稿的音频插件，它通过一个名为 AudPlayer 的类封装了音频播放管理组件，附带可选的全屏切换、同时兼顾对视频和基于帖子主元素的CSS变量 --state 的同步维护，功能够用。

AudPlayer 需要实例化才能使用：

var aud = new AudPlayer(options);

其中的 options 参数为事先设置好的配置。配置至少必须包含两个键值对设置（pa 和 urls）：

var options = {
    pa: '.pa',
    urls: [
        ['歌曲地址1', '歌名1'],
        ['歌曲地址2', '歌名2'],
        ['歌曲地址N', '歌名N'],
    ],
  };

pa 指明帖子主元素的 class 类名（例如 '.pa'） 或 id（例如 '#pa'）。urls 是一个二维数组，子维数组存储歌曲地址和歌名。此外，可选配置还有：

var options = {
    /* ...这里是必选配置 */
    fs: false, /* 禁用全屏模块 */
    /* 添加参与控制音频的自定义标签实体（例如 id="pic1" 的图片标签）*/
    btns: [pic1, pic2, pic3],
};

二、yslrc

yslrci 是去年八月编写的原生LRC歌词同步插件，本质上它只是一个函数 LRC()，接收三个必选参数和两个可选参数（按顺序）：

var pa = document.querySelector('.pa');
var aud = document.querySelector('audio');
var geci = `[00:05.36]歌句1\n[00:17.38]歌句2\n[00:327.81]歌句N\n`;

LRC(pa, aud, geci);

另外两个可选参数是数值参数，排第四位的是歌词微调时间，例如 0.5 或 -0.5，排第五位的是歌句用时均摊系数，值应为大于 0 的数值。

2️⃣ 插件的引用方法：

一、通用方法（伪代码）

<script charset="utf-8" src="https://638183.freep.cn/638183/web/api/audioplayer.min.js"></script>
<script charset="utf-8" src="https://638183.freep.cn/638183/web/api/yslrc.min.js"></script>
<script>
    // ... 这里是必要的声明
    const aud = new AudPlayer(options); // 实例化音频播放对象
    LRC(aud.pa, aud.aud, geci); // 运行歌词同步函数
</script>

二、discuz!论坛（伪代码）

<script>
    // ... 这里是必要的声明
    loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', function() {
        loadJs('https://638183.freep.cn/638183/web/api/yslrc.min.js', function() {
            const aud = new AudPlayer(options);
            LRC(aud.pa, aud.aud, geci);
        });
    });  

    function loadJs(url, callback) {
        var script = document.createElement('script');
        script.charset = 'utf-8';
        script.src = url;
        script.onload = function() {
            if (callback) callback();
        };
        document.head.appendChild(script);
    }
</script>

3️⃣ 完整的实例代码：

<!-- 帖子《余烬》完整代码 -->
<style>
  @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
  /* --offsetX 设置帖子偏移量，花潮使用 81px; */
  .pa { --offsetX: 0px; --bg: url('https://638183.freep.cn/638183/t24/w8/yujb.jpg') no-repeat center/cover; }
  .player { width: 480px; bottom: 10px; color: lightblue; }
  .btnFs { top: 20px; right: 20px; color: lightblue; }
  .mypic { width: 160px; transition: .5s; opacity: var(--opacity); }
  .mypic:nth-of-type(1) { top: 30px; filter: hue-rotate(60deg); }
  .mypic:nth-of-type(2) { left: 100px; bottom: 200px; filter: hue-rotate(120deg); }
  .mypic:nth-of-type(3) { right: 100px; bottom: 200px; filter: hue-rotate(180deg); }
  #lrc { top: 60px; color: silver; --color1: steelblue; --color2: white; }
</style>

<div id="pa" class="pa">
  <video class="pd-vid" src="https://img.tukuppt.com/video_show/1863507/00/13/38/5df20bcb2b0fd.mp4" autoplay loop muted></video>
  <img class="mypic rot" src="https://638183.freep.cn/638183/small/780.webp" />
  <img class="mypic rot" src="https://638183.freep.cn/638183/small/780.webp" />
  <img class="mypic rot" src="https://638183.freep.cn/638183/small/780.webp" />
</div>

<script>
  // 歌词
  var geci = `[00:01.24]余烬 - 歌手：吴炳文 / sea蕊\n[00:18.36]出品：网易电波\n[00:21.72]从黑夜熬到天亮\n[00:24.27]是对谁执着\n[00:28.53]可能也认为我\n[00:30.06]是一团不愿散的火\n[00:36.96]掩盖着悲欢离合痛苦失落\n[00:39.69]但没有一次我想要示弱\n[00:45.42]这几番纠缠中\n[00:48.03]造就了另一个我\n[00:56.28]我与世界形成了两个极端\n[01:00.18]多么不堪\n[01:04.62]我被动身处于你的对岸\n[01:08.61]一拍即散\n[01:12.18]像余烬燃过\n[01:14.07]弹下烧不尽的灰\n[01:21.39]沉默后选择了背向而行\n[01:25.05]AGAIN\n[01:47.28]人群是熙熙攘攘心在摇晃\n[01:49.59]我的一败涂地一声不响\n[01:51.93]我的离开不痛不痒\n[01:54.06]一切都是痴心妄想\n[01:56.19]我的心已不再完整\n[01:58.23]怎么做到如此残忍\n[02:00.42]面对我的热情\n[02:01.56]你怎么能够冰冷的潇洒转身\n[02:04.32]掩盖着悲欢离合痛苦失落\n[02:06.03]但没有一次我想要示弱\n[02:11.76]这几番纠缠中\n[02:14.34]造就了另一个我\n[02:20.46]我与世界形成了两个极端\n[02:24.42]多么不堪\n[02:28.86]我被动身处于你的对岸\n[02:32.85]一拍即散\n[02:36.39]像余烬燃过\n[02:38.28]弹下烧不尽的灰\n[02:45.63]沉默后选择了背向而行\n[02:49.68]AGAIN`;

  // 播放器配置
  var options = {
    pa: '.pa',
    urls: [['https://music.163.com/song/media/outer/url?id=2029909014', '余烬']],
    btns: document.querySelectorAll('.mypic'),
  };

  // 加载并应用插件
  loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js?v0', function() {
    loadJs('https://638183.freep.cn/638183/web/api/yslrc.min.js', function() {
      const aud = new AudPlayer(options);
      LRC(aud.pa, aud.aud, geci);
    });
  });  

  // 加载JS资源函数
  function loadJs(url, callback) {
    var script = document.createElement('script');
    script.charset = 'utf-8';
    script.src = url;
    script.onload = function() {
      if (callback) callback();
    };
    document.head.appendChild(script);
  }
</script>

【附】可以将实例代码拿到 简易Web编辑器 修改、预览，也可以点击 《余烬》 直接查看效果。

梦江南

谢谢黑黑老师辛苦，学习了！