Kang YiKai

Blog

· 1 min read

Brown Noise Player (2026.01.26)

I really enjoy listening to noise because it helps me feel calm and focused. I have a particular fondness for brown noise and decided to create a player for it within my own digital space.

The project is now complete and you can click the play button at the top of the page to listen. Please rest assured that the sound is very gentle and it will not startle you or disturb your environment.

Regarding the implementation I initially considered using audio files but they were too large and would occupy significant storage space. Because of this I chose to generate the noise using JavaScript functions instead.

The general principle is to first generate random white noise and I used a dual channel design for this purpose.

for (let i = 0; i < bufferSize; i++) {
  // Fill the left and right channels with independent random numbers
  // This utilizes binaural decorrelation to make the sound feel incredibly wide instead of being focused in the center of the head
  leftChannel[i] = Math.random() * 2 - 1;
  rightChannel[i] = Math.random() * 2 - 1;
}

Brown noise is characterized by its rich low frequencies so I applied a Lowpass Filter to remove the high frequency components. This approach simulates the auditory experience even though it is not a mathematically perfect brown noise where the power density decreases by .

const filter = state.ctx.createBiquadFilter();
filter.type = "lowpass";
filter.frequency.value = 220; // Maintain a deep feeling at 220Hz

To prevent any sudden clicking sounds I implemented a linear ramp to create a smooth fade in effect.

state.gainNode.gain.setValueAtTime(0, state.ctx.currentTime);
state.gainNode.gain.linearRampToValueAtTime(0.3, state.ctx.currentTime + 0.8);

MDX (2025.01.14)

I wanted to provide more flexible and expressive formatting options for articles, so I added support for the mdx format.

💡 Why MDX?

MDX allows me to embed React or Astro components directly within articles. I can showcase interactive charts and live code demos, rather than just dry code blocks.

I will have the opportunity to showcase more content, similar to:

ℹ️ New Content

Instead of

<Callout type="info" title="New Content" />

Thank you for reading! Your support is appreciated.

If you enjoyed this, consider buying me a coffee. ☕️