祝花潮论坛的教师们节日快乐！
<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>
@马黑黑 @小辣椒 好帖，借队长好帖，同祝论坛的教师们节日快乐{:4_187:} 谢谢红影支持！同祝！ 队长速度快的，欣赏队长的精彩制作{:4_178:} 祝老师们节日快乐！ {:4_204:}{:4_204:} 小辣椒 发表于 2022-9-8 23:45
队长速度快的，欣赏队长的精彩制作
谢谢啊 小辣椒 发表于 2022-9-8 23:45
祝老师们节日快乐！
大家快乐 教师们节曰快乐！ 队长才是真正的老师。借花献佛，祝队长教师节快乐! 老师们，你们辛苦了！ 借老师的精彩好帖，同祝论坛的教师们节日快乐！{:4_204:} 马黑黑 发表于 2022-9-9 08:04
队长才是真正的老师。借花献佛，祝队长教师节快乐!
{:5_108:} 梦油 发表于 2022-9-9 08:45
老师们，你们辛苦了！
谢谢老梦！ 梦缘 发表于 2022-9-9 09:10
借老师的精彩好帖，同祝论坛的教师们节日快乐！
谢谢梦缘！{:4_204:} 加林森 发表于 2022-9-9 09:50
谢谢老梦！
祝老林阖家欢乐、幸福安康。 梦油 发表于 2022-9-9 10:02
祝老林阖家欢乐、幸福安康。
同喜同乐！{:4_190:}
页:
[1]