家家 - 尘埃

马黑黑 · 发表于 2024-1-26 13:18

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2024-1-26 14:05 编辑

0:00 0:00

HuaChao LRC Player

马黑黑 · 发表于 2024-1-26 13:22

本帖最后由马黑黑于 2024-1-26 14:06 编辑

帖子代码

<style>
#papa { margin: 0 0 0 calc(50% - 681px); width: 1200px; height: 674px; position: relative; background: lightblue url('https://638183.freep.cn/638183/t24/jpg/ifai.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px rgba(0,0,0,.6); overflow: hidden; display: grid; place-items: center; --state: paused; }
#mplayer { position: absolute; bottom: 10px; text-align: center; color: white; }
#mplayer p { margin: 0; padding: 0; cursor: pointer; }
#mprog { width: 240px; accent-color: darkgreen; outline: none; cursor: pointer; }
#btnplay { width: 80px; animation: rotating 6s infinite linear var(--state); }
#lrc { --motion: cover2; --tt: 1s; --bg: linear-gradient(180deg,hsla(100,10%,50%,.75),hsla(100,100%,20%,.65)); position: absolute; top: 15px; font: bold 2.4em sans-serif; color: hsl(100, 100%, 90%); white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 100%, 0%, .85)); pointer-events: none; z-index: 900; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 0%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: var(--bg); filter: inherit; background-clip: text; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards var(--state); }
#vid { position: absolute; top: -70px; width: 100%; height: calc(100% - 70px); object-fit: cover; pointer-events: none; mix-blend-mode: screen; }
@keyframes cover1 { from { width: 0%; } to { width: 100%; } }
@keyframes cover2 { from { width: 0%; } to { width: 100%; } }
@keyframes rotating { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2005492357" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2629112/00/01/51/5b448e6c1c0ca.mp4" loop muted></video>
<div id="mplayer">
<p><img id="btnplay" src="https://638183.freep.cn/638183/small/002_133507167677724892.png" title="播放/暂停" alt="" /></p>
<output id="mdu">0:00</output>
<input id="mprog" type="range" min="0" step="1" max="100" value="0" title="调节进度" />
<output id="mcur">0:00</output>
</div>
<div id="lrc" data-lrc="HuaChao LRC Player">HuaChao LRC Player</div>
</div>
<script>
var geci = [ [2,"家家 - 尘埃",8.4], [10.4,"作词 : 木兰号AKA陈韦伶",9.9], [20.29,"作曲 : 木兰号AKA陈韦伶",7.9], [28.23,"星星一直都在这一片云海",5.5], [34.6,"等着太阳疲倦之后离开",6.5], [42.7,"我也一直待在这个模糊地带",5.0], [48.91,"等着你疲倦了回来",5.4], [55.37,"天黑之后才拥有光彩",2.9], [58.91,"才能看见微弱的存在",2.9], [62.38,"我就好像星星在距你千里之外",6.3], [69.61,"白云总是对蓝天依赖",2.9], [73.19,"我的爱也因你而存在",2.9], [76.38,"哪怕你不懂我的感慨和等待",6.1], [83.83,"我的爱像尘埃散落在边疆地带",6.6], [90.76,"不再对谁期待",2.2], [93.01,"难道是一种自由自在",4.2], [97.65,"而承诺像尘埃不断被时间掩埋",6.7], [104.81,"谁还记得大雨之中的告白",7.3], [123.86,"时间走得太快要爱得痛快",5.2], [129.86,"宁愿受伤也不想要空白",6.9], [137.94,"谁都想被疼爱找一个未来",5.6], [144.3,"不要在孤独里徘徊",5.5], [150.79,"天黑之后才拥有光彩",2.8], [154.16,"才能看见微弱的存在",2.9], [157.86,"我就好像星星在距你千里之外",6.4], [164.92,"白云总是对蓝天依赖",2.9], [168.46,"我的爱也因你而存在",2.9], [171.6,"哪怕你不懂我的感慨和等待",6.4], [179.06,"我的爱像尘埃散落在边疆地带",6.7], [186.01,"不再对谁期待",2.2], [188.39,"难道是一种自由自在",4.4], [193.09,"而承诺像尘埃不断被时间掩埋",6.6], [199.97,"谁还记得大雨之中的告白",9.2], [228.5,"我的爱像尘埃散落在边疆地带",6.6], [235.38,"不再对谁期待",2.2], [237.8,"难道是一种自由自在",4.2], [242.51,"而承诺像尘埃不断被时间掩埋",6.6], [249.45,"谁还记得大雨之中的告白",6.8], [256.64,"谁还记得大雨之中的告白",9.2], [268.51,"谁都想被疼爱找一个未来",5.1], [274.83,"不要在孤独里徘徊",6] ];
var sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/js/lrcku.js';
sf.charset = 'utf-8';
document.querySelector('body').appendChild(sf);
sf.onload = () => {
var mseek = false;
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {
if(!mseek) mprog.value = aud.currentTime / aud.duration * 100;
mcur.value = toMin(aud.currentTime);
mdu.value = toMin(aud.duration);
for (let j = 0; j < geci.length; j++) {
if (aud.currentTime >= geci[j][0]) {
if (mKey === j) showLrc(geci[j][2]);
else continue;
}
}
});
mprog.onchange = () => aud.currentTime = mprog.value * aud.duration / 100;
mprog.onmousedown = () => mseek = true;
mprog.onmouseup = () => mseek = false;
mprog.onmousemove = () => {
if(mseek) mcur.value = toMin(mprog.value * aud.duration / 100);
};
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause()
var mState = () => aud.paused ? (stateSetting([papa,lrc],'--state','paused'), vid.pause()) : (stateSetting([papa,lrc],'--state','running'), vid.play());
};
</script>

复制代码

马黑黑 · 发表于 2024-1-26 13:30

本帖最后由马黑黑于 2024-1-26 14:07 编辑

帖子引用一个外部JS lrcku.js，它的作用是提供lrc歌词显示的解决方案，因为内容偏多，所以剥离出来。该JS文件：

lrcku.js ：

（一）公用变量 mKey ：用于处理歌词数组索引，供 audio 控件的 timeupdate 事件使用；
（二）相关函数：

① stateSetting(元素数组, 状态名称, 状态值) ：用于设置 CSS变量，以控制关键帧动画。参数一是元素id名称数组，如：[papa,lrc]；参数二是CSS变量名称，如：'--state'；状态值只有两个，要么是 'paused'，要么是'running'；

② showLrc(时间) ：显示歌词，供 audio 控件的 timeupdate 事件使用；

③ toMin(值) ：格式化时间输出，以分:秒的形式换算 audio 空间的时间信息。供 audio 控件的 timeupdate 事件使用；

④ calcKey() ：处理当前歌词索引，供 audio 的 seeked 监听事件调用。

帖子中播放器的 timeupdate 监听事件要使用公用变量 mKey 作为显示歌词的依据；mState 函数可自定义，对CSS关键帧动画的控制使用 stateSetting 函数可以简化帖子代码，其它的自己加上（比如例中的视频控制）；showLrc 和 toMin 函数也用在 timeupdate 事件监听代码块中，可按帖子代码的使用方式应用到自己的帖子里。

马黑黑 · 发表于 2024-1-26 13:34

本帖，主要用意两个：

一是使用HTML range 滑杆做可控的进度条，二是将lrc歌词显示的实现机制的JS抽象部分剥离出来（CSS和HTML需要在帖子中安排，audio 控件的几个监听事件也在帖子中完成）。

马黑黑 · 发表于 2024-1-26 13:44

关于 range 滑杆：

CSS 简单定义了外观颜色；

JS 变量 mseek 用于处理滑杆滑块拖动时与音频播放的协调问题。

滑杆的JS相关事件：

鼠标按下：mseek 变量为真，此时拖动滑块audio控件暂时不驱动滑杆运行；
鼠标移动：指按下左键移动（mseek = true）时，显示当前变更的进度应播放的时间；
鼠标松开：指松开左键时，mseek = false，随后鼠标的移动不会发生作用；
onchange ：指更改进度动作完成时，audio应从改变的值播放音乐（音乐处于暂停状态时需点击一下播放按钮）。

马黑黑 · 发表于 2024-1-26 14:13

关于 audio 的几个监听事件：

帖子需要显示歌词的，本例的所有监听事件都不能少。

如果是纯音乐帖，则：

不要 seeked 监听事件；

将 timeupdate 监听事件中的以下代码删掉：

         for (let j = 0; j < geci.length; j++) {
            if (aud.currentTime >= geci[j][0]) {
                  if (mKey === j) showLrc(geci[j][2]);
                  else continue;
            }
         }

同时，歌词数组变量 geci 删掉、CSS和HTML的lrc相关语句全部删掉。