免我蹉跎苦

马黑黑

HCPlayer

马黑黑

帖子代码

<style>
	@import 'https://638183.freep.cn/638183/web/css/audlrc.css';
	#mama { margin: 30px 0 30px calc(50% - 593px); background: black url('https://638183.freep.cn/638183/t24/webp2/coto.webp') no-repeat center/ cover; }
	#player { left: calc(50% - 125px); top: calc(50% - 120px); filter: hue-rotate(90deg); }
	#player:hover { filter: hue-rotate(180deg); transition: .7s; }
	#prog { bottom: 20px; width: 280px; --bg1: lightgreen; --bg2: green; --color: lightgreen; }
	#lrc { bottom: 50px; --bg: linear-gradient(rgba(0,128,0,.25),rgba(0,128,0,.75)); }
	#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
</style>

<div id="mama" class="pa">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2619965180"></audio>
	<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/15/12/46/video63660cee858f0.mp4" autoplay loop muted></video>
	<div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
	<img id="player" class="player" src="https://638183.freep.cn/638183/small/hh1.webp" alt="" />
	<div id="prog" class="prog" data-tt="00:00 00:00"></div>
</div>

<script type="module">
	import { Aud } from 'https://638183.freep.cn/638183/web/mod/audlrc.js';
var geci = [[2.27,"黄龄 - 免我蹉跎苦",6.5],[15.62,"脱掉名为假笑的衣服",3.0],[18.76,"有一种快乐叫想哭就哭",3.8],[22.95,"不让谁改变我嘴角的弧度",3.0],[25.87,"除非在黄河路碰到松鼠",3.8],[30.36,"明天完美计划的第一步",2.9],[33.29,"是把完美的计划统统都删除",3.5],[37.69,"来不及配合这世界例行的演出",3.0],[40.77,"能不能只配合自己不在乎",2.8],[45.18,"免我蹉跎苦免我蹉跎苦",2.9],[48.33,"不能专挑我一个人欺负",3.3],[52.38,"求您作作主求您作作主",3.0],[55.85,"多做点好事也该有点奖励制度",3.3],[59.83,"免我蹉跎苦免我蹉跎苦",3.0],[63.32,"只求顺遂平安我就能满足",3.0],[67.19,"求您作作主求您作作主",3.0],[70.63,"善良的人别认输",1.7],[72.33,"这世界会不会更酷",3.2],[89.25,"撕掉标准人生的地图",2.6],[91.88,"就当我偏偏最喜欢迷路",3.5],[96.42,"绕过时代广场上的大人物",3.1],[99.6,"给流浪的阿花做个小屋",3.7],[103.97,"明天扔掉计划后的第一步",3.0],[106.92,"是享受太阳升起的好处",3.7],[111.21,"来不及配合这世界热闹的义务",3.1],[114.3,"能不能就陪着孤独跳个舞",3.5],[118.66,"免我蹉跎苦免我蹉跎苦",3.0],[121.93,"不能专挑我一个人欺负",3.5],[125.87,"求您作作主求您作作主",3.2],[129.34,"多做点好事也该有点奖励制度",3.4],[133.4,"免我蹉跎苦免我蹉跎苦",3.0],[136.89,"只求顺遂平安我就能满足",3.2],[140.64,"求您作作主求您作作主",3.0],[144.17,"善良的人别认输",1.6],[145.79,"这世界会不会更酷",3.1],[155.61,"免我蹉跎苦免我蹉跎苦",3.0],[158.9,"不能专挑我一个人欺负",3.3],[162.64,"求您作作主求您作作主",3.3],[166.28,"多做点好事也该有点奖励制度",3.2],[170.00,"免我蹉跎苦免我蹉跎苦",3.0],[173.68,"只求顺遂平安我就能满足",3.8],[177.43,"求您作作主求您作作主",3.1],[180.98,"善良的人别认输",1.6],[182.58,"这世界会不会更酷",4.0]];
	var mDatas = { pa: mama, btn: player, prog: prog, lrc: lrc, lrcAr: geci };
	var audio = new Aud(mDatas);
	audio.play();
</script>

马黑黑

这是使用花潮格式lrc歌词数组的发帖方式。

若使用原生lrc歌词，请参阅：

绿·山水吟（测试audlrc模块） - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!

马黑黑

参数配置就这几个：

//配置模块所需要的参数 : mDatas 为自定义变量名
var mDatas = {
    pa: mama, //指定帖子容器
    btn: player, //指定控制音频的按钮
    prog: prog, //指定进度条标签
    lrc: lrc, //指定lrc歌词标签
    lrcAr: geci //指定lrc歌词数组
};

audio标签必须放在帖子容器内，若有video、svg，也应该放在帖子容器里，这样模块才能管理他们

梦江南

老师神速啊！

梦江南

谢谢老师辛苦，慢慢学习。

红影

这样才完整，两种歌词同步的封装都有了。其实更喜欢花潮格式lrc歌词同步，可以真正调整同步。原生歌词都是偷懒的时候喜欢的

红影

给这枝丫带了个花环，有意思。看到#player里上来就设定了 filter: hue-rotate(90deg); ，忍不住去打开花环的原样子看了看，原来它是偏紫红色的，嗯，现在的色相变化后的两个颜色都很符合背景呢。漂亮

冬天的雨

带进度条的播放器，播放器看上去简洁，大气，这个可以练习一次，今天假装看懂了

马黑黑

醉美水芙蓉 发表于 2024-11-21 16:48
谢谢黑黑老师重点讲解！

马黑黑

梦江南 发表于 2024-11-21 14:21
老师神速啊！

马黑黑

冬天的雨 发表于 2024-11-21 16:21
带进度条的播放器，播放器看上去简洁，大气，这个可以练习一次，今天假装看懂了

这个看懂容易

马黑黑

红影 发表于 2024-11-21 16:01
这样才完整，两种歌词同步的封装都有了。其实更喜欢花潮格式lrc歌词同步，可以真正调整同步。原生歌词都是 ...

就是要多花点时间

马黑黑

红影 发表于 2024-11-21 16:04
给这枝丫带了个花环，有意思。看到#player里上来就设定了 filter: hue-rotate(90deg); ，忍不住去打开花环 ...

CSS滤镜虽然简单，做一些工作还是胜任的

花飞飞

黄龄的声音太具有辨识度了，好听。。歌词也特别，跟白话聊天似的。。

花飞飞

马黑黑 发表于 2024-11-21 12:09
这是使用花潮格式lrc歌词数组的发帖方式。

若使用原生lrc歌词，请参阅：

昨天还为了原生歌词专门整了个插件。。
这个花潮格式歌词看着更亲切~~

花飞飞

带进度条、带歌词、带视频、带小播触碰变化、带所有的控制，
这么多件事这么一丢丢代码就可以完成，
这回是真的强大。

绿叶清舟

这个滤镜更强大了改色更精确了

马黑黑

绿叶清舟 发表于 2024-11-21 20:22
这个滤镜更强大了改色更精确了