Kelly Clarkson - Because Of You（学习黑黑示波图效果-1）
<style>#papa { margin: 100px 0 0 calc(50% - 790px); width: 1400px; height: 800px; background: gray url('https://yinhua.ru/20221214/h1.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; position: relative; z-index: 1; overflow: hidden; }
#mplayer { position: absolute; top: 40px; cursor: pointer; }
#bb { position: absolute; left: 780px; top:700px; width: 200px; height: 271px; background: url('https://yinhua.ru/20221214/xtu.png'); cursor: pointer; opacity: .85; transition: .25s; }
@keyframes circle { from { transform: rotate(0) translate(60px); } to { transform: rotate(360deg) translate(60px); } }
@keyframes sh{ to { transform: translateX(-1773px); } }
</style>
<div id="papa">
<canvas id="mplayer"></canvas>
<span id="bb"></span>
<audio id="aud" src="https://yinhua.ru/20221214/Because Of You-Kelly Clarkson.mp3" autoplay></audio>
</div>
<script>
let stepX = 1, stepY = 1, moveX= 0, moveY = 0;
(function() {
ypData = ;
let total = 50,idx = 0;
let ctx = mplayer.getContext('2d');
let w = mplayer.width = 800, h = mplayer.height = 80;
let slice = w / ypData.length, vmax = Math.max.apply(null, ypData);
let colors = ['Wheat','AliceBlue'];
aud.loop = false;
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(ypData.length * ac / aud.duration);
aud.currentTime = ac;
} else {
aud.paused ? aud.play() : aud.pause();
}
}
aud.addEventListener('ended', () => { idx = 0; aud.play(); });
aud.addEventListener('timeupdate', () => {
idx = Math.round(ypData.length * aud.currentTime / aud.duration)
if(idx > ypData.length - 1) idx = ypData.length - 1;
draw();
});
let draw = () => {
ctx.clearRect(0,0,w,h);
ctx.strokeStyle = colors;
ctx.fillStyle = colors;
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 - ypData * h / vmax);
}
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = colors;
for(j = idx + 1; j < ypData.length; j ++) {
ctx.lineTo(slice*j, h - ypData * h / vmax);
}
ctx.stroke();
ctx.fillText((aud.paused ? '播放 ' : '暂停 ') + toMin(aud.currentTime) + ' / ' + toMin(aud.duration), w/2, h*0.95);
bb.style.top = 'calc(80% - ' + ypData + 'px)';
};
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();
})();
</script>
歌手：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
只因为你
@红影
亲爱的，学习了你一个图片跳动，第二个音乐链接没有用{:4_189:} @马黑黑
黑黑，图图做不好，本来是准备做个油画的背景，后来赶时间就瞎捣鼓了一个{:4_170:}
这个频谱的进度条非常漂亮，就是我的这个音乐感觉出来前面都是平音，以后用动感试一下
小辣椒 发表于 2022-12-17 21:22
@马黑黑
黑黑，图图做不好，本来是准备做个油画的背景，后来赶时间就瞎捣鼓了一个
这个频谱的 ...
如果获取的声音信息不好，可以考虑用默认的，就是不设置 ypData 参数 如果使用默认的声音示波设定，请使用最新封装的插件，已发布在插件总汇里 {:4_208:} 马黑黑 发表于 2022-12-17 21:29
如果获取的声音信息不好，可以考虑用默认的，就是不设置 ypData 参数
发现这个音播挺好，按钮位置清晰{:4_173:} 小辣椒 发表于 2022-12-17 21:20
@红影
亲爱的，学习了你一个图片跳动，第二个音乐链接没有用
都是黑黑的代码啊，我也是套用的{:4_173:} 马黑黑 发表于 2022-12-17 21:30
如果使用默认的声音示波设定，请使用最新封装的插件，已发布在插件总汇里
刚才试了一下，发现这个音播高低刚好，打开 停止按钮清晰 山人 发表于 2022-12-17 21:41
{:4_208:}{:4_208:} 这个示波图非常奇特，正好把时间位置让出来了，而且用花盆来跳动的构思也很奇特，那美女仿佛在看那跳动的花儿，看它跳得是不是合规率{:4_173:}{:4_187:} 忽然想到第二首歌还是可以加的，就加相同的歌曲，这样点花盆的时候，就是从头播放，也很不错的呢{:4_173:} 这示波太奇特的了，想特地去找都不一定找得到呢{:4_173:} 红影 发表于 2022-12-17 21:48
这个示波图非常奇特，正好把时间位置让出来了，而且用花盆来跳动的构思也很奇特，那美女仿佛在看那跳动的花 ...
哈哈~~这个花盆我是网上特意安这个美女低头效果去找的 红影 发表于 2022-12-17 21:49
忽然想到第二首歌还是可以加的，就加相同的歌曲，这样点花盆的时候，就是从头播放，也很不错的呢
估计没有人会听第二遍的{:4_189:} 一幅图可以换着样玩，小辣椒好棒啊。羡慕中……{:4_203:} 都挺漂亮的，继续欣赏{:4_203:} 小辣椒 发表于 2022-12-17 21:46
刚才试了一下，发现这个音播高低刚好，打开 停止按钮清晰
各占各的位子了 千羽 发表于 2022-12-17 22:16
一幅图可以换着样玩，小辣椒好棒啊。羡慕中……
主要我不会作图
页:
[1]
2