Diffuse

Built-in

Blur / Artwork controller

Try

Audio playback controller with an artwork display.
Webamp / Browser

Try

Collection browser + search in a retro, win98, look.
Webamp / Input Configurator

Try

Windows 98 styled input configurator where you can add music sources.

Community

Check out some facets from the community and load them here.

Nothing here yet, too early.

Your collection

Examples

Some simple examples to help you understand how to build your own facet. Fork them to load them into the code editor below (or save → edit).

Now playing

Try

Shows what's currently set to "now playing" in the queue, along with a button to shift the queue to the next track.
Generate playlist

Try

Make a list of what previously played in the queue.

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/facets/foundation.js"
          
foundation.engine.audio()
foundation.engine.queue()
foundation.engine.repeatShuffle()
foundation.engine.scope()

foundation.orchestrator.autoQueue()
foundation.orchestrator.input()
foundation.orchestrator.output()
foundation.orchestrator.queueAudio()
foundation.orchestrator.processTracks()
foundation.orchestrator.scopedTracks()
foundation.orchestrator.sources()

foundation.processor.artwork()
foundation.processor.metadata()
foundation.processor.search()
      

Features:

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

Notes

While you have the ability to do whatever you want in a custom facet, the existing facets 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.features.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.