免我蹉跎苦

马黑黑 发表于 2024-11-21 12:06

马黑黑 发表于 2024-11-21 12:07

<h2>帖子代码</h2>
<div id="hEdiv"><pre id="hEpre">
<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 = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
var mDatas = { pa: mama, btn: player, prog: prog, lrc: lrc, lrcAr: geci };
var audio = new Aud(mDatas);
audio.play();
</script>
</pre></div>

<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);
</script>

马黑黑 发表于 2024-11-21 12:09

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

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

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

马黑黑 发表于 2024-11-21 12:15

本帖最后由马黑黑于 2024-11-21 12:16 编辑

参数配置就这几个：

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

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

梦江南 发表于 2024-11-21 14:21

老师神速啊！{:4_187:}

梦江南 发表于 2024-11-21 14:22

谢谢老师辛苦，慢慢学习。{:4_190:}

红影发表于 2024-11-21 16:01

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

红影发表于 2024-11-21 16:04

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

冬天的雨 发表于 2024-11-21 16:21

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

醉美水芙蓉 发表于 2024-11-21 16:48

马黑黑 发表于 2024-11-21 17:51

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

{:4_190:}

马黑黑 发表于 2024-11-21 17:52

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

{:4_191:}

马黑黑 发表于 2024-11-21 17:52

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

这个看懂容易{:4_170:}

马黑黑 发表于 2024-11-21 17:53

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

就是要多花点时间

马黑黑 发表于 2024-11-21 17:53

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

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

花飞飞 发表于 2024-11-21 19:31

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

花飞飞 发表于 2024-11-21 19:35

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

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

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

花飞飞 发表于 2024-11-21 19:36

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

绿叶清舟 发表于 2024-11-21 20:22

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

马黑黑 发表于 2024-11-21 20:22

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

{:4_190:}

页: [1] 2 3 4

花潮论坛's Archiver

免我蹉跎苦