css-audio

0.0.4 • Public • Published

A simple way to animate your site with sound.

Any js framework
Any css framework

npm version weekly downloads from npm

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


Package Sidebar

Install

npm i css-audio

Weekly Downloads

10

Version

0.0.4

License

MIT

Unpacked Size

7.2 kB

Total Files

6

Last publish

Collaborators

  • ben_hodgson