Project Awesome project awesome
♥

Diffuse

Play music from your IPFS node, or any other cloud/distributed storage service you use.

Package 867 stars GitHub

Diffuse

Diffuse is a few things:

  • A collection of custom DOM elements (aka. framework-agnostic web components) that allow you to build an audio player, do audio metadata processing and browsing, list audio files and streams from various sources/APIs/servers, define how to save or sync user-data, etc.
  • A HTML loader that loads "interfaces" from the local user-data cache, the default set from Diffuse, HTTP(S) URLs, or AT Protocol URIs. When you load an interface, it's supplied with optional "features" which are also pieces of HTML. These pieces are called "facets" and are loaded from the local user-data cache as well.
  • A default configuration of the custom elements that's called "the foundation". This is used throughout the default set of facets. This foundation is configured so that the facets can communicate across tabs/frames; this is done by setting the element's group attribute.
  • A collection of data schemas in the form of atproto lexicons. These live in the definitions directory.

Putting all of this together to make cooperative and 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/latest/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:

Back to IPFS