因为想你才寂寞（学习黑黑纯SVG播放器效果）
<style>#papa { left: -214px; top:120px; width: 1024px; height: 640px;box-shadow: 3px 3px 20px #000; overflow: hidden; user-select: none; display: grid; place-items: center; position: relative; }
/* svg按钮↓*/
#mplayer { position: absolute; bottom: 0;left:560px; }
#btnpause { display: none; }
#btnwrap, #btnplay, #btnpause { cursor: pointer; }
#btnplay:hover + btnwrap, #btnpause:hover + btnwrap { fill: gold; }
#btnwrap:hover { fill: gold; }
#btnwrap:hover + #btnplay + #btnpause { fill: red;}
#tmsg { dominant-baseline: middle; fill: snow; }
#track { shape-rendering: crispEdges; cursor: pointer; }
/* svg 歌词及动态效果 ↓ */
#lrc { position: absolute; width: 80px; height: 760px; top: -240px; left:662px; }
.text { font: bold 2em sans-serif;dominant-baseline: middle; letter-spacing: 2px; fill: none; stroke-width: 1.5px; stroke-dasharray: 90 310; animation: stroke 6s infinite linear; writing-mode:vertical-rl; }
.text-1{ stroke: snow; text-shadow: 0 0 5px red; animation-delay: -1.5s; }
.text-2{ stroke: orange; text-shadow: 0 0 5px green; animation-delay: -3s; }
.text-3{ stroke: gold; text-shadow: 0 0 5px blue; animation-delay: -4.5s; }
.text-4{ stroke: tomato; text-shadow: 0 0 5px purple; animation-delay: -6s; }
@keyframes stroke { to { stroke-dashoffset: -400; } }
.shipin { position: absolute; width: 100%; height: 725px; top:-80px;object-fit: cover; }
</style>
<div id="papa">
<video class="shipin" src="https://img.tukuppt.com/video_show/2418175/00/02/01/5b4f55c95539b.mp4" muted="muted" autoplay="autoplay" loop="loop"></video>
<div style="position: absolute; left:0px; bottom: 0px; width:1024px;">
<img alt="" src="https://pic.imgdb.cn/item/6315549716f2c2beb1fe57f3.png"/></div>
<svg id="lrc">
<text x="50%" y="50%" class="text text-1">lrc歌词</text>
<text x="50%" y="50%" class="text text-2">lrc歌词</text>
<text x="50%" y="50%" class="text text-3">lrc歌词</text>
<text x="50%" y="50%" class="text text-4">lrc歌词</text>
</svg>
<svg id="mplayer" width="400" height="60">
<circle id="btnwrap" cx="20" cy="30" r="15" fill="olive" />
<polygon id="btnplay" points="15 20, 15 40, 30 30" fill="snow" />
<g id="btnpause" fill="snow">
<rect x= "15" y="20" width="3" height="20" />
<rect x="22" y="20" width="3" height="20" />
</g>
<g id="track"stroke-width="2">
<line x1="45" y1="30" x2="245" y2="30" stroke="transparent" stroke-width = "20" />
<line x1="45" y1="30" x2="245" y2="30" stroke="snow" />
<line id="prog" x1="45" y1="30" x2="245" y2="30" stroke="red" stroke-dasharray="200" stroke-dashoffset="200" />
</g>
<text id="tmsg" x="260" y="30">00:00 | 00:00</text>
</svg>
</div><br><br><br><br><br><br>
<script>
let lrcAr = [
['0.03','《因为想你才寂寞》'],
['10.03','学习黑黑纯SVG制作'],
['21.43','躲在开了关了灯的'],
['23.38','房间里面'],
['27.30','过去的画面 '],
['29.83','在眼前浮现'],
['32.57','有一种感觉叫做'],
['36.08','失眠'],
['37.39','那是因为我们当初'],
['39.79','爱得太甜'],
['42.94','躲在曾经'],
['44.99','熟悉的房间'],
['47.77','发呆看着我们那时'],
['50.02','傻傻的照片'],
['53.01','如果当时我抱紧'],
['55.41','让你感觉温暖'],
['58.19','是否你会留下 '],
['60.80','陪我走的更远'],
['65.99','因为想你才会寂寞'],
['68.43','因为爱你才会难过'],
['71.69','听到你的名字'],
['74.36','都会让我失措'],
['76.44','因为想你才会沉默'],
['79.11','因为爱你才会落寞'],
['81.96','我们的故事'],
['83.55','不想对任何人说'],
['86.95','你有没有想过我'],
['89.49','你有没有念着我'],
['92.58','还是选择忘记'],
['95.02','当作是解脱'],
['97.42','你还会不会想到我'],
['99.89','你还会不会继续爱我'],
['102.80','在见面的时候 '],
['106.25','是拥抱还是错过'],
['129.15','躲在曾经'],
['131.38','熟悉的房间'],
['133.98','发呆看着我们那时'],
['136.71','傻傻的照片'],
['139.12','如果当时我抱紧'],
['141.66','让你感觉温暖'],
['144.32','是否你会留下 '],
['146.96','陪我走的更远'],
['152.18','因为想你才会寂寞'],
['154.70','因为爱你才会难过'],
['157.82','听到你的名字'],
['160.04','都会让我失措'],
['162.61','因为想你才会沉默'],
['165.18','因为爱你才会落寞'],
['168.05','我们的故事'],
['169.58','不想对任何人说'],
['173.00','你有没有想过我'],
['175.64','你有没有念着我'],
['178.71','还是选择忘记'],
['181.12','当作是解脱'],
['183.52','你还会不会想到我'],
['186.04','你还会不会继续爱我'],
['188.87','在见面的时候 '],
['192.39','是拥抱还是错过'],
['194.77','你离开我'],
['195.58','就把我忘了吧'],
['199.12','想念一个人'],
['200.46','真的很寂寞'],
['204.34','如果过去的爱'],
['206.91','再也不回来'],
['209.53','我情愿你能得到'],
['214.98','快乐'],
['236.20','因为想你才会寂寞'],
['240.91','最后唱这首歌 '],
['244.58','你听不到的情歌']
];
let aud = new Audio(), lw = prog.getTotalLength(), txtAr = document.querySelectorAll('.text');
aud.src = 'https://music.163.com/song/media/outer/url?id=301442.mp3';
aud.autoplay = true;
aud.loop = true;
track.onclick = (e) => aud.currentTime = aud.duration * (e.offsetX - prog.getAttribute('x1')) / lw;
btnwrap.onclick = btnpause.onclick = btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', ()=> btnstate());
aud.addEventListener('pause', ()=> btnstate());
aud.addEventListener('timeupdate', () => {
prog.style.strokeDashoffset = lw - lw * aud.currentTime / aud.duration + 'px';
tmsg.textContent = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
for(j = 0; j < lrcAr.length;j ++) {
if(aud.currentTime >= lrcAr) {
for(ele of txtAr) ele.textContent = lrcAr;
}
}
});
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') :
(btnplay.style.display = 'none', btnpause.style.display = 'block');
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;
}
</script> 看到黑黑又出新效果，赶紧把之前的学习一下。黑黑的方法很好，不能听歌的时候，可以用本地歌曲做歌词，再使用保存过的地址，合在一起就可以了。感谢黑黑的代码{:4_187:} 影子朋友早上好！
这字幕真漂亮！ 黑黑说SVG给出的是文字，而不是画布那样给出的图形，所以试验了一下竖排，果真可以。
只是，为什么在歌词里加<br>歌词无法分行呢？记得以前可以的？@马黑黑
因为怕歌词太长，害得我硬是把一句分成两句{:4_173:} 制作漂亮，欣赏学习，问好老师！{:4_204:} 红影 发表于 2022-9-5 10:57
黑黑说SVG给出的是文字，而不是画布那样给出的图形，所以试验了一下竖排，果真可以。
只是，为什么在歌词 ...
<br>是HTML标签，仅对 innerHTML 的显示有效。
svg和canvas一样，都不支持文本换行。歌词偏长的，可以考虑将 svg 的 text 元素设为较长，我的是设置为 1000，你用 writing-mode 设置文本方向为竖排，则需要考虑帖子高度够不够用，因为此种模式，text 的宽度占用的是帖子的高度。 {:4_204:}好听的歌。歌词很喜欢 梦油 发表于 2022-9-5 10:55
影子朋友早上好！
这字幕真漂亮！
这个歌词字母是黑黑代码，特别漂亮呢{:4_204:} 梦缘 发表于 2022-9-5 11:15
制作漂亮，欣赏学习，问好老师！
谢谢梦缘临帖鼓励{:4_187:} 马黑黑 发表于 2022-9-5 12:42
是HTML标签，仅对 innerHTML 的显示有效。
svg和canvas一样，都不支持文本换行。歌词偏长的，可以考虑 ...
哦，不支持文本换行啊。嗯嗯，记下了。
知道的，竖向的需要考虑高度够不够。这个歌曲有些歌词比较长，我已经用花潮LRC人为把歌词多分了行数，这样每句都不太长了。没看分行后，有些歌词只剩2个字了{:4_173:} 四海八荒 发表于 2022-9-5 17:08
好听的歌。歌词很喜欢
这歌词有点伤感，但是很真实的情感{:4_204:} 红影 发表于 2022-9-5 19:02
哦，不支持文本换行啊。嗯嗯，记下了。
知道的，竖向的需要考虑高度够不够。这个歌曲有些歌词比较长，我 ...
也不必弄的太短，合适就好 马黑黑 发表于 2022-9-5 19:09
也不必弄的太短，合适就好
嗯嗯，大致看了一下，按现在的字号，最多到10字以下，就挺好{:4_173:} 亲爱的，你最棒，学以致用，优秀学员{:4_170:} 红影 发表于 2022-9-5 20:59
嗯嗯，大致看了一下，按现在的字号，最多到10字以下，就挺好
{:4_181:} 制作漂亮。赞！ 小辣椒 发表于 2022-9-5 21:01
亲爱的，你最棒，学以致用，优秀学员
都是现成的命令，我只是试试而已{:4_173:} 马黑黑 发表于 2022-9-5 21:12
然后超过10个的，就都被我硬分行了。 加林森 发表于 2022-9-5 21:18
制作漂亮。赞！
谢谢队长鼓励{:4_204:} 看看想谁想寂寞啦。。。。{:5_117:}