火烧的寂寞 1#（学习黑黑封装圆环播放器）
<style>#papa {
margin: 120px 0 0 calc(50% - 681px);
width: 1200px;
height: 675px;
background: #666 url('https://pic.imgdb.cn/item/6376457116f2c2beb1c76766.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
position: relative;
}
.wenzi {--delay: 0s; position: absolute; left: 530px; bottom: 40px; width: 120px; height: 40px; font-family: '楷体','微软雅黑'; font-size: 30px; color: hsl(20,10%,80%);animation: sh 16s var(--delay) linear infinite; opacity: .1; }
@keyframes sh{ 20% { opacity: .1; } 50% { opacity: 1; transform: translate(20px,-280px);}100% { opacity: .1;transform: translate(0px,-420px); }}
.vid { position: absolute; width: 1000px; height: 675px; object-fit: cover; opacity: .5; clip-path: circle(90% at bottom) ;mix-blend-mode: screen;}
</style>
<div id="papa">
<video class="vid" src="https://img.tukuppt.com/video_show/2432605/00/01/90/5b4e1a583cb59.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div class="wenzi">仍然在 想你</div>
<div class="wenzi" style="--delay: 5s; left: 660px; bottom: 80px;">思念如火翻搅着</div>
<div class="wenzi" style="--delay: 8s; left: 400px; bottom: 60px;">心在痛</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=862933532" loop autoplay></audio>
<script>
(function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 10px; left: 50%; transform: translateX(-50%);',player_css: 'bottom: 10px; left: calc(50% - 60px);',playerCode: `<style>#mplayer {position: absolute;--track: hsla(100,30%,80%,.65);--prog: hsla(100,60%,50%,.55);--color: #e9f1f6;}#btnwrap { display: block; fill: var(--color); opacity: .85; cursor: pointer; }#btnwrap:hover { opacity: 1; }#track { fill: none; stroke: var(--track); }#prog { fill: none; stroke: var(--prog); }#tmsg { fill: var(--color); stroke: none; font: bold 1em sans-serif; }#lrc {--motion: cover2;--tt: 1s;--state: running;--bg: linear-gradient(180deg,hsla(100,10%,50%,.75),hsla(100,100%,20%,.65));position: absolute;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));z-index: 900;}#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);filter: inherit;-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}@keyframes cover1 { from { width: 0; }to { width: 100%; } }@keyframes cover2 { from { width: 0; }to { width: 100%; } }</style><svg id="mplayer" width="120" height="120"><g id="circle_wrap" transform="rotate(-90, 60, 60)" style="cursor: pointer;"><circle id="track" cx="60" cy="60" r="50" stroke-width="10" /><circle id="prog" cx="60" cy="60" r="50" stroke-width="10" /></g><g id="btnwrap"><path id="btnplay" d="M 50 50,50 70,70, 60 z"></path><path id="btnpause" d="M 52 50,52 70,57 70,57 50,52 50 z M 60 50,60 70,65 70,65 50,60 50 z" style="display: none;"></path><path d="M 57 50,60 50,60 70,57 70 z" fill="transparent" /></g><path id="curPath" d="M 20 70 Q 60 0 100 70" fill="none" stroke="none" /><path id="durPath" d="M 20 55 Q 60 110 100 55" fill="none" stroke="none" /><g id="tmsg"><text x="34" y="0"><textPath id="curMsg" xlink:href="#curPath" dominant-baseline="text-after-edge">00:00</textPath></text><text x="29" y="0"><textPath id="durMsg" xlink:href="#durPath" dominant-baseline="text-before-edge">00:00</textPath></text></g></svg><div id="lrc" data-lrc="HCPlayer">HCPlayer</div>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;let mKey = 0, mFlag = true, cc = { x: 1 * track.getAttribute('cx'), y: 1 * track.getAttribute('cy'), len: track.getTotalLength(), };prog.style.strokeDasharray = prog.style.strokeDashoffset = cc.len;btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();circle_wrap.onclick = (e) => {let deg = Math.atan2(e.offsetY - cc.y, e.offsetX - cc.x) * 180 / Math.PI;deg += (e.offsetX < cc.x && e.offsetY < cc.y) ? 450 : 90;aud.currentTime = aud.duration * deg / 360;};aud.addEventListener('timeupdate', () => {prog.style.strokeDashoffset = cc.len - cc.len * aud.currentTime / aud.duration;curMsg.textContent = toMin(aud.currentTime);durMsg.textContent = toMin(aud.duration);for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {if (mKey === j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.display = 'none', btnpause.style.display = 'block', lrc.style.setProperty('--state', 'running'));let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.lrcAr);showLrc(time);};let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60),sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};};mkPlayer.HCPlayer = playCode;})(this);
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
HCPlayer({
lrcAr: lrcAr,
player_css: 'bottom: 20px; right:40px; --track: #bacac6; --prog: #EE9611; --color: #e3f9fd; opacity: .95;',
lrc_css: 'top: 30px; left: 50%; transform: translateX(-50%); --bg:linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(80, 70%, 50%, .6), hsla(0, 100%, 50%, .75));; color: #ddd;',
});
</script> 学习一下，这个真的太方便了。感谢黑黑带来的福利@马黑黑{:4_187:} 这场面让人惊呆了，好赞！字幕创意非常好。 红影 发表于 2022-11-18 22:40
学习一下，这个真的太方便了。感谢黑黑带来的福利@马黑黑
音乐和歌词方面，管几个参数就好，可以更方便做帖 马黑黑 发表于 2022-11-18 22:43
这场面让人惊呆了，好赞！字幕创意非常好。
文字学你的那个万剑帖子里的两个小剑的效果，正好可以用这里表达歌曲情绪{:4_173:} 马黑黑 发表于 2022-11-18 22:43
音乐和歌词方面，管几个参数就好，可以更方便做帖
这个做得比较急，人物的抠图没弄好，后背那块，移动了一下让他靠灯柱旁，还好看不出来{:4_173:} 红影 发表于 2022-11-18 23:18
文字学你的那个万剑帖子里的两个小剑的效果，正好可以用这里表达歌曲情绪
很不错的 红影 发表于 2022-11-18 23:20
这个做得比较急，人物的抠图没弄好，后背那块，移动了一下让他靠灯柱旁，还好看不出来
这种思路挺好的，遮丑也是一门学问 有学习，有创新，真是个好学生。{:4_204:} 歌词的意境真好，特别那火燃烧的效果，把歌词中主人公的心情衬托得十分到位。 马黑黑 发表于 2022-11-18 23:20
很不错的
一个动作比另一个滞后，一直都想试验一下。不会用JS，只能一个个设，只设了3句，多了也不好{:4_173:} 红影 发表于 2022-11-19 09:33
一个动作比另一个滞后，一直都想试验一下。不会用JS，只能一个个设，只设了3句，多了也不好
JS通过计算会批量设置，一句语句的事情 马黑黑 发表于 2022-11-18 23:21
这种思路挺好的，遮丑也是一门学问
一开始放在道路中间的，背后的瑕疵太明显了。后来移动过去还行。为了省得调位置，把抠图直接扔图片里了{:4_173:} 红影 发表于 2022-11-19 09:35
一开始放在道路中间的，背后的瑕疵太明显了。后来移动过去还行。为了省得调位置，把抠图直接扔图片里了{: ...
天衣无缝 樵歌 发表于 2022-11-19 06:30
有学习，有创新，真是个好学生。
师兄羡慕不？任何时候只要师兄想学，也能做出来的{:4_173:} 樵歌 发表于 2022-11-19 06:31
歌词的意境真好，特别那火燃烧的效果，把歌词中主人公的心情衬托得十分到位。
那火是放了个视频在里面。这首歌挺喜欢的，就做了个。信的原唱不让听，我就找了别人的代替{:4_173:} 你这个字幕处理得真有意思 马黑黑 发表于 2022-11-19 09:34
JS通过计算会批量设置，一句语句的事情
对JS不熟呀，少量个还是一个个设比较好，毕竟容易理解。大量的就必须借助JS的本事了{:4_173:} 马黑黑 发表于 2022-11-19 09:36
天衣无缝
哈哈，不求天衣无缝，只要看不出来就好{:4_189:} 梦油 发表于 2022-11-19 09:49
你这个字幕处理得真有意思
谢谢梦油鼓励，黑黑封装了7个播放器，我这才完成了第一作业{:4_173:}