Diffuse

Featured

Add audio from various places on the web and your device.
Browse your collection to put something into the queue.
Automate adding items to the queue, for infinite playback or listening to a playlist.
Play queued songs.
Manage your user data, sync with your other devices or other people.

Usage

To use these facets, simply open whichever ones provide the functionality that you're looking for at a given moment. You can browse existing ones here and create one below.

For example, say you want to play music; two options would be: (1) browse for a specific song and add it to the queue, or (2) automatically add a bunch of shuffled songs to the queue. Next, you need a way to play the items you added to the queue. That's where a controller could be used.

You might ask, why can't I do all of this in just one window? That's what themes are for, if you need something more streamlined. If you however want a customised experience, or prefer certain interfaces for certain things, that's what facets are for.

Every facet has access to your audio collection and your user data, along with any other shared state.

Built-in

Blur / Artwork controller

Audio playback controller with an artwork display.

Open Save Edit
Tools / Automatic Queue

Everything you need to automatically put tracks into the queue.

Open Save Edit
Tools / V3.x Import

Import data from Diffuse v3.

Open Save Edit
Webamp / Browser

Collection browser + search in a retro, win98, look.

Open Save Edit
Webamp / Input Configurator

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

Open Save Edit
Webamp / Output Configurator

Windows 98 styled output configurator where you can manage your data storage.

Open Save Edit

Community

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

Nothing here yet, too early.

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.favourites()
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()

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

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

Open Save Edit
Generate playlist

Make a list of what previously played in the queue.

Open Save Edit

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.
You can use facets in combination with themes by adding the elements used in the theme to a group and then passing in the group name as a URL query parameter (eg. group=facets)

Your collection