情深似海--帖赠黑黑祝双节快乐!
<style>#papa { left:-404px; width: 1400px; height: 720px; top: 150px; background: darkred url('https://wj.zp68.com/lxx/yunhua/2022/09/08/qssh.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;top: 560px; width: 120px; height: 120px; left:1200px; border-radius: 50%; overflow: hidden; z-index: 3; }
#track { stroke: url(#gradient); }
#lrc { position: absolute; left:780px;top: 30px; 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 Teal, 2px 2px 3px #000; letter-spacing: 3px; }
#tmsg { fill: Teal; font: bold 1em sans-serif; }
#btnwrap { display: block; fill: #eee; 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 = [
['0.00','【情深似海】'],
['9.35','歌手：高胜美'],
['16.71','祝黑黑双节快乐！'],
['24.20','我对你情深深似海'],
['28.64','你对我深情难忘怀'],
['33.32','但那好景总是不常在'],
['38.03','你我不得不分开'],
['42.71','忍住那份痛苦和无奈'],
['47.44','愿你天天幸福愉快'],
['52.66','无论海角和天涯'],
['56.87','请你记着我的爱'],
['61.68','我想你不是不明白'],
['65.85','不是不明白我的爱'],
['71.58','为了什么狠心丢下我'],
['75.25','多少海誓山盟'],
['77.20','通通都抛开'],
['84.20','LRC编辑：小辣椒'],
['93.02','我对你情深深似海'],
['97.14','你对我深情难忘怀'],
['102.03','但那好景总是不常在'],
['106.54','你我不得不分开'],
['111.19','忍住那份痛苦和无奈'],
['115.99','愿你天天幸福愉快'],
['120.81','无论海角和天涯'],
['125.46','请你记着我的爱'],
['130.31','我想你不是不明白'],
['134.86','不是不明白我的爱'],
['139.75','为了什么狠心丢下我'],
['144.56','多少海誓山盟'],
['146.47','通通都抛开'],
['152.30','我对你情深深似海'],
['156.19','你对我深情难忘怀'],
['161.01','但那好景总是不常在'],
['165.66','你我不得不分开'],
['170.28','忍住那份痛苦和无奈'],
['175.05','愿你天天幸福愉快'],
['179.80','无论海角和天涯'],
['184.65','请你记着我的爱'],
['189.60','我想你不是不明白'],
['194.11','不是不明白我的爱'],
['198.96','为了什么狠心丢下我'],
['203.61','多少海誓山盟'],
['205.52','通通都抛开'],
['212.61','祝大家中秋节快乐！'],
['221.60','情深似海'],
['226.10','情深似海']
];
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://wj.zp68.com/lxx/yunhua/2022/09/08/10qssh.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>
<br><br><br><br><br><br><br><br><br><br> @马黑黑
黑黑双节快乐！ 又是一首煽情的歌曲{:4_170:} 谢谢黑黑一直以来的辛苦付出，让大家快乐的学习。
学会了许多黑黑分享的好教材，也是出了许多好的优秀作品。
小辣椒简单的制作别嫌弃{:4_189:} 黑老欣赏{:4_199:} 加林森 发表于 2022-9-8 23:42
黑老欣赏
队长晚上好，今天太迟了，我们准备下 小辣椒 发表于 2022-9-8 23:37
@马黑黑
黑黑双节快乐！
用心了 布局有灵动性。一般安放东西，不能随意，既兼顾合理性，又考虑审美功能。这个模板，要处理的无非就是歌词与播放器的位置，小辣椒匠心独运，根据背景合理、科学布局二者，合乎审美要求。 亲爱的这个帖子的歌曲我单位里能听到呢，开心{:4_205:} 这个歌词处理得漂亮，在圆形上部的弯弧歌词，会有种特地去设置的圆弧文字一样。亲爱的聪慧，这个帖子太赞了。黑黑收礼开心，节日快乐{:4_187:} 小辣椒朋友双节快乐！黑黑朋友双节快乐！朋友们双节快乐！ 欣赏老师的情深似海，好看好听，点赞！{:4_187:}
页:
[1]