|
|

楼主 |
发表于 2022-12-4 17:45
|
显示全部楼层
代码
- <style>
- #papa { margin: auto; position: relative; width: 96%; height: 520px; box-shadow: 8px 4px 32px 0 hsla( 0,0%,0%,.72); user-select: none; }
- #tit { position: absolute; left: 0; top: 0; padding: 10px 16px; font: bold 2em sans-serif; color: lightgreen; text-shadow: 1px 2px 4px #000; transition: color .5s; }
- #tit:hover { color: green; }
- </style>
- <div id="papa">
- <span id="tit">心如止水</span>
- </div>
- <audio id="aud" src="https://aimg8.dlssyht.cn/u/0/ueditor/file/0/0/1668786727519986.mp3" autoplay loop crossorigin="anonymous"></audio>
- <script>
- (function() {
- (function(mkPlayer) {let defaults = { player_css: 'left: calc(50% - 100px); bottom: 0;',playerCode: '<canvas id="mplayer" height="200" width="200" style="position: absolute; cursor: pointer;"></canvas>',};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;let ballSize = data.size;mplayer.style.cssText += data.player_css;let context = new AudioContext;let source = context.createMediaElementSource(aud);let analyser = context.createAnalyser();source.connect(analyser);analyser.connect(context.destination);let output = new Uint8Array(361);let length = analyser.frequencyBinCount * 44100 / context.sampleRate | 0;let output2 = new Uint8Array(length);let cxt = mplayer.getContext("2d");(function draw() {let ppColor = cxt.createLinearGradient(0,0,mplayer.width-100,mplayer.height);ppColor.addColorStop(0, 'hsl(180,100%,50%)');ppColor.addColorStop(0.8, 'hsl(120,100%,45%)');ppColor.addColorStop(1, 'hsl(60,90%,35%)');analyser.getByteFrequencyData(output);cxt.clearRect(0, 0, mplayer.width, mplayer.height);for (j = 0; j < output.length; j++) {let value = output[j] / 10;cxt.strokeStyle = value > 20 ? "darkgreen" : "green";cxt.beginPath();cxt.lineWidth = 1;cxt.moveTo(100, 100);cxt.lineTo(Math.cos((j * 0.5 + 90) / 180 * Math.PI) * (60 + value) + 100, (- Math.sin((j * 0.5 + 90) / 180 * Math.PI) * (60 + value) + 100));cxt.stroke();cxt.beginPath();cxt.lineWidth = 1;cxt.moveTo(100, 100);cxt.lineTo((Math.sin((j * 0.5) / 180 * Math.PI) * (60 + value) + 100), -Math.cos((j * 0.5) / 180 * Math.PI) * (60 + value) + 100);cxt.stroke();}cxt.beginPath();cxt.lineWidth = 1;cxt.arc(100, 100, 60, 0, 2 * Math.PI, false);cxt.fillStyle = ppColor;cxt.stroke();cxt.fill();analyser.getByteTimeDomainData(output2);let height = 100, width = 120;cxt.beginPath();cxt.strokeStyle = "green";for (j = 0; j < width; j++) {cxt.lineTo(j + 40, 100 - (height / 2 * (output2[output2.length * j / width | 0] / 256 - 0.5)));}cxt.stroke();requestAnimationFrame(draw);})();mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();};mkPlayer.HCPlayer = playCode;})(this);
- HCPlayer({});
- })();
- </script>
复制代码
|
|