Diffuse

Construct your audio player by composing web components.

Diffuse provides a range of custom elements: audio input, data output, metadata & artwork processing, audio playback, a queue system, and much more.

It is also aimed at consumers, providing themes and facets, preconfigured component compositions; while simultaneously trying to be malleable software.

More information on the website.

Developer usage

You can either consume the Diffuse library via the deployed instance (the listed elements link to Javascript files) or the Javascript package. From there you can use the custom elements as with any other custom DOM element, by writing HTML or creating a Class instance.

<script src="https://elements.diffuse.sh/bafybeiexuhqumeljxdmmsdfet5oh2h7pam6fy7gbktqfbsai5qfu2ze6hq/components/engine/queue/element.js"></script>

<de-queue></de-queue>

import QueueEngine from "@toko/diffuse/components/engine/queue/element.js"

const queue = new QueueEngine()
queue.setAttribute("group", "facets")

document.body.append(queue)

Build it yourself

Install Deno.

deno run gen:defs:types
deno run build # or deno run serve

Diffuse is built with:

• Deno
• Web components (custom elements)
• Web workers (also: shared + service workers)
• Signals (currently alien-signals, but hopefully TC39 in the future)
• lit-html
• music-metadata
• Lume & ESBuild