Add a button sound with Chip Pops and a few lines of HTML

Oct 28, 2026

Find an 8-bit sound, export its WAV file with blips, and play it from an HTML button with volume control and error handling.

~~~

A short sound can confirm that a button did something. You need a sound you like, a file in your project, and a click handler that plays it.

We’ll use Chip Pops to choose an 8-bit effect, then put it in a plain HTML page. The same file can go into a larger web app later.

What you need

Chip Pops runs on macOS 14 or later. After purchasing it, connect GitHub in Polar and accept the private repository invitation to get the download from Releases. Generate the sound library the first time you use the app.

Choose Install Command Line Tool… from the Chip Pops menu to install blips. Its usual location is ~/.local/bin. You’ll also need a browser and a local web server for the HTML example. Python 3 supplies the small server used below.

Find a few candidates

In the app, select the success category and click sounds to hear them. The arrow keys move through the category and play each selection. Space plays or stops.

For the terminal workflow, first check the commands your installed version supports:

blips help
blips help export

Find a few soft success sounds:

blips list --category success --tag soft --limit 5 --json

The results identify sounds by IDs. Their contents depend on your library seed. Don’t assume every ID in this tutorial will match the sound you heard if you generated another library.

Inspect a candidate before exporting it:

blips show success-003 --json

Use the app to listen, or play candidates from Terminal:

blips play success-003 success-005

If an agent helps, let it find candidates and let you choose by listening. The command’s tags describe a sound, but they don’t tell an agent which one you prefer.

Export a WAV file

Create a small working folder and put the sound in a sounds subfolder:

mkdir -p button-sound-demo/sounds
cd button-sound-demo
blips export success-003 --to sounds --name saved.wav

You should now have sounds/saved.wav. WAV is the default export format. The name describes its role in your page, so you can replace the sound later without changing the HTML.

Be careful with an existing destination: export replaces a file with the same name.

Record the sound ID and library seed somewhere in your project. Chip Pops shows the seed in the sidebar. If you need to enforce a known seed, blips export accepts --seed and rejects a library with a different seed. Changing the library seed changes what an ID sounds like.

Play it from HTML

Create index.html beside the sounds folder:

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <title>Button sound demo</title>
  <button id="preview" type="button">Preview confirmation sound</button>
  <p id="status" role="status"></p>
  <script>
    const button = document.querySelector('#preview')
    const status = document.querySelector('#status')
    const sound = new Audio('./sounds/saved.wav')
    sound.volume = 0.25

    button.addEventListener('click', () => {
      sound.currentTime = 0
      sound.play().then(() => {
        status.textContent = 'Playing the confirmation sound.'
      }).catch(() => {
        status.textContent = 'Could not play the sound. Check the audio file.'
      })
    })
  </script>
</html>

volume takes a value between 0 and 1. Starting at 0.25 gives you room to raise it after listening.

The browser receives play() directly from a button click. Browsers can block playback that starts without a user gesture. Avoid playing a confirmation sound automatically when the page loads.

Resetting currentTime starts the sound from the beginning on the next click. This example reuses one audio object, so quick clicks restart the sound instead of layering several copies.

The text status also works when the speakers are muted. In a real app, keep a visible confirmation and let people turn optional sounds off. If the button saves data, play its success sound after the save succeeds. This demo only previews audio.

Serve and check it

From the folder containing index.html, start a local server:

python3 -m http.server 8000

Open http://localhost:8000 and click the button. Then click it again to check that the sound starts over. You should hear your exported effect and see the status text change.

If you don’t hear anything

If Terminal says blips: command not found, check that ~/.local/bin is on your PATH, or rerun the app’s command-line installer.

If the library hasn’t been generated, generate it in Chip Pops first. Don’t run blips generate --seed random to fix a missing file: generation replaces the current library and changes your sound choices.

If listing with a tag returns no candidates, try the category without --tag. If exporting reports a seed mismatch, check which library you intended to use before regenerating anything.

For browser problems, check the Network panel for sounds/saved.wav. A 404 means the file location and URL disagree. Also check your system output volume, browser tab mute setting, and the volume value in the script. Keep the play() rejection handler so playback failures leave a visible result.

Get Chip Pops

Find and export about 6,000 8-bit sound effects for apps and games. Includes a Mac app, the blips command and full MIT source code.

See Chip Pops → · $20 including tax, with full source code.