css-audio

A simple way to animate your site with sound.

Any js framework
Any css framework

Intro

This is a simple wrapper for the Web Audio API, allowing you to easily animate your site with sound from any source.

Install

pnpm install css-audio or npm install css-audio

Example

import cssAudio from "../src";

document.addEventListener("DOMContentLoaded", async () => {
  const start = await cssAudio({
    src: "/elevator.wav",
  });

  function play() {
    start();
    document.removeEventListener("click", play);
  }

  document.addEventListener("click", play);
});

.bar {
  display: block;
  height: calc(var(--freq-low) / 200 * 1px);
  width: 100px;
  background-color: red;
}

<div class="bar"></div>

Default CSS Variables Available

var(--freq-low)
var(--freq-mid)
var(--freq-high)
var(--track-time)
var(--track-duration)

Example Project

See example directory

---