本帖最后由 加林森 于 2022-9-8 22:14 编辑 <br /><br />大猫咪 发表于 2022-7-7 23:06
经典！ 队长制作真棒，好听好看！赞！
猫猫这么晚还没有休息啊？{:4_179:}top：
<style>
#papa { left: -214px; width: 1024px; height: 640px; background: darkred url('https://pic.imgdb.cn/item/6319ef5d16f2c2beb17cf1cd.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;right:820px;bottom: 380px;width: 120px; height: 120px; border-radius: 50%; overflow: hidden; z-index: 3; }
#track { stroke: url(#gradient); }
#lrc { position: absolute; left: -120px;bottom:480px; display: block; }
#lrctxt { text-anchor:middle; dominant-baseline: text-after-edge; fill: url(#gradient); font: bold 2.2em sans-serif; text-shadow: -2px -2px 0px #fff, 2px 2px 3px #000; letter-spacing: 3px; }
#tmsg { fill: #ccc; font: bold 1em sans-serif; }
#btnwrap { display: block; fill: #ccc; cursor: pointer; }
#btnwrap:hover { fill: orange; }
</style>
<div id="papa">
<!-- 播放器 -->
<svg id="mplayer" width="120" height="120" shape-rendering="geometricPrecision">
<g id="mama" transform="rotate(-90, 60, 60)" style="cursor: pointer;">
<circle id="track" cx="60" cy="60" r="50" fill="none" stroke-width="10" stroke="rgba(0,0,0,0.35)" />
<circle id="prog" cx="60" cy="60" r="50" fill="none" stroke-width="4" stroke="rgba(255,255,255,0.55)" />
</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>
<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"></path>
</g>
</svg>
<!-- lrc歌词 -->
<svg id="lrc" width="560" height="150">
<defs><path id="lrcPath" fill="none" stroke="red" d="M 10 150 Q 305 -10,560 150" /></defs>
<defs>
<linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="blue"/>
<stop offset="35%" stop-color="yellow"/>
<stop offset="65%" stop-color="gray"/>
<stop offset="100%" stop-color="red"/>
</linearGradient>
</defs>
<textx="54%" y="0"><textPath id="lrctxt" xlink:href="#lrcPath">苏运莹 - 再见，我爱你</textPath></text>
</svg>
</div>
<script>
let lrcAr = [
['00.00','教师之歌'],
['3.98','歌手：黄圣尧 / 徐梓露'],
['5.09','所属专辑：教师之歌'],
['6.48','男：'],
['18.25','爱心与奉献'],
['21.13','像花儿一样绽放'],
['25.33','责任与担当'],
['28.40','是我不变的信仰'],
['30.94','女：'],
['32.65','用心做教育'],
['35.48','是为人师的方向'],
['39.19','用爱筑未来'],
['42.61','呈我心中的份量'],
['45.36','男：'],
['50.39','美丽童话多彩课堂'],
['53.66','激起我们对知识的渴望'],
['57.25','放飞希望收获梦想'],
['60.75','让我们在爱中成长'],
['63.47','女：'],
['65.01','春风化雨 一路芬芳'],
['68.05','就让课堂充满温暖阳光'],
['71.62','平凡之路 描绘希望'],
['75.32','让我们画出绚烂的天堂'],
['79.44','女：'],
['80.85','爱心与奉献'],
['114.31','像花儿一样绽放'],
['118.33','责任与担当'],
['121.41','是我不变的信仰'],
['124.31','男：'],
['125.72','用心做教育'],
['128.78','是为人师的方向'],
['132.66','用爱筑未来'],
['135.71','呈我心中的份量'],
['139.00','女：'],
['140.62','美丽童话多彩课堂'],
['143.07','激起我们对知识的渴望'],
['147.03','放飞希望收获梦想'],
['150.42','让我们在爱中成长'],
['153.11','男：'],
['154.80','春风化雨 一路芬芳'],
['157.19','就让课堂充满温暖阳光'],
['161.18','平凡之路 描绘希望'],
['164.72','让我们画出绚烂的天堂'],
['168.92','合:'],
['171.28','张开坚强的翅膀'],
['175.06','让我们飞向远方'],
['178.10','女：'],
['179.64','把知识化成力量'],
['182.69','让奇迹从天而降'],
['184.88','合：'],
['190.10','美丽童话多彩课堂'],
['192.85','激起我们对知识的渴望'],
['197.21','放飞希望收获梦想'],
['200.68','让我们在爱中成长'],
['204.31','春风化雨 一路芬芳'],
['207.29','就让课堂充满温暖阳光'],
['211.43','平凡之路 描绘希望'],
['215.01','让我们画出绚烂的天堂'],
['222.67','让我们画出绚烂的天堂']
];
let cc = { //圆环对象
x: 1*track.getAttribute('cx'),
y: 1*track.getAttribute('cy'),
r: 1*track.getAttribute('r'),
sw: 1*track.getAttribute('stroke-width'),
len: track.getTotalLength(),
};
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1407245362.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) => { //环单击
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;
};
//audio空间各类监听
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
prog.style.strokeDashoffset = cc.len - cc.len * aud.currentTime / aud.duration + 'px';
curMsg.textContent = toMin(aud.currentTime);
durMsg.textContent = 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>
加林森 发表于 2022-7-8 08:43
猫猫这么晚还没有休息啊？
昨天晚上玩晚了点{:4_173:} 队长下午好 ！周末快乐 {:4_204:}{:4_179:}
大猫咪 发表于 2022-7-8 13:48
昨天晚上玩晚了点 队长下午好 ！周末快乐
好的好的。下午好。好快啊，又是周末了。{:4_179:}
加林森 发表于 2022-7-8 14:38
好的好的。下午好。好快啊，又是周末了。
{:4_179:}周末快乐队长
大猫咪 发表于 2022-7-8 14:45
周末快乐队长
这个周末没有出去玩吗？{:4_179:}
加林森 发表于 2022-7-8 14:56
这个周末没有出去玩吗？
不去了队长！调整下心情，和队长一起开心{:4_179:}
大猫咪 发表于 2022-7-8 15:17
不去了队长！调整下心情，和队长一起开心
那就好。开心地去制作音乐玩玩。{:4_179:}
加林森 发表于 2022-7-8 15:20
那就好。开心地去制作音乐玩玩。
嗯嗯 必须的 {:4_179:}{:4_191:}
大猫咪 发表于 2022-7-8 15:21
嗯嗯 必须的
是的。{:4_191:}{:4_179:}
加林森 发表于 2022-7-7 21:27
谢谢啊。
不客气啊，队长下午好{:4_187:}
红影 发表于 2022-7-8 15:55
不客气啊，队长下午好
好快又要到晚上了。
加林森 发表于 2022-7-8 17:11
好快又要到晚上了。
5点多那会我已经在回家的路上了。
红影 发表于 2022-7-8 20:50
5点多那会我已经在回家的路上了。
挺好的。
加林森 发表于 2022-7-8 20:59
挺好的。
好啥啊，路上好热的呢。
红影 发表于 2022-7-9 11:16
好啥啊，路上好热的呢。
你们那里的气温是多少？
加林森 发表于 2022-7-9 13:07
你们那里的气温是多少？
今天高温红色预警，已经40度了。
红影 发表于 2022-7-10 16:25
今天高温红色预警，已经40度了。
我们这里昨晚下了一点雨，今天又是大太阳了。好像明天要下雨了。
加林森 发表于 2022-7-10 17:18
我们这里昨晚下了一点雨，今天又是大太阳了。好像明天要下雨了。
还是赶紧下雨吧，太热了。
红影 发表于 2022-7-10 21:52
还是赶紧下雨吧，太热了。
我们这里今晚又下了暴雨的。现在还是热！
加林森 发表于 2022-7-10 21:54
我们这里今晚又下了暴雨的。现在还是热！
我们这今天这样的热法史上罕见。