《Beyond - 午夜怨曲》相关说明

马黑黑 · 发表于 2024-6-11 11:58

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

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

x

JS资源代码

/* tube3dlrc.js (MaHeihei 2024-6-10)

约定：

① 帖子 id="tz"

② audio id="aud"

③ video class="vid"

④ 播放控制器标签 id="player"

⑤ 歌词显示标签 id="lrc"

⑥ 歌词数组 var lrcAr = [[0,"歌词一",2],[3.2,"歌词二"],3,[5,"...",6],[241.35,"歌词N",8.1]];

注意：

脚本通过管理CSS变量 --prg 渲染播放进度、--state 控制按钮及其他可能存在的CSS动画；对lrc歌词的管理，仅负责呈现歌词，歌词动画由帖子完成。

*/

(function() {

/* 声明变量

vids : 视频标签

btnSize : 按钮尺寸

keynow : 当前歌词索引

*/

var vids = document.querySelectorAll('.vid'),

btnSize = parseInt(window.getComputedStyle(player).getPropertyValue('--btnSize')),

keynow = 0;

//工具函数 : 秒→分

var s2m = (s) => (Math.floor(s / 60)).toString().padStart(2, '0') + ':' + (Math.floor(s % 60)).toString().padStart(2, '0');

//联动函数 : 通过音频暂停状态管理关键帧动画与视频

var mState = () => {

tz.style.setProperty('--state',['running','paused'][+aud.paused]);

if(vids.length > 0) vids.forEach(vid => aud.paused ? vid.pause() : vid.play());

};

//歌词索引变更函数 : 正常播放状态下自然递增

var addkey = () => {

if(keynow > lrcAr.length - 1) return;

for(var k = 0; k < lrcAr.length; k ++) {

if(aud.currentTime > lrcAr[keynow][0]) {

showLrc(keynow);

keynow ++;

break;

}

};

//显示歌词函数

var showLrc = (key) => lrc.innerText = lrcAr[key][1];

//监听audio控件播放和暂停事件 : 运行联动函数

aud.onplaying = aud.onpause = () => mState();

//监听audio控件播放时间变化事件 : 驱动进度、播放时间信息、歌词索引的变化

aud.ontimeupdate = () => {

player.style.setProperty('--prg', (aud.currentTime / aud.duration * 100 || 0) + '%');

player.dataset.time = s2m(aud.currentTime) + ' ' + s2m(aud.duration);

addkey();

};

//监听audio控件寻轨事件 : 重新计算歌词索引

aud.onseeked = () => {

for(var j = 0; j < lrcAr.length; j ++) {

if(aud.currentTime < lrcAr[j][0]) {

keynow = j - 1;

if(keynow < 0) keynow = 0;

showLrc(keynow);

break;

}

};

//播放控制器点击事件 : 依据点击范围处理音频进度改变、播放暂停等事宜

player.onclick = (e) => {

if(e.offsetY > 0) aud.currentTime = aud.duration * e.offsetX / player.offsetWidth;

if(e.offsetY < 0 && e.offsetX > player.offsetWidth / 2 - btnSize / 2 && e.offsetX < player.offsetWidth / 2 + btnSize / 2) aud.paused ? aud.play() : aud.pause();

};

//鼠标指针经过播放控制器事件 : 根据指针位置提供友好交互

player.onmousemove = (e) => {

if(e.offsetY < 0) {

if(e.offsetX > player.offsetWidth / 2 - btnSize / 2 && e.offsetX < player.offsetWidth / 2 + btnSize / 2) {

player.title = aud.paused ? '播放' : '暂停';

player.style.cursor = 'pointer';

}

}else{

player.title = '调节进度';

player.style.cursor = 'pointer';

}

};

})();

马黑黑 · 发表于 2024-6-11 12:00

本帖最后由马黑黑于 2024-6-11 12:08 编辑

将代码存为JS文档，然后在帖子中按约定引用资源，JS即可渲染出相应效果：
帖子HTML基本结构：

<div id="tz">
<audio id="aud" src="音频地址" autoplay loop></audio>
<div id="lrc">HUA CHAO PLAYER</div>
<div id="player"></div>
</div>

配套CSS（更多内容请参阅实例代码）：

#lrc { position: absolute; left: 200px; top: 20px; font: normal 30px sans-serif; text-shadow: 1px 1px 1px gray; background: linear-gradient(to right, red, blue,  green, red); background-clip: text; -webkit-background-clip: text; color: transparent; filter: drop-shadow(-1px -1px 6px gray); animation: swear 6s linear infinite alternate; }
#player { position: absolute; left: calc(50% - 140px); bottom: 20px; width: 280px; height:10px; background: linear-gradient(to right, var(--color) var(--prg), transparent 0); border: 1px solid var(--color); border-radius: 6px; display: grid; place-items: center; --color: purple; --prg: 0%; --btnSize: 50px;}
#player::before, #player::after { position: absolute; content: ''; }
#player::before { width: var(--btnSize); height: var(--btnSize); top: calc(var(--btnSize) * -1 - 5px); background: url('https://638183.freep.cn/638183/t23/btn/f5.png') no-repeat center/cover; animation: rot 6s linear infinite var(--state);}
#player::after { content: attr(data-time); inset: -30px 0 10px 0; text-align: justify; text-align-last: justify; font-size: 14px; color: var(--color); pointer-events: none; }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes swear {
   from { transform: perspective(400px) rotateY(20deg); }
   to { transform: perspective(400px) rotateY(-20deg); }
}

一楼的JS代码，只是独立出来的资源，帖子必要的CSS和HTML是不能在帖子中省略的，播放器、歌词显示等单元的构造有帖子完成。