马黑黑 发表于 2022-12-4 17:41

测试：音频可视化（续）

本帖最后由 马黑黑 于 2022-12-4 17:44 编辑 <br /><br /><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 / 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 / 256 - 0.5)));}cxt.stroke();requestAnimationFrame(draw);})();mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();};mkPlayer.HCPlayer = playCode;})(this);
        HCPlayer({});
})();
</script>

马黑黑 发表于 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 / 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 / 256 - 0.5)));}cxt.stroke();requestAnimationFrame(draw);})();mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();};mkPlayer.HCPlayer = playCode;})(this);
        HCPlayer({});
})();
</script>

红影 发表于 2022-12-4 18:05

哇，这个漂亮。开饭了，等吃完来学习{:4_187:}

醉美水芙蓉 发表于 2022-12-4 18:51

红影 发表于 2022-12-4 18:58

这次记得鼠标去划拉一下，嗯，字体颜色变了{:4_173:}

红影 发表于 2022-12-4 19:05

仔细看了，没看懂。里面有好多数学公式，什么正玄余弦的，不知道派什么用途的{:4_173:}

红影 发表于 2022-12-4 19:05

外围的短线太密了，如果稀疏点是不是更好？

马黑黑 发表于 2022-12-4 19:10

红影 发表于 2022-12-4 19:05
外围的短线太密了，如果稀疏点是不是更好？

试过，太细的话，像中年男子{:4_170:}

马黑黑 发表于 2022-12-4 19:44

红影 发表于 2022-12-4 19:05
仔细看了，没看懂。里面有好多数学公式，什么正玄余弦的，不知道派什么用途的

画线用的，需要角度，很多线按一定角度排列起来，就形成了环圈外环的变幻；“心电图”样式的波状动态图也用到正弦余弦函数。

红影 发表于 2022-12-4 19:59

马黑黑 发表于 2022-12-4 19:10
试过，太细的话，像中年男子

哈哈，这比喻，看得笑喷{:4_189:}

红影 发表于 2022-12-4 20:00

马黑黑 发表于 2022-12-4 19:44
画线用的，需要角度，很多线按一定角度排列起来，就形成了环圈外环的变幻；“心电图”样式的波状动态图也 ...

嗯嗯，那心电图的形状特别好看{:4_187:}

马黑黑 发表于 2022-12-4 20:43

红影 发表于 2022-12-4 20:00
嗯嗯，那心电图的形状特别好看

波状示意图挺好的

马黑黑 发表于 2022-12-4 20:45

红影 发表于 2022-12-4 19:59
哈哈，这比喻，看得笑喷

需要疏一点的话，在第一个 for 语句里加个条件：

for(....) {
    if(j % 2 === 0) {
      /* 原来的完整代码
    }
}

如果觉得还太紧密，2 改为 3

小辣椒 发表于 2022-12-4 21:04

黑黑这个是新产品{:4_178:}

小辣椒 发表于 2022-12-4 21:05

昨天那个我小圆球修改了尺寸，但看见这个我又想做这个了。。。。{:4_170:}

马黑黑 发表于 2022-12-4 21:05

小辣椒 发表于 2022-12-4 21:04
黑黑这个是新产品

晚上好

马黑黑 发表于 2022-12-4 21:06

小辣椒 发表于 2022-12-4 21:05
昨天那个我小圆球修改了尺寸，但看见这个我又想做这个了。。。。

见异思迁{:4_173:}

小辣椒 发表于 2022-12-4 21:06

这个频谱好漂亮的，小巧精致，我要做个合适的图图

马黑黑 发表于 2022-12-4 21:12

小辣椒 发表于 2022-12-4 21:06
这个频谱好漂亮的，小巧精致，我要做个合适的图图

支持

红影 发表于 2022-12-4 22:14

马黑黑 发表于 2022-12-4 20:43
波状示意图挺好的

是的，特别好看。
页: [1] 2 3 4 5 6 7 8 9 10
查看完整版本: 测试：音频可视化（续）