我把浏览器设置为不自动播放媒体，默认也是如此。这样，只能空看一个封面了。播放按钮的交互或许还是应该有的：
在 js 代码的最后一行加入一行：
change();
另外，根据封面，左边是水，频谱有倒影，可以考虑将播放示意频谱放在靠左的地方。 水芙蓉制作得真漂亮。{:4_171:} 醉美水芙蓉 发表于 2022-8-22 22:54
还有很多不足呢？
不急的，我也在学习呢。 醉美水芙蓉 发表于 2022-8-22 22:53
我找了半天没有找到频谱的代码移动位置，频谱如何加粗？还有黑黑老师这个播放器怎样可以加入老师的歌词同 ...
频谱的大小，有两种方式可以改变，都在JS里操作：一是改变画布的宽高为更大，二是改变频谱线条总数。
要加入歌词同步，请加入一个显示歌词的元素，并在监听 timeupdate 事件中加入处理歌词的代码，可参照歌词同步模板改造。 醉美水芙蓉 发表于 2022-8-22 22:53
我找了半天没有找到频谱的代码移动位置，频谱如何加粗？还有黑黑老师这个播放器怎样可以加入老师的歌词同 ...
另外，要改变频谱位置，实际上就是改变画布位置，请在CSS里操作。 水芙蓉也学会了，真棒。帖子做得真漂亮{:4_187:} 醉美水芙蓉 发表于 2022-8-23 11:26
虽然我还没有完全领悟，但还是要谢谢黑黑老师如此耐心的指导！论坛有你更精彩！
歌词同步方面我们之前有过教程分享的
醉美水芙蓉 发表于 2022-8-23 22:23
加了啥都没有了？失败了！这就是不懂代码的苦恼！
你去参考一下我再音乐沙龙最新的帖子 醉美水芙蓉 发表于 2022-8-23 22:21
组合代码不当，修改如下：
<style>
#papa { left: -214px; width: 1024px; height: 640px; display: grid; place-items: center; background: teal url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/657cfb6f72d2834fa31113c80363dfb7.mp4.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 3; }
#canv { position: absolute; bottom: 30px; cursor: pointer; box-reflect: below 0 linear-gradient(transparent, transparent 50%, rgba(255,255,255,.3)); -webkit-box-reflect: below 0 linear-gradient(transparent, transparent 50%, rgba(255,255,255,.3)); }
#lrcbox { position: absolute; left: 400px; top: 480px; font: bold 30px / 40px sans-serif; color: darkgreen; text-shadow: 1px 1px 2px #000, 10px 10px 10px rgba(0, 0, 0, .35); user-select: none; }
</style>
<div id="papa">
<canvas id="canv"></canvas>
<span id="lrcbox">踏人间(DJ沈念版)</span>
</div>
<script>
let ctx = canv.getContext('2d'),
w = canv.width =450,
h = canv.height = 100,
lines = [],
total = 80,
lineWidth = (w - 2 * total) / total,
aud = new Audio();
let lrcAr = [
['0.00','裂天 - 踏人间 (DJ沈念版)'],
['0.64','词：孙英男'],
['0.96','曲：康兵辉'],
['1.28','OP：昌禾文化'],
['3.28','LRC编辑：醉美水芙蓉'],
['5.76','曾经故人不见应距长安远'],
['6.33','再回首时青山亦难见'],
['10.05','唯见青山不见君'],
['12.94','殚尽红颜如神明'],
['15.91','我欲踏遍人间繁华皆过眼'],
['19.87','快意江湖一笑泯恩怨'],
['23.66','我欲翩翩少年斟酒斗十千'],
['27.82','笙歌妙舞满堂俱欢颜'],
['31.72','我曾踏过人间过往梦如烟'],
['35.78','酒醒花残一朝战火喧'],
['39.72','我曾忘却尘缘似来鸿去燕'],
['43.69','一身轻骨何惧再拔剑'],
['64.37','乱世烽火狼烟塞外黄沙天'],
['68.37','炉上煨酒欲把旧柴添'],
['71.85','月下怅然无言孤衾枕难眠'],
['76.32','奈何岁月已是白头现'],
['80.14','又遇大雪寒年风霜忆旧年'],
['84.29','一杯浊酒化思绪万千'],
['87.84','曾经故人不见应距长安远'],
['92.21','再回首时青山亦难见'],
['95.87','我欲踏遍人间繁华皆过眼'],
['99.92','快意江湖一笑泯恩怨'],
['103.61','我欲翩翩少年斟酒斗十千'],
['107.70','笙歌妙舞满堂俱欢颜'],
['111.71','我曾踏过人间过往梦如烟'],
['115.73','酒醒花残一朝战火喧'],
['119.70','我曾忘却尘缘似来鸿去燕'],
['123.75','一身轻骨何惧再拔剑'],
['144.17','又遇大雪寒年风霜忆旧年'],
['148.28','一杯浊酒化思绪万千'],
['151.77','曾经故人不见应距长安远'],
['156.08','再回首时青山亦难见'],
['159.57','我欲踏遍人间繁华已过眼'],
['163.72','快意江湖一笑泯恩怨'],
['167.61','我欲翩翩少年斟酒斗十千'],
['171.70','笙歌妙舞满堂俱欢颜'],
['175.68','我曾踏过人间过往梦如烟'],
['179.71','酒醒花残一朝战火喧'],
['183.63','我曾忘却尘缘似来鸿去燕'],
['187.84','一身轻骨何惧再拔剑'],
['205.28','谢谢欣赏！']
];
aud.src = 'https://www.qqmc.com/up/kwlink.php?id=223220254&.mp3';
aud.loop = true;
aud.autoplay = true;
aud.addEventListener('timeupdate', () => {
change();
for(j=0; j<lrcAr.length; j++){
if(aud.currentTime >= lrcAr) lrcbox.innerHTML = lrcAr;
}
});
canv.onclick = () => aud.paused ? aud.play() : aud.pause();
function Line(x1,y1,x2,y2) {
this.x1 = x1;
this.y1 = y1;
this.x2 = x2;
this.y2 = y2;
lines.push(this);
}
Line.prototype.draw = function() {
ctx.beginPath();
ctx.strokeStyle = this.color;
ctx.lineWidth = lineWidth;
ctx.moveTo(this.x1, this.y1);
ctx.lineTo(this.x2,this.y2);
ctx.stroke();
}
for(let j = 0; j < total; j ++) {
let line = new Line();
line.x1 = j * lineWidth + j*2 + lineWidth / 2 + 1;
line.y1 = h;
line.x2 = line.x1;
line.y2 = 60;
line.color = 'purple';
line.draw();
}
function change() {
ctx.clearRect(0,0,w,h);
for(let item of lines) {
item.color = '#' + Math.random().toString(16).substr(-6);
item.y2 = h - (Math.random() * h);
item.draw();
}
}
change();
</script>
页:
[1]