春梦.月落春荒 （学习老黑“月节”制作）
本帖最后由 加林森 于 2022-9-9 17:51 编辑 <br /><br /><style>#papa { left: -214px; width: 1024px; height: 517px; background: darkred url('https://pic.imgdb.cn/item/631aa53a16f2c2beb12c84ba.jpg') no-repeat center/cover; display: grid; place-items: center; box-shadow: 3px 3px 20px #000; user-select: none; position: relative; z-index:1; }
#mplayer { position: absolute; bottom: 5px; } /* 播放器svg */
#lrc { position: absolute; top: 40px;bottom: 30px; display: block; } /* 歌词svg */
#lrctxt { dominant-baseline: middle; font: bold 2.6em sans-serif; letter-spacing: 3px; }
#tmsg { fill: #ccc; font: normal 1em sans-serif; dominant-baseline: middle; }
#btnwrap { fill: #ccc; cursor: pointer; }
#btnwrap:hover { fill: orange; }
</style>
<div id="papa">
<div id="wrapper"><img id="ball" src="https://pic.imgdb.cn/item/6235d74f5baa1a80ab9d74a0.gif" alt="" /></div>
<!-- 播放器 -->
<svg id="mplayer" width="380" height="60" shape-rendering="geometricPrecision">
<circle cx="30" cy="30" r="20" fill="none" stroke="url(#gradient)" stroke-width="3" />
<g id="mama" style="cursor: pointer">
<line x1="60" y1="30" x2="260" y2="30" stroke="transparent" stroke-width="20" />
<line id="track" x1="60" y1="30" x2="260" y2="30" stroke="snow" shape-rendering="crispEdges" />
<line id="prog" x1="60" y1="30" x2="260" y2="30" stroke="red" shape-rendering="crispEdges" />
</g>
<text id="tmsg" x="270" y="30">00:00 | 00:00</text>
<g id="btnwrap">
<path id="btnplay" d="M 22 20,22 40,42 30 z"></path>
<path d="M 29 20, 29 40, 32 40, 32 20, 29 20 z" fill="transparent"></path>
<path id="btnpause" d="M 24 20,24 40,29 40,29 20,24 20 z M 32 20,32 40,37 40,37 20,32 20 z" style="display: none"></path>
</g>
</svg>
<!-- lrc歌词 -->
<svg id="lrc" width="520" height="60">
<defs>
<linearGradient id="gradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="green"/>
<stop offset="50%" stop-color="snow"/>
<stop offset="100%" stop-color="gold"/>
</linearGradient>
</defs>
<text id="lrctxt" x="10" y="30" fill="transparent" stroke="url(#gradient)" shape-rendering="crispEdges">春梦.月落春荒</text>
</svg>
</div>
<script>
let lrcAr = [
['00.00','春梦.月落春荒 - Tacke竹桑'],
['3.15','作词 : 商连'],
['4.69','作曲 : moonik蛛蛛'],
['28.23','月色落枯井旁'],
['33.95','七月萤火随我流浪'],
['40.20','松间路微微凉'],
['43.46','渡头歌寥寥唱'],
['46.25','道谁舍红尘万丈'],
['53.07','旧胭脂白梨香'],
['58.79','夜色盛放好皮囊'],
['65.24','他衣角惹白霜'],
['68.64','枕着荒店烛光'],
['71.35','蛛丝木门咿呀轻响'],
['77.30','惊落了 画梁木屑海棠'],
['83.84','春色如许流年中枯黄'],
['90.06','余你我罅隙中一捧清光'],
['96.30','呵气共温热亦觉天荒'],
['102.40','赊余生月色倾洒衣裳'],
['108.47','错落处奉深情亦不输痴狂'],
['115.05','眉端 指尖 发梢 撩夜长'],
['120.75','化作漫野桃花予你风光'],
['155.61','惊落了 画梁木屑海棠'],
['161.71','春色如许流年中枯黄'],
['167.87','余你我罅隙中一捧清光'],
['174.26','此间死生相忘又何妨'],
['180.10','赊余生月色倾洒衣裳'],
['186.24','错落处奉深情亦不输痴狂'],
['192.94','眉端 指尖 发梢 撩夜长'],
['198.66','化作漫野桃花予你风光'],
['204.96','权当好梦便各自离场'],
['211.16','偏妄求相濡沫任滔天风浪'],
['217.82','葬你我梦深处'],
['221.68','自缚相拥这迷障'],
['225.59','莫惊扰时光'],
['230.91','恰红尘五十年 灯潮处'],
['236.58','谁记松间月色如故'],
['242.77','初豆蔻 月白裳'],
['246.11','桥头翁 鬓如霜'],
['249.07','擦肩可识今世模样'],
['260.00','谢谢欣赏']
];
let cc = {
x: 1*track.getAttribute('x1'),
len: track.getTotalLength(),
};
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=29825599.mp3';
aud.autoplay = true;
aud.loop = true;
prog.style.strokeDasharray = prog.style.strokeDashoffset = cc.len;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
mama.onclick = (e) => aud.currentTime = aud.duration * (e.offsetX - cc.x) / cc.len;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
prog.style.strokeDashoffset = cc.len - cc.len * aud.currentTime / aud.duration + 'px';
tmsg.textContent = toMin(aud.currentTime) + " | " + toMin(aud.duration);
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr) lrctxt.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>
@马黑黑 跟到学习制作出来一个。我的歌词怎么显示不全呢？怎么该在哪里调？请指导！谢谢！ 歌词显示不全是因为这里：
<!-- lrc歌词 -->
<svg id="lrc" width="360" height="60">
队长这图漂亮，节日快乐 歌词字数最多的那一句要考量，以它为基准设定歌词 svg 的宽度 马黑黑 发表于 2022-9-9 11:48
歌词显示不全是因为这里：
我该怎么改呢？ 绿叶清舟 发表于 2022-9-9 11:49
队长这图漂亮，节日快乐
谢谢清舟鼓励！节日快乐！ 看看队长，做得真好，尤其那两只小蝴蝶。{:4_204:}{:4_204:} 马黑黑 发表于 2022-9-9 11:50
歌词字数最多的那一句要考量，以它为基准设定歌词 svg 的宽度
哦，我得试一试了。 加林森 发表于 2022-9-9 11:51
谢谢清舟鼓励！节日快乐！
队长客气了，节日快乐，这颜色特别喜欢 加林森 发表于 2022-9-9 11:53
哦，我得试一试了。
这个和HTML代码的道理完全一致 加林森 发表于 2022-9-9 11:51
我该怎么改呢？
我都说到点上了 绿叶清舟 发表于 2022-9-9 11:56
队长客气了，节日快乐，这颜色特别喜欢
我看见这个图片就喜欢上了，我用秀秀制作了再修改就变成这样了。 红芍药 发表于 2022-9-9 11:52
看看队长，做得真好，尤其那两只小蝴蝶。
芍药中午好。好久不见了。节日快乐！{:4_204:} 马黑黑 发表于 2022-9-9 12:02
我都说到点上了
嗯嗯。谢谢！ 马黑黑 发表于 2022-9-9 12:01
这个和HTML代码的道理完全一致
哦。 加林森 发表于 2022-9-9 12:07
嗯嗯。谢谢！
希望你已经明白我的意思：就是修改红色部分的数值 加林森 发表于 2022-9-9 12:07
哦。
svg 这类用法，就是把 svg 当成是HTML的一个元素，它既然有 width、height 属性值，那么，修改这些值，就可以达到你要的宽高。 马黑黑 发表于 2022-9-9 12:09
svg 这类用法，就是把 svg 当成是HTML的一个元素，它既然有 width、height 属性值，那么，修改这些值，就 ...
嗯嗯。明白了。 马黑黑 发表于 2022-9-9 12:08
希望你已经明白我的意思：就是修改红色部分的数值
谢谢谢谢！节日快乐！
页:
[1]
2