Diffuse

Construct your audio player.

Diffuse is a collection of components and software that make it possible to listen to audio from various sources on your devices and the web, and to create the ideal digital audio listening experience for you.

WORK IN PROGRESS

Built by tokono.ma

Usage

The easiest way to start is by exploring the software. If you prefer a traditional pre­packaged web application approach, you can check out themes.

Alternatively, there's constituents which allows you to use any component from any theme interchange­ably, each in a separate browser tab. Each tab talks to each other, so you can for example browse audio in one tab and play it in another.

The goal is for every user, no matter their experience with web software, to have agency over their software. One can start with making small changes and gradually progress to making big changes.

Demo

Diffuse is not your typical streaming service, you have to add sources of audio. This button here adds a few sample audio files.

Next, select any theme from below to play the audio. Or any of the other options suggested in the usage section.

Themes

Themes are element compositions and provide a traditional browser web application way of using them. In other words, pretty much the whole thing, besides your data, lives inside a single browser tab.

Each theme is unique, not just a skin; each one might have a totally different feature set.

  • [todo] Blur
    A theme with an Apple-inspired playback view. Features two audio players instead of the usual one.
  • [todo] Loader
    A theme that loads other themes! Load a theme from a URL, text snippet or from your user data output. If you're taking the first steps to customize, checkout the constituents loader first!
  • Webamp
    Winamp 2 + Windows 98. Uses Webamp as the audio player connected to various Diffuse elements. Also features a desktop-like Windows 98 environment in which you can open "programs" that control the used Diffuse elements.

Constituents

Constituents are various interface components each loaded in their own web page. Every used component is configured so that it operates in broadcast mode, making all the pages communicate with each other.

It also allows non-browser web environments, such as WebViews, to display UI components separately. For example, to enable moveable web views on the desktop.

Take control

Diffuse ranges from “eating out at a great restaurant” all the way to “making your favourite meal at home”

Elements

The (web) components of the system. These custom elements are then recombined into an entire music player experience, or whatever you want to build.

Configurators

Elements that serve as an intermediate in order to make a particular kind of element configurable. In other words, these allow for an element to be swapped out with another that takes the same set of the actions and data output.

  • Input
    Allows for multiple inputs to be used at once.
  • Output
    Enables the user to configure a specific output. If no default output is set, it creates a temporary session by storing everything in memory.
  • [todo] Scrobbles
    Configure multiple scrobblers (music trackers).

Engines

Elements with each a singular purpose and don't have any UI. There are specialised UI and orchestrator elements that control these.

  • Audio
    Plays audio through audio elements.
  • Queue
    A simple queue for tracks.

Input

Inputs are sources of audio tracks. Each track is an entry in the list of possible items to play. These can be files or streams, static or dynamic.

  • Opensubsonic
    Add any (open)subsonic server.
  • [todo] HTTPS (Raw)
    Enables usage of tracks with a HTTPS URI.
  • [todo] HTTPS (JSON)
    Generate tracks based on HTTPS servers that provide JSON (directory) listings.
  • S3
    AWS S3 and services that provide the same surface API such as Cloudflare R2.
  • [todo] Soundcloud
    Add items from your Soundcloud feed.
  • [todo] WebDAV
    Add any WebDAV server.

Orchestrators

These too are element compositions. However, unlike themes, these are purely logical. Mostly exist in order to construct sensible defaults to use across themes and other compositions.

  • Input
    A default input configuration. Contains all the inputs provided here.
  • Output
    A default output configuration. Contains all the outputs provided here along with the relevant transformers.
  • Process inputs into tracks
    Whenever the cached tracks are initially loaded through the passed output element it will list tracks by using the passed input element. Afterwards it loops over all tracks and checks if metadata needs to be fetched. If anything has changed, it'll pass the results to the output element.
  • Queue ⭤ Audio
    Connects the given queue engine to the given audio engine.
  • Queue ⭤ Tracks
    Sets the given queue element pool whenever the tracks signal from the given output changes.
  • Repeat & Shuffle
    An opinionated way to setup repeat & shuffle.
  • Sources
    Monitor tracks from the given output to form a list of sources based on the input's sources return value.
  • Search ⭤ Tracks
    Supplies tracks to the given search processor whenever the tracks collection changes.

Output

Output is application-derived data such as playlists. These elements can receive such data and keep it around. These are categorised by the type of data they ingest, or many types in the case of polymorphic. Optionally use transformers to convert output into the expected format.

  • [todo] Bytes / Automerge Repo
    Sync with an Automerge repo sync server.
  • Polymorphic / IndexedDB
    Stores output into the local indexedDB. Supports any type of data that indexedDB supports.
  • [todo] Raw / AT Protocol
    Store your user data on the storage associated with your ATProtocol identity. Data is lexicon shaped by default so this element takes in that data directly without any transformations.

Processors

These elements work with the output generated by the input elements to add more data to them, or process them in some other way.

  • Artwork
    Fetches cover art for a given set of tracks, stored locally in indexedDB. Checks the audio metadata first, then MusicBrainz and uses Last.fm as the fallback.
  • Metadata
    Fetch audio metadata for a given set of tracks, adding to the Track object.
  • Search
    Provides a way to search through a collection of tracks, powered by orama.js

Supplements

Additional elements, such as scrobblers.

  • [todo] Last.fm scrobbler
  • [todo] ListenBrainz scrobbler
  • [todo] Rocksky scrobbler
  • [todo] Teal.fm scrobbler

Transformers

Transform data from one format or schema into another. See schema section below for more information. Just as configurators, these are intermediates and require to have the same set of actions as the element it targets.

  • Output / Bytes / Automerge
    Translate data to and from an Automerge CRDT.
  • [todo] Output / Bytes / Cambria lenses
    Uses the Cambria library to seamlessly translate between data schemas so that no data migration is needed.
  • Output / Bytes / JSON
    Raw data schema output ⇄ JSON Uint8Array.
  • Output / Refiner / Default
    The task of a refiner transformer is to remove the output state that is not meant to be saved to storage. For example, ephemeral tracks; this transformer will keep them in memory, but they will not be present in the output. Ideally this is part of every theme, but you may swap it out with another transformer that might provide better defaults.
  • Output / String / JSON
    Raw data schema output ⇄ JSON UTF8 string.

Definitions

All of the elements here are built with these data definitions in mind. That said, you can mix elements that use different definitions; you just have to put a transformer between them in order to translate between them, if needed.