# Fake audio spectrum, using perlin noise

DevFeed: [Fake audio spectrum, using perlin noise](<https://devfeed.tech/articles/fake-audio-spectrum-using-perlin-noise-37267.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/fake-audio-spectrum-using-perlin-noise/>)

Author: Stanko

Published: 2019-02-09T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Algorithm](<https://devfeed.tech/topics/algorithm.md>), [CSS](<https://devfeed.tech/topics/css.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [algorithm](<https://devfeed.tech/tags/algorithm.md>), [code](<https://devfeed.tech/tags/code.md>), [css](<https://devfeed.tech/tags/css.md>), [flexbox](<https://devfeed.tech/tags/flexbox.md>), [javascript](<https://devfeed.tech/tags/javascript.md>)

## AI overview

This tutorial explains how to create a fake audio spectrum that mimics human speech using JavaScript and Perlin noise. The author combines manually tuned values with random and static data, then animates the result with CSS transforms and flexbox. The demo remains a proof of concept and may feel somewhat smooth or unnatural.

## Source excerpt

Few days ago, I was chatting with our design team, and we were wondering how hard would be to create a fake audio spectrum (that mimics human speech) and visualize it. I immediately said it should be easy, and that I will play with it over the weekend. Of course, I didn't wait for the weekend, but wrote it the same evening. It was fairly straightforward, but it had few gotchas. Result # Before you start playing with the checkboxes I advise you to read the rest of this post. Use random value Use static sample Use perlin noise value Implementation # My initial idea was to analyze couple of audio files to extract the average valuesTry disabling all checkboxes but "static". for the spectrum. Then combine it with the data from this great post about language pitch. At the end, I ended up tweaking values to make it "look better", based only on my personal feel. Only thing left was to multiple the values I got with the randomly generated value.Enable "random" and "static" checkboxes and disable the "perlin" one to see how it looks. It kinda works, but it feel too random. Perlin noise # But before I started, I asked my colleagues for ideas, and I got some great feedback. One of the suggestions was to use Perlin noise. I've never heard of it, so I did some reading. Perlin Noise is a technique used to produce natural appearing textures on computer generated surfaces for motion picture visual effects. Ken Perlin was frustrated by machine-like look of computer graphics at the time, and created a gradient noise algorithm. It is basically a pseudo-random generator which outputs more nature like patternsDisable. That seemed like a great way to improve my random only solution. There are multiple JavaScript implementations, but I ended using this one as it was really simple and I didn't need 2D or 3D noise. Putting everything together # Now when I had everything I needed, it was easy to write the actual code. Working demo was done really quickly. Then I started playing with values an