Pixel UI/Games & sound/Chiptune

Chiptune

8-bit sounds for your whole page, from one tag. No audio files.

<piix-chiptune>DOM + canvas

Click to hear. Browsers wait for your first click before any sound.

Coin

Jump

Power up

Error

<piix-chiptune></piix-chiptune>

<piix-button data-sfx="coin">Coin</piix-button>
<piix-button tone="sky" data-sfx="jump">Jump</piix-button>
<piix-button tone="violet" data-sfx="powerup">Power up</piix-button>
<piix-button tone="coral" data-sfx="error">Error</piix-button>

Speaker

Drop it anywhere and the page gets sound: links and buttons blip when you hover and click them, and every Piixpal game and dialogue box starts making noise. Each sound is made on the spot with WebAudio, so there's nothing to download. It shows as a pixel speaker; clicking it mutes the whole page, and the choice is remembered. Put data-sfx="coin" on anything to give it a sound of its own.

Installation

<!-- once, anywhere on the page: every component -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/piixpal.min.js"></script>

<!-- just chiptune (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/dist/c/chiptune.min.js"></script>

npm install piixpal

// once, in your entry file
import "piixpal";

// npm install piixpal
import "piixpal";

export default function Page() {
  return (
    <piix-chiptune></piix-chiptune>
    
    <piix-button data-sfx="coin">Coin</piix-button>
    <piix-button tone="sky" data-sfx="jump">Jump</piix-button>
    <piix-button tone="violet" data-sfx="powerup">Power up</piix-button>
    <piix-button tone="coral" data-sfx="error">Error</piix-button>
  );
}

Usage

<piix-chiptune></piix-chiptune>

<piix-button data-sfx="coin">Coin</piix-button>
<piix-button tone="sky" data-sfx="jump">Jump</piix-button>
<piix-button tone="violet" data-sfx="powerup">Power up</piix-button>
<piix-button tone="coral" data-sfx="error">Error</piix-button>

Examples

Every sound

All of them are generated, so they cost no bytes to load.

hover

click

blip

select

type

coin

jump

bounce

launch

hit

break

powerup

success

error

open

lose

win

boot

<piix-button size="sm" tone="ink" data-sfx="hover">hover</piix-button>
<piix-button size="sm" tone="ink" data-sfx="click">click</piix-button>
<piix-button size="sm" tone="ink" data-sfx="blip">blip</piix-button>
<piix-button size="sm" tone="ink" data-sfx="select">select</piix-button>
<piix-button size="sm" tone="ink" data-sfx="type">type</piix-button>
<piix-button size="sm" tone="ink" data-sfx="coin">coin</piix-button>
<piix-button size="sm" tone="ink" data-sfx="jump">jump</piix-button>
<piix-button size="sm" tone="ink" data-sfx="bounce">bounce</piix-button>
<piix-button size="sm" tone="ink" data-sfx="launch">launch</piix-button>
<piix-button size="sm" tone="ink" data-sfx="hit">hit</piix-button>
<piix-button size="sm" tone="ink" data-sfx="break">break</piix-button>
<piix-button size="sm" tone="ink" data-sfx="powerup">powerup</piix-button>
<piix-button size="sm" tone="ink" data-sfx="success">success</piix-button>
<piix-button size="sm" tone="ink" data-sfx="error">error</piix-button>
<piix-button size="sm" tone="ink" data-sfx="open">open</piix-button>
<piix-button size="sm" tone="ink" data-sfx="close">close</piix-button>
<piix-button size="sm" tone="ink" data-sfx="lose">lose</piix-button>
<piix-button size="sm" tone="ink" data-sfx="win">win</piix-button>
<piix-button size="sm" tone="ink" data-sfx="boot">boot</piix-button>

From your own code

Piixpal.sfx(name, { pitch }) plays a sound when something happens.

Save

Higher coin

<piix-button tone="mint" onclick="Piixpal.sfx('success')">Save</piix-button>
<piix-button tone="sun" onclick="Piixpal.sfx('coin', { pitch: 1.5 })">Higher coin</piix-button>

Pinned to a corner

Look at the bottom-right corner of this page.

<piix-chiptune float="bottom-right" tone="ink"></piix-chiptune>

API reference

Attribute	What it does	Default
`wire`	what gets sound by itself: `hover`, `click`, both or `none`	`hover click`
`scope`	a CSS selector: only wire things inside it	`the whole page`
`volume`	0 to 1	`.25`
`float`	`bottom-right` `bottom-left` `top-right` `top-left`	–
`tone`	the speaker's colour	`lime`
`data-sfx`	on any element: the sound it makes when clicked	–
`data-sfx-hover`	on any element: the sound when the pointer arrives	–

Events

Event	When
`mute`	the speaker was clicked: `detail.muted`

Methods

Method	What it does
`Piixpal.sfx(name, { pitch })`	play any sound from code
`.muted`	read or set the mute switch

Accessibility

The speaker is a real toggle button (aria-pressed), and muting is remembered.
Nothing plays until the visitor clicks or presses a key, as browsers require.
Sounds are short and quiet by default; nothing loops.