|
|

楼主 |
发表于 2022-8-22 07:07
|
显示全部楼层
本帖是canvas画布频谱播放器的试用,代码如下(全):
- <style>
- #papa { left: -214px; /*margin: auto;*/ width: 1024px; height: 640px; display: grid; place-items: center; background: teal url('https://638183.freep.cn/638183/t22/hl/vv.webp') 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: 15px; top: 10px; 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">盛夏荷塘</span>
- </div>
- <script>
- let ctx = canv.getContext('2d'),
- w = canv.width = 80,
- h = canv.height = 60,
- lines = [],
- total = 20,
- lineWidth = (w - 2 * total) / total,
- aud = new Audio();
- aud.src = 'https://music.163.com/song/media/outer/url?id=490949412.mp3';
- aud.loop = true;
- aud.autoplay = true;
- aud.addEventListener('timeupdate', change);
- 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();
- }
- }
- </script>
复制代码
|
|