论坛 › 马黑黑教程专版 › 音频可视化测试三:html频谱

马黑黑 发表于 2022-12-6 21:18

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

本帖最后由 马黑黑 于 2022-12-8 22:06 编辑 <br /><br /><style>
#papa { margin: auto; width: 760px; height: 540px; background: gray; box-shadow: 6px 3px 20px #000; position: relative; display: grid; place-items: end center;}
#mplayer {
        position: absolute;
        width: 100%;
        height: 160px;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: flex-end;
}
.mLine {
        display: inline-block;
        margin: 0 2px 0 0;
        width: 4px;
        height: 10px;
        background: gray linear-gradient(to top,darkgreen,green,lightgreen);
}
</style>

<div id="papa">
        <div id="mplayer"></div>
        <audio id="aud" src="https://aimg8.dlssyht.cn/u/0/ueditor/file/0/0/1669801666294517.mp3" loop autoplay crossorigin="anonymous"></audio>
</div>

<script>
(function() {
        let total = Math.ceil(mplayer.offsetWidth / 6);
        for(j=0; j<total; j++) {
                let el = document.createElement('span');
                el.className = 'mLine';
                mplayer.appendChild(el);
        }
        let lines = document.querySelectorAll('.mLine');
        let context = new AudioContext;
        let source = context.createMediaElementSource(aud);
        let analyser = context.createAnalyser();
        source.connect(analyser);
        analyser.connect(context.destination);
        let output = new Uint8Array(total);
        (function update() {
                analyser.getByteFrequencyData(output);
                let mid = total % 2 === 0 ? total / 2 - 1 : Math.floor(total / 2);
                for(j = 0; j < total ; j++) {
                        let k = j <= mid ? (mid - j) * 2 : (j - mid) * 2 - 1;
                        lines.style.height = output/2 + 'px';
                }
                window.requestAnimationFrame(update);
        })();
        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

马黑黑 发表于 2022-12-6 21:19

代码：
<style>
#papa { margin: auto; width: 760px; height: 540px; background: gray; box-shadow: 6px 3px 20px #000; position: relative; display: grid; place-items: end center;}
#mplayer {
        position: absolute;
        width: 100%;
        height: 160px;
        bottom: 0;
        display: flex;
        place-items: end;
}
.mLine {
        display: inline-block;
        margin: 0 2px 0 0;
        width: 4px;
        height: 10px;
        background: gray linear-gradient(to top,darkgreen,green,lightgreen);
}
</style>

<div id="papa">
        <div id="mplayer"></div>
        <audio id="aud" src="https://aimg8.dlssyht.cn/u/0/ueditor/file/0/0/1669801666294517.mp3" loop autoplay crossorigin="anonymous"></audio>
</div>

<script>
(function() {
        let total = Math.ceil(mplayer.offsetWidth / 6);
        for(j=0; j<total; j++) {
                let el = document.createElement('span');
                el.className = 'mLine';
                mplayer.appendChild(el);
        }
        let lines = document.querySelectorAll('.mLine');
        let context = new AudioContext;
        let source = context.createMediaElementSource(aud);
        let analyser = context.createAnalyser();
        source.connect(analyser);
        analyser.connect(context.destination);
        let output = new Uint8Array(total);
        (function update() {
                analyser.getByteFrequencyData(output);
                let mid = total % 2 === 0 ? total / 2 - 1 : Math.floor(total / 2);
                for(j = 0; j < total ; j++) {
                        let k = j <= mid ? (mid - j) * 2 : (j - mid) * 2 - 1;
                        lines.style.height = output/2 + 'px';
                }
                window.requestAnimationFrame(update);
        })();
        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

马黑黑 发表于 2022-12-6 21:23

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

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

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

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

小辣椒 发表于 2022-12-6 21:30

这个频谱更加漂亮了{:4_199:}

马黑黑 发表于 2022-12-6 21:31

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

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

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

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

马黑黑 发表于 2022-12-6 21:34

小辣椒 发表于 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:40

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

#mplayer {


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

马黑黑 发表于 2022-12-6 22:02

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

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

马黑黑 发表于 2022-12-6 22:06

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

        lines.style.height = output/2 + 'px';

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

红影 发表于 2022-12-6 22:11

这个排版更容易看了。好漂亮的频谱{:4_199:}

马黑黑 发表于 2022-12-6 22:17

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

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

红影 发表于 2022-12-6 22:18

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

红影 发表于 2022-12-6 22:21

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

        let total = ...

试过了，的确很漂亮{:4_199:}

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

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

你本地可以运行吗

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

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

对的

红影 发表于 2022-12-6 22:53

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

黑黑厉害{:4_187:}

红影 发表于 2022-12-6 22:54

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

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

红影 发表于 2022-12-6 22:54

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

是受底色影响更大了吧。

朵拉 发表于 2022-12-6 23:06

是王晰迷人的低音么？听一会{:4_190:}

朵拉 发表于 2022-12-6 23:12

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

查看完整版本: 音频可视化测试三:html频谱