forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
1# Diffuse
2
3**Construct your audio player by composing web components.**
4
5Diffuse provides a range of custom elements: audio input, data output, metadata & artwork processing, audio playback, a queue system, and much more.
6
7It is also aimed at consumers, providing themes and facets, preconfigured component compositions; while simultaneously trying to be [malleable software](https://www.inkandswitch.com/essay/malleable-software/).
8
9More information on the [website](https://elements.diffuse.sh/latest/).
10
11
12## Developer usage
13
14You can either consume the Diffuse library via the [deployed instance](https://elements.diffuse.sh/latest/) (the listed elements link to Javascript files) or the [Javascript package](https://jsr.io/@toko/diffuse). From there you can use the custom elements as with any other custom DOM element, by writing HTML or creating a `Class` instance.
15
16```html
17<script src="https://elements.diffuse.sh/bafybeiexuhqumeljxdmmsdfet5oh2h7pam6fy7gbktqfbsai5qfu2ze6hq/components/engine/queue/element.js"></script>
18
19<de-queue></de-queue>
20```
21
22```js
23import QueueEngine from "@toko/diffuse/components/engine/queue/element.js"
24
25const queue = new QueueEngine()
26queue.setAttribute("group", "facets")
27
28document.body.append(queue)
29````
30
31
32## Build it yourself
33
34Install [Deno](https://docs.deno.com/runtime/getting_started/installation/).
35
36```shell
37deno run gen:defs:types
38deno run build # or deno run serve
39```
40
41Diffuse is built with:
42- [Deno](https://deno.com)
43- Web components (custom elements)
44- Web workers (also: shared + service workers)
45- Signals (currently [alien-signals](https://github.com/stackblitz/alien-signals), but hopefully [TC39](https://github.com/tc39/proposal-signals) in the future)
46- [`lit-html`](https://lit.dev/docs/libraries/standalone-templates/)
47- [`music-metadata`](https://github.com/Borewit/music-metadata)
48- [Lume](https://lume.land) & [ESBuild](https://esbuild.github.io)