新封装的带歌词同步的mPlayer

马黑黑

这个，和发布没多久的 单独lrc歌词插件 效果很相近，但封装方式不同、参数配置方式不同。示例：

花间辞 - 动画音画

插件配置说明：

（一）资源引用方式：和 单独lrc歌词插件 一致；
（二）参数配置：

1. sf.onload = () => {
   
2.         const myplayer = new mPlayer();
   
3.         myplayer.setAudSrc(`https://music.163.com/song/media/outer/url?id=416892154`);
   
4.         myplayer.setBtnCss(`
   
5.                 background: url('https://638183.freep.cn/638183/t23/btn/meihua.png') no-repeat center/cover;
   
6.                 bottom: 20px;
   
7.         `);
   
8.         myplayer.setLrcCss(`top:20px; left:20px; color: tan; --bg: orange;`);
   
9.         myplayer.lrcAr = [[2,'胡寒 - 花间辞',10]];
   
10. };

复制代码

【说明】

① 实例化mPlayer对象 ：const myplayer = new mPlayer(); /* 蓝色变量可以随意命名，const 可以用 let、var */

② 给出音频地址 ：myplayer.setAudSrc('https://music.163.com/song/media/outer/url?id=416892154'); /* 论坛里只能用小角单或双引号；注意红色文本的大小写规范，下同 */

③ 配置播放按钮 ：

myplayer.setBtnCss(`
        background: url('https://638183.freep.cn/638183/t23/btn/meihua.png') no-repeat center/cover;
        bottom: 20px;
`);

/* 如果分行写，请使用反引号 ` 将字符包裹起来，不分行可以用小角单、双引号。支持背景图片属性、left，right，top，bottom属性，以及 width 、height等。 */

④ 配置lrc歌词 ：myplayer.setLrcCss(`top:20px; left:20px; color: tan; --bg: orange;`); /* 支持CSS四个方向的定位属性，支持前景色；--bg 变量是同步颜色，支持渐变与图片 */

⑤ myplayer.lrcAr = [[2,'胡寒 - 花间辞',10]]; /* 歌词数组，注意不再是 let lrcAr = ... */

红影

又是一个新封装的插件，这个好

马黑黑

红影 发表于 2023-12-20 21:51
又是一个新封装的插件，这个好

这个用JS class开发，基于对象

红影

马黑黑 发表于 2023-12-20 22:04
这个用JS class开发，基于对象

这个名称太专业了，不是很清楚。这个新的插件很不错呢

马黑黑

红影 发表于 2023-12-20 22:28
这个名称太专业了，不是很清楚。这个新的插件很不错呢

之前讲过 js 的类（class）的

马黑黑

红影 发表于 2023-12-20 21:51
又是一个新封装的插件，这个好

这个吧，可能配置更容易看懂

焱鑫磊

马黑黑

焱鑫磊 发表于 2023-12-21 10:41

谢谢支持

红影

马黑黑 发表于 2023-12-20 23:05
之前讲过 js 的类（class）的

那个时候没记住

红影

马黑黑 发表于 2023-12-20 23:05
这个吧，可能配置更容易看懂

而且配置起来也更方便

马黑黑

红影 发表于 2023-12-21 12:05
而且配置起来也更方便

容易看懂就方便了

马黑黑

红影 发表于 2023-12-21 12:04
那个时候没记住

类是抽象的

红影

马黑黑 发表于 2023-12-21 12:15
容易看懂就方便了

是的，这样的插件让做帖子变得如此方便呢

红影

马黑黑 发表于 2023-12-21 12:15
类是抽象的

这个字眼知道的，具体的内容有点忘了

马黑黑

红影 发表于 2023-12-21 12:41
这个字眼知道的，具体的内容有点忘了

额，不动手的，很快忘记

马黑黑

红影 发表于 2023-12-21 12:41
是的，这样的插件让做帖子变得如此方便呢

这个严格意义上讲不算是插件，它是封装好的组件，它不像插件那样要闭包

幸运草

又可以做帖子啦，我在外面看到有分享滴好多花潮歌词，可以找一首来辣

红影

马黑黑 发表于 2023-12-21 13:20
额，不动手的，很快忘记

看样子还是要动手啊，只是有时一忙就错过了

红影

马黑黑 发表于 2023-12-21 13:23
这个严格意义上讲不算是插件，它是封装好的组件，它不像插件那样要闭包

嗯嗯，它可以自己设置的呢

马黑黑

红影 发表于 2023-12-21 14:38
嗯嗯，它可以自己设置的呢

这方面，插件也是一样的。插件一般会做封闭型的，以避免来自外部的一些侵扰。而我这个组件，它的出发点是封装一组有歌词同步、有音频的播放暂停控制两大功能，可以不封闭。

封闭和不封闭都各有好处。毕竟都是拿来用的，使用者不可能去破坏插件/组件的基本功能。