Constituent loader ❈

Missing a feature, or prefer a different user interface that is not part of Diffuse? Add it here. This tool allows you to load a custom constituent besides the existing ones.

Yours

Generate

On the todo list, the idea is to have AI generate a piece of UI for you; building on the logical blocks provided by Diffuse.

Community

Nothing here yet, too early.

Build

If you know a bit of HTML & Javascript, you can write your own or plug in some code you found elsewhere:

Your code here builds on the foundation listed below, it'll be injected into a <div id="container"> element in the body.

Browse examples:

Foundation

Diffuse comes with a foundation that preconfigures all elements so you don't have to set them up yourself, along with a combination of elements for certain features. It internally tracks the DOM addition of the custom elements, so no need to worry about setting up an element multiple times.

Refer to the elements index to find out what each element does.

import foundation from "common/constituents/foundation.js" foundation.engine.audio() foundation.engine.queue() foundation.engine.repeatShuffle() foundation.orchestrator.autoQueue() foundation.orchestrator.input() foundation.orchestrator.output() foundation.orchestrator.queueAudio() foundation.orchestrator.processTracks() foundation.orchestrator.searchTracks() foundation.orchestrator.sources() foundation.processor.artwork() foundation.processor.metadata() foundation.processor.search()

Features:

  • Fill the queue automatically (infinite play)
    foundation.feature.fillQueueAutomatically()
  • Play audio from the queue
    foundation.feature.playAudioFromQueue()
  • Process inputs (into tracks, etc)
    foundation.feature.processInputs()
  • Search through your collection
    foundation.feature.searchThroughCollection()

Notes

While you have the ability to do whatever you want in a custom constituent, the existing constituents are designed to work a certain way; so here's some things to keep in mind:

  • In most cases you'll want to call foundation.feature.processInputs() so that your audio files and streams actually show up.
  • Most elements are configured in broadcast mode so they communicate across tabs. There are a few exceptions such as inputs, where we prefer parallelisation.