马黑黑 发表于 2023-12-20 21:39

新封装的带歌词同步的mPlayer

本帖最后由 马黑黑 于 2023-12-20 21:40 编辑

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

花间辞 - 动画音画

插件配置说明：

（一）资源引用方式：和 单独lrc歌词插件 一致；
（二）参数配置：
sf.onload = () => {
        const myplayer = new mPlayer();
        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;
        `);
        myplayer.setLrcCss(`top:20px; left:20px; color: tan; --bg: orange;`);
        myplayer.lrcAr = [];
};
【说明】

① 实例化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 = []; /* 歌词数组，注意不再是 let lrcAr = ... */

红影 发表于 2023-12-20 21:51

又是一个新封装的插件，这个好{:4_199:}

马黑黑 发表于 2023-12-20 22:04

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

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

红影 发表于 2023-12-20 22:28

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

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

马黑黑 发表于 2023-12-20 23:05

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

之前讲过 js 的类（class）的

马黑黑 发表于 2023-12-20 23:05

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

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

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

{:4_190:}

马黑黑 发表于 2023-12-21 11:45

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


谢谢支持

红影 发表于 2023-12-21 12:04

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

那个时候没记住{:4_173:}

红影 发表于 2023-12-21 12:05

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

而且配置起来也更方便{:4_204:}

马黑黑 发表于 2023-12-21 12:15

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

容易看懂就方便了

马黑黑 发表于 2023-12-21 12:15

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

类是抽象的

红影 发表于 2023-12-21 12:41

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

是的，这样的插件让做帖子变得如此方便呢{:4_199:}

红影 发表于 2023-12-21 12:41

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

这个字眼知道的，具体的内容有点忘了{:4_173:}

马黑黑 发表于 2023-12-21 13:20

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

额，不动手的，很快忘记

马黑黑 发表于 2023-12-21 13:23

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

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

幸运草 发表于 2023-12-21 13:28

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

红影 发表于 2023-12-21 14:37

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

看样子还是要动手啊，只是有时一忙就错过了{:4_201:}

红影 发表于 2023-12-21 14:38

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

嗯嗯，它可以自己设置的呢{:4_187:}

马黑黑 发表于 2023-12-21 19:35

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

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

封闭和不封闭都各有好处。毕竟都是拿来用的，使用者不可能去破坏插件/组件的基本功能。
页: [1] 2 3
查看完整版本: 新封装的带歌词同步的mPlayer