Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/mr-sunset/zen/llms.txt

Use this file to discover all available pages before exploring further.

Zen plays a looping black noise track the moment you enter the scene. It operates in two modes: a silent auto-play mode where audio runs in the background with no visible interface, and a controls mode where the browser’s native audio bar appears so you can adjust volume, pause, or seek. Which mode you get depends entirely on a single checkbox on the welcome screen.

​
Enabling controls

To reveal the native audio bar, check the Controls checkbox on the welcome screen before clicking Enter Zen. You can do this at any time — just reload the page to return to the welcome screen.
1

Open the welcome screen

Navigate to https://mr-sunset.github.io/zen. The welcome card will be displayed over the island background.
2

Check the Controls checkbox

Click the checkbox labelled Controls. A checkmark will appear and the underlying <audio> element’s controls attribute will be enabled immediately.
3

Enter the scene

Click Enter Zen. The audio bar will be visible at the top of the viewport once the welcome screen fades out.
Under the hood, the checkbox wires directly to the audio element through a single event listener in script.js: 
wControlToggle.addEventListener('change', (event) => {
    blackNoise.controls = event.target.checked;
})
When the checkbox is checked, event.target.checked is true, so blackNoise.controls is set to true, which adds the controls attribute to the <audio> element and renders the native browser UI. Unchecking it removes the bar again.

​
What the controls provide

When controls are enabled, the browser renders its standard <audio controls> interface. While the exact appearance varies by browser and operating system, every modern browser provides at minimum:
  • Play / Pause toggle — start and stop the black noise track at will.
  • Seek bar — scrub to any position in the audio file. Because the track is set to loop, reaching the end simply begins the file again.
  • Volume slider — adjust the playback level independently of your system volume, which is especially useful for blending Zen into a multi-app workspace.
The <audio> element itself is absolutely positioned at the top of the viewport (top: 20px) and constrained to 300px wide (capped at 90vw on narrow screens), so it sits unobtrusively above the island scene.
The audio bar always uses a light color-scheme in light mode and a dark color-scheme in dark mode (color-scheme: light / color-scheme: dark is set directly on #black-noise in the CSS). This keeps the bar legible regardless of the OS theme.

​
Autoplay behavior

The <audio> element in index.html is declared with both the autoplay and loop attributes: 
<audio src="assets/black-noise.ogg" id="black-noise" autoplay loop></audio>
On most desktop browsers this means the track starts playing automatically as soon as the page loads — no interaction required. The loop attribute ensures it restarts seamlessly when it reaches the end, so the ambient sound never breaks. Mobile browsers (iOS Safari, Chrome for Android, and others) enforce an autoplay policy that blocks audio from playing until the user interacts with the page. Because clicking Enter Zen is treated as a user gesture in most cases, playback usually begins right after you enter the scene. However, some browsers require the gesture to happen on the audio element itself.
If the black noise is silent after entering the scene on mobile, reload the page and toggle the Controls checkbox on and then off again before clicking Enter Zen. Interacting with the checkbox counts as a qualifying user gesture and re-triggers autoplay, resolving the issue without any other configuration.

​
Audio file

The track is stored at assets/black-noise.ogg and served as a static asset alongside the rest of the project. Key details:
  • Format: OGG Vorbis (.ogg) — a free, open-source lossy audio codec with broad browser support.
  • Looping: the loop attribute on the <audio> element handles seamless repetition natively; no JavaScript is needed.
  • Offline playback: once the page has loaded and the file is cached, the audio plays with no active internet connection required.
OGG Vorbis is supported in all modern browsers: Chrome, Firefox, Edge, and Safari 12 and later. If you encounter a browser that does not support .ogg, updating to the latest version of your browser will resolve it.

Build docs developers (and LLMs) love

Get started for freeTalk to us