Kelly Clarkson - Because Of You（学习黑黑示波图效果-2）
<style>#papa { margin: 120px 0 0 calc(50% - 790px); width: 1400px; height: 800px; display: grid; place-items: center; background: gray url('https://pic.imgdb.cn/item/639db2f1b1fccdcd368dd34b.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; opacity: .95; user-select: none; overflow: hidden; z-index: 1; --state: paused; }
#papa::before { position: absolute; content: ''; width: 450px; height: 300px; top: 200px; left:10px; background: url('https://pic.imgdb.cn/item/639db2c1b1fccdcd368d71d1.jpg') 0px -10px/ cover no-repeat; border-radius: 50%; box-shadow: 4px 4px 4px hsla(0,0%,0%,.15); animation: rot 6s infinite alternate linear; }
#dt1{ position: absolute; width: 40px; height: 60px; top: 380px; left: 180px; }
#dt2{ position: absolute; width: 55px; height: 55px; top: 380px; left: 116px; }
#dt3{ position: absolute; width: 45px; height: 65px; top: 470px; left: 730px; }
#dt4{ position: absolute; width: 60px; height: 60px; top: 470px; left: 826px; }
@keyframes rot { from { transform: rotate(10deg); } to { transform: rotate(-10deg); } }
</style>
<div id="papa">
<img id="dt1" src="https://pan.365.tf/uploads/lxx/20221025/mf.gif" alt="" />
<img id="dt2" src="https://pan.365.tf/uploads/lxx/20221025/hd.gif" alt="" />
<img id="dt3" src="https://pan.365.tf/uploads/lxx/20221025/mf.gif" alt="" />
<img id="dt4" src="https://pan.365.tf/uploads/lxx/20221025/hd.gif" alt="" />
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=16232697.mp3" autoplay></audio>
</div>
<script>
(function() {
(function(mkPlayer) {let defaults = {lrcAr: [],ypData: new Array(600).fill(0).map((v, k) => Math.floor(Math.random() * 200) + 10),player_css: 'bottom: 15px; left: 50%; transform: translate(-50%); ',playerCode: `<style>#mplayer { --color1: red; --color2: pink; --ww: 700; --hh: 80; position: absolute; cursor: pointer; }#lrc { --motion: cover2;--tt: 2s;--state: paused; --bg: linear-gradient(180deg, hsla(120, 88%, 50%,.55), hsla(120, 88%, 22%,.35)); position: absolute; top: 60px; font: bold 2.4em sans-serif; color: hsl(0, 10%, 90%); white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95)); } #lrc::before { position: absolute; content: attr(data-lrc); width: 20%;height: 100%; color: transparent; overflow: hidden; white-space: pre; background: var(--bg); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }@keyframes cover1 {from {width: 0;} to {width: 100%;}}@keyframes cover2 {from {width: 0;} to {width: 100%;}}</style><div id="lrc" data-lrc="HCPlayer">HCPlayer</div><canvas id="mplayer"></canvas>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;aud.loop = false;let mKey = 0, mFlag = true;let getCssVal = (e,v) => getComputedStyle(e).getPropertyValue(v);let ctx = mplayer.getContext('2d');let w = mplayer.width = getCssVal(mplayer,'--ww').replace(/[^0-9]/ig,''), h = mplayer.height = getCssVal(mplayer,'--hh').replace(/[^0-9]/ig,''), idx = 0;let slice = w / data.ypData.length, vmax = Math.max.apply(null, data.ypData);mplayer.onmousemove = (e) => { mplayer.title = e.offsetY < h * 0.8 ? toMin(aud.duration * e.offsetX / w) : '暂停/播放'; };mplayer.onclick = (e) => {if(e.offsetY < h * 0.8) {let ac = aud.duration * e.offsetX / w;idx = Math.round(data.ypData.length * ac / aud.duration);aud.currentTime = ac;} else {aud.paused ? aud.play() : aud.pause();}};aud.addEventListener('pause', () => mState());aud.addEventListener('playing', () => mState());aud.addEventListener('seeked', () => calcKey());aud.addEventListener('ended', () => { mKey = 0; aud.play(); });aud.addEventListener('timeupdate', () => {idx = Math.round(data.ypData.length * aud.currentTime / aud.duration);if(idx > data.ypData.length - 1) idx = data.ypData.length - 1;draw();for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});let draw = () => {ctx.clearRect(0,0,w,h);ctx.strokeStyle = getCssVal(mplayer,'--color1');ctx.fillStyle = getCssVal(mplayer,'--color2');ctx.font = '14px sans-serif';ctx.shadowOffsetX = ctx.shadowOffsetY = 1;ctx.shadowBlur = 2;ctx.shadowColor = '#555';ctx.textAlign = 'center';ctx.beginPath();for(j = 0; j <= idx; j ++) {ctx.lineTo(slice*j, h - data.ypData * h / vmax);}ctx.stroke();ctx.beginPath();ctx.strokeStyle = getCssVal(mplayer,'--color2');for(j = idx; j < data.ypData.length; j ++) {ctx.lineTo(slice*j, h - data.ypData * h / vmax);}ctx.stroke();ctx.fillText((aud.paused ? '播放 ' : '暂停 ') + toMin(aud.currentTime) + ' / ' + toMin(aud.duration), w/2, h*0.95);};let calcKey = () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.lrcAr);showLrc(time);};let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr;lrc.dataset.lrc = data.lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let mState = () => aud.paused ? lrc.style.setProperty('--state', 'paused') : lrc.style.setProperty('--state', 'running');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;};draw();};mkPlayer.HCPlayer = playCode;})(this);
let lrcAr = [,,,,,,];
ypData = ;
HCPlayer({
lrcAr: lrcAr,
ypData: ypData,
player_css: '--color1: Wheat; --color2: AliceBlue; bottom: 20px; ',
});
})();
</script> @马黑黑
黑黑套个封装的，效果不错，速度还快一点{:4_173:} 歌手：Kelly Clarkson
所属专辑：Because Of You
作曲 : Ben Moody/David hodges/Kelly Clarkson
I will not make the same mistakes that you did
我不会重复你犯过的错误
I will not let myself cause my heart so much misery
也不会让内心承受如此痛苦
I will not break the way you did,
我不会干涉你选择的方式
You fell so hard
你吃尽苦头
I' ve learned the hard way
我已尝到痛苦的滋味
so never let it get that far
所以我不会让自己一错再错
Because of you
因为你
I never stray too far from the sidewalk
人生的轨道我从不敢偏移半分
Because of you
因为你
I learned to play on the safe side so I don't get hurt
我学会站在安全的地方以免自己受到伤害
Because of you
因为你
I find it hard to trust not only me, but everyone around me
我发现很难去相信别人甚至连自己都怀疑
Because of you
因为你
I am afraid
我很害怕
I lose my way ，And it's not too long before you point it out
在你为我指明道路前不久，我迷失了方向
I cannot cry
我不能哭
Because I know that's weakness in your eyes
因为我知道，在你眼里这就是懦弱
I'm forced to fake a smile, a laugh everyday of my life
此后的每一天我被迫强颜欢笑
My heart can't possibly break
我的心已无法再破碎了
When it wasn't even whole to start with
因为它在最初之时就不再完整
Because of you
因为你
I never stray too far from the sidewalk
人生的轨道我从不敢偏移半分
Because of you
因为你
I learned to play on the safe side so I don't get hurt
我学会站在安全的地方以免自己受到伤害
Because of you
因为你
I find it hard to trust not only me, but everyone around me
我发现很难去相信别人甚至连自己都怀疑
Because of you
因为你
I am afraid
我如此害怕
I watched you die
我看着你日渐憔悴
I heard you cry every night in your sleep
每晚都听见你在睡梦中哭泣
I was so young
我太年轻了啊
You should have known better than to lean on me
你早应该明白不能依赖于我
You never thought of anyone else
你从来不考虑别人的感受
You just saw your pain
只知道自己的痛苦
And now I cry in the middle of the night for the same damn thing
如今我亦为这同样的事情在深夜哭泣
Because of you
因为你
I never stray too far from the sidewalk
人生的轨道我从不敢偏移半分
Because of you
因为你
I learned to play on the safe side so I don't get hurt
我学会站在安全的地方以免自己受到伤害
Because of you
因为你
I try my hardest just to forget everything
我尽我最大努力去忘掉一切
Because of you
因为你
I don't know how to let anyone else in
我从不知道与别人心有灵犀是什么感觉
Because of you
因为你
I'm ashamed of my life because it's empty
我的人生是一片可耻的虚无
Because of you
因为你
I am afraid
我如此害怕
Because of you
因为你
Because of you
只因为你
今天最好，一下子做了2个黑黑的音播效果，图图也是一个图图变化一下，省力 尝试一下效果，挺好的 以后可以做歌词同步，今天想速度一点，就不用了 亲爱的你太厉害了，改装一下又是一个，而且是黑黑最新的效果呢{:4_199:} 真是聪明。刚看到题目还以为是发重了{:4_173:} 红影 发表于 2022-12-17 21:52
亲爱的你太厉害了，改装一下又是一个，而且是黑黑最新的效果呢
这个还是弄图慢了，套用封装的快一点，歌词同步来不及做了 这个切成椭圆的也漂亮呢，真棒{:4_187:} 红影 发表于 2022-12-17 21:53
真是聪明。刚看到题目还以为是发重了
哈哈，同样的音乐 差不多的图图，所以很容易看错 红影 发表于 2022-12-17 21:57
这个切成椭圆的也漂亮呢，真棒
反正也是尝试一下的 这是精装的改良版，太有才了，给小辣椒送花花和掌声{:4_187:}{:4_199:} 好好欣赏下{:4_187:} 千羽 发表于 2022-12-17 22:01
这是精装的改良版，太有才了，给小辣椒送花花和掌声
千羽你也是可以的，只是没有尝试过 千羽 发表于 2022-12-17 22:02
好好欣赏下
千羽都差不多的，当心看错了{:4_170:} 小辣椒 发表于 2022-12-17 22:02
千羽你也是可以的，只是没有尝试过
不能尝试啊，俺不会{:5_156:} 千羽 发表于 2022-12-17 22:04
不能尝试啊，俺不会
哈哈，不会就轻松玩，现在你做的已经不错了 小辣椒 发表于 2022-12-17 22:04
千羽都差不多的，当心看错了
哈哈，咱俩之间差的太多了，我做完就发图，反正不会{:6_239:} 小辣椒 发表于 2022-12-17 22:06
哈哈，不会就轻松玩，现在你做的已经不错了
谢小辣椒鼓励哈，俺只是换了图片和音乐，很快完成{:4_173:}
页:
[1]
2