祝端午安康
本帖最后由 马黑黑 于 2024-6-10 15:34 编辑 <br /><br /><style>#tz { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 640px; background: url('https://638183.freep.cn/638183/t24/2/55.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px gray; overflow: hidden; z-index: 1; position: relative; }
#lrc { position: absolute; left: 20px; top: 20px; font: normal 40px sans-serif; white-space: nowrap; color: darkgreen; text-shadow: 1px 1px 1px gray; animation: fly 20s linear infinite alternate var(--state); --ww: 350px; }
#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: green; --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; filter: hue-rotate(180deg); 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; }
.vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; mix-blend-mode: screen; pointer-events: none; }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes fly { to { left: calc(100% - var(--ww) - 20px); } }
</style>
<div id="tz">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2053633738" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/7165162/00/17/67/5ecc8865bb6d6.mp4" autoplay loop muted></video>
<div id="lrc">HUACHAO PLAYER</div>
<div id="player" data-time="00:00 00:00"></div>
</div>
<script>
var vids = document.querySelectorAll('.vid');
var btnSize = parseInt(window.getComputedStyle(player).getPropertyValue('--btnSize'));
var lrcKey = 0;
var showLrc = () => {
if(lrcKey >= lrcAr.length) return false;
lrc.innerText = lrcAr;
lrc.style.setProperty('--ww', lrc.offsetWidth + 'px');
lrcKey ++;
};
var mState = () => {
tz.style.setProperty('--state',['running','paused'][+aud.paused]);
if(vids.length > 0) vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
};
var s2m = (s) => (Math.floor(s / 60)).toString().padStart(2, '0') + ':' + (Math.floor(s % 60)).toString().padStart(2, '0');
aud.onplaying = aud.onpause = () => mState();
aud.onseeked = () => {
for(var j = 0; j < lrcAr.length; j ++) {
if(aud.currentTime < lrcAr) {
lrcKey = j - 1;
if(lrcKey < 0) lrcKey = 0;
break;
}
}
};
aud.ontimeupdate = () => {
player.style.setProperty('--prg', (aud.currentTime / aud.duration * 100 || 0) + '%');
player.dataset.time = s2m(aud.currentTime) + ' ' + s2m(aud.duration);
if(lrcKey <= lrcAr.length - 1 && aud.currentTime >= lrcAr) showLrc();
}
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';
}
};
var lrcAr = [ , , , , , , , , , , , , , , , , , , ];
</script>
帖子代码（未经严谨测试）
<style>
#tz { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 640px; background: url('https://638183.freep.cn/638183/t24/2/55.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px gray; overflow: hidden; position: relative; }
#lrc { position: absolute; left: 20px; top: 20px; font: normal 40px sans-serif; white-space: nowrap; color: darkgreen; text-shadow: 1px 1px 1px gray; animation: fly 20s linear infinite alternate var(--state); --ww: 350px; }
#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: green; --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; filter: hue-rotate(180deg); 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; }
.vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; mix-blend-mode: screen; pointer-events: none; }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes fly { to { left: calc(100% - var(--ww) - 20px); } }
</style>
<div id="tz">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2053633738" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/7165162/00/17/67/5ecc8865bb6d6.mp4" autoplay loop muted></video>
<div id="lrc">HUACHAO PLAYER</div>
<div id="player" data-time="00:00 00:00"></div>
</div>
<script>
var vids = document.querySelectorAll('.vid');
var btnSize = parseInt(window.getComputedStyle(player).getPropertyValue('--btnSize'));
var lrcKey = 0;
var showLrc = () => {
if(lrcKey >= lrcAr.length) return false;
lrc.innerText = lrcAr;
lrc.style.setProperty('--ww', lrc.offsetWidth + 'px');
lrcKey ++;
};
var mState = () => {
tz.style.setProperty('--state',['running','paused'][+aud.paused]);
if(vids.length > 0) vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
};
var s2m = (s) => (Math.floor(s / 60)).toString().padStart(2, '0') + ':' + (Math.floor(s % 60)).toString().padStart(2, '0');
aud.onplaying = aud.onpause = () => mState();
aud.onseeked = () => {
for(var j = 0; j < lrcAr.length; j ++) {
if(aud.currentTime < lrcAr) {
lrcKey = j - 1;
if(lrcKey < 0) lrcKey = 0;
break;
}
}
};
aud.ontimeupdate = () => {
player.style.setProperty('--prg', (aud.currentTime / aud.duration * 100 || 0) + '%');
player.dataset.time = s2m(aud.currentTime) + ' ' + s2m(aud.duration);
if(lrcKey <= lrcAr.length - 1 && aud.currentTime >= lrcAr) showLrc();
}
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';
}
};
var lrcAr = [ , , , , , , , , , , , , , , , , , , ];
</script>
本帖lrc歌词数组，数组元素的第三个子元素，例如 4] 的红色部分，可以不管它的精准度，歌词显示模块没有使用到它。 歌词左右游移的两边边距酱紫设置（假设两边保留 100px）：
#lrc {
/* 其他代码*/
left: 100px;
/* 其他代码*/
}
@keyframes fly { to { left: calc(100% - var(--ww) - 100px); } } 祝黑黑先生及家人端午安康、万事如意！ 梦油 发表于 2024-6-10 16:12
祝黑黑先生及家人端午安康、万事如意！
{:4_191:} 祝坛友们端午节快乐！~~~ 黑黑阖家安康，多吃粽子{:4_176:} 樵歌 发表于 2024-6-10 17:54
黑黑阖家安康，多吃粽子
好哒。同样祝你 愤怒的葡萄 发表于 2024-6-10 17:52
祝坛友们端午节快乐！~~~
共同快乐 醉美水芙蓉 发表于 2024-6-10 17:28
哇！新品出炉了！谢谢老师分享！
{:4_190:} 欣赏老师的精彩端午节制作！ 祝老师端午节安康！ https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F46850091%2Forigin230224e659a4232c5818944e58a61426.gif%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvNDY4NTAwOTEvb3JpZ2luMjMwMjI0ZTY1OWE0MjMyYzU4MTg5NDRlNThhNjE0MjYuZ2lm%2Fsign%2Fe49981d82ad61023bcc5b0af6eba1d53.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1720612374&t=e88e5db0a18484ec20cc632e6dd7134d 起个网名好难 发表于 2024-6-10 19:53
{:4_191:} 梦江南 发表于 2024-6-10 19:35
祝老师端午节安康！
谢谢 黑黑把刚讲解的播放器用到实例里了呢，这个还加了歌词，还能添加多个视频呢。
这样一步步都写出来的方式也好，更容易看看学习呢{:4_199:} 马黑黑 发表于 2024-6-10 15:36
本帖lrc歌词数组，数组元素的第三个子元素，例如 的红色部分，可以不管它 ...
是的，这个不是同步的，后面的那部分的确不起作用。做好的歌词可以不用去微调了{:4_173:} 红影 发表于 2024-6-10 20:51
是的，这个不是同步的，后面的那部分的确不起作用。做好的歌词可以不用去微调了
歌词还是同步的，没有逐字模拟同步功能。