音频可视化测试三:html频谱

马黑黑

马黑黑

代码：

1. <style>
   
2. #papa { margin: auto; width: 760px; height: 540px; background: gray; box-shadow: 6px 3px 20px #000; position: relative; display: grid; place-items: end center;}
   
3. #mplayer {
   
4.         position: absolute;
   
5.         width: 100%;
   
6.         height: 160px;
   
7.         bottom: 0;
   
8.         display: flex;
   
9.         place-items: end;
   
10. }
    
11. .mLine {
    
12.         display: inline-block;
    
13.         margin: 0 2px 0 0;
    
14.         width: 4px;
    
15.         height: 10px;
    
16.         background: gray linear-gradient(to top,darkgreen,green,lightgreen);
    
17. }
    
18. </style>
    
19. 
    
20. <div id="papa">
    
21.         <div id="mplayer"></div>
    
22.         <audio id="aud" src="https://aimg8.dlssyht.cn/u/0/ueditor/file/0/0/1669801666294517.mp3" loop autoplay crossorigin="anonymous"></audio>
    
23. </div>
    
24. 
    
25. <script>
    
26. (function() {
    
27.         let total = Math.ceil(mplayer.offsetWidth / 6);
    
28.         for(j=0; j<total; j++) {
    
29.                 let el = document.createElement('span');
    
30.                 el.className = 'mLine';
    
31.                 mplayer.appendChild(el);
    
32.         }
    
33.         let lines = document.querySelectorAll('.mLine');
    
34.         let context = new AudioContext;
    
35.         let source = context.createMediaElementSource(aud);
    
36.         let analyser = context.createAnalyser();
    
37.         source.connect(analyser);
    
38.         analyser.connect(context.destination);
    
39.         let output = new Uint8Array(total);
    
40.         (function update() {
    
41.                 analyser.getByteFrequencyData(output);
    
42.                 let mid = total % 2 === 0 ? total / 2 - 1 : Math.floor(total / 2);
    
43.                 for(j = 0; j < total ; j++) {
    
44.                         let k = j <= mid ? (mid - j) * 2 : (j - mid) * 2 - 1;
    
45.                         lines[j].style.height = output[k]/2 + 'px';
    
46.                 }
    
47.                 window.requestAnimationFrame(update);
    
48.         })();
    
49.         mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
    
50. })();
    
51. </script>

复制代码

马黑黑

频谱颜色修改：16行
频谱播放器宽度：05行

另外，会设置的话，可以弄成上下的频谱，大约就是模拟倒影的样子。例如，第16行改为：

        background: gray linear-gradient(to top,green,darkgreen,lightgreen);

当然，如果使用 hsla 设置线性渐变，效果更佳：第一个颜色和第三个颜色相同，但第三个透明度高一些。

小辣椒

这个频谱更加漂亮了

马黑黑

如需要修改频谱图条的尺寸，必须结合 .mLine 盒子的 margin 值，修改JS的一个算式，27行：

        let total = Math.ceil(mplayer.offsetWidth / 6);

这个算式，6 的由来是线条的宽度 4 加 margin: 0 2px 0 0; 里的 2

当线条细到一个像素，外观也是很漂亮的，可以试试

马黑黑

小辣椒 发表于 2022-12-6 21:30
这个频谱更加漂亮了

可以不要那么宽，用百分比或像素值：

#mplayer {
        position: absolute;
        width: 100%;
        height: 160px;
        bottom: 0;
        display: flex;
        place-items: end;
}

红色的那句，可以是这样：

        width: 300px;

小辣椒

马黑黑 发表于 2022-12-6 21:34
可以不要那么宽，用百分比或像素值：

#mplayer {

好的，就是电脑不能预览效果

马黑黑

小辣椒 发表于 2022-12-6 21:40
好的，就是电脑不能预览效果

你需要安装或配置虚拟服务

马黑黑

忘了说修改频谱高度了。第 45 行：

        lines[j].style.height = output[k]/2 + 'px';

output数组是音频“高度”信息数组，它的数值可能会很大，需要出去某个数。修改此值，应相应修改 #mplayer 的高度

红影

这个排版更容易看了。好漂亮的频谱

马黑黑

红影 发表于 2022-12-6 22:11
这个排版更容易看了。好漂亮的频谱

可以进一步修饰额，我这个只是大概的。大致的修饰，都是基于CSS的就好

红影

奇怪，改线宽为1后，感觉颜色都变了呢。

红影

马黑黑 发表于 2022-12-6 21:31
如需要修改频谱图条的尺寸，必须结合 .mLine 盒子的 margin 值，修改JS的一个算式，27行：

        let total = ...

试过了，的确很漂亮

马黑黑

红影 发表于 2022-12-6 22:21
试过了，的确很漂亮

你本地可以运行吗

马黑黑

红影 发表于 2022-12-6 22:18
奇怪，改线宽为1后，感觉颜色都变了呢。

对的

红影

马黑黑 发表于 2022-12-6 22:17
可以进一步修饰额，我这个只是大概的。大致的修饰，都是基于CSS的就好

黑黑厉害

红影

马黑黑 发表于 2022-12-6 22:30
你本地可以运行吗

是啊，我修改和观看都是本地运行的啊。

红影

马黑黑 发表于 2022-12-6 22:30
对的

是受底色影响更大了吧。

朵拉

是王晰迷人的低音么？听一会

朵拉

马师 音乐外链已解决，我问的是图片代码？
您都没有仔细看学生的问题，委屈~~