A music player that connects to your cloud/distributed storage. diffuse.sh
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235---layout: layouts/kitchen.vtobase: ../title: Guide | Diffuse---<style> h2 { font-size: var(--fs-lg); opacity: 0.6; } .getting-started { font-size: var(--fs-md); font-weight: 500; ul { display: flex; flex-direction: column; gap: var(--space-md); margin: var(--space-xl) 0; max-width: 100%; padding-left: 0; @media (min-width: 42rem) { margin: var(--space-md) 0; } } li { display: inline-block; } li a { text-decoration: none; } ul:first-child i[style] { @media (width < 35rem) { display: none; } } .with-icon { gap: var(--space-sm); } }</style><h1 hidden>Guide</h1><section class="getting-started"> <div class="columns"> <ul class="flex" style="color: oklch(from var(--text-color) l c h / 0.4);"> <li> <span class="with-icon"> <i class="ph-fill ph-play-circle" style="opacity: 0.25"></i> <i class="ph-fill ph-eye-slash"></i> <span>There's no main audio interface</span> </span> </li> <li> <span class="with-icon"> <i class="ph-fill ph-asterisk" style="opacity: 0.25"></i> <i class="ph-fill ph-lightning-slash"></i> <span>There's no fixed feature set</span> </span> </li> <li> <span class="with-icon"> <i class="ph-fill ph-info" style="opacity: 0.25"></i> <i class="ph-fill ph-app-window"></i> <span><a style="color: var(--accent-twist-2)" href="catalogue/?category=Themes">Themes</a> are like traditional "apps"</span> </span> </li> <li> <span class="with-icon"> <i class="ph-fill ph-plus-circle" style="opacity: 0.25"></i> <i class="ph-fill ph-tabs"></i> <span> Unlike interfaces in <a style="text-decoration: underline; text-decoration-color: var(--accent-twist-2)" href="{{ ('facets/themes/blur/artwork-controller/facet/index.tile') |> facetLoaderURL }}">separate</a> <a style="text-decoration: underline; text-decoration-color: var(--accent-twist-2)" href="{{ ('facets/themes/blur/browser/facet/index.tile') |> facetLoaderURL }}">tabs</a> </span> </span> </li> <li> <span class="with-icon"> <i class="ph-fill ph-person-simple-circle" style="opacity: 0.25"></i> <i class="ph-fill ph-share"></i> <span>Shareable interfaces & features</span> </span> </li> </ul> <ul class="flex" style="color: var(--accent-twist-2);"> <li> <a class="with-icon" href="{{ ('facets/data/file-manager/index.tile') |> facetLoaderURL }}"> <i class="ph-fill ph-number-circle-one" style="opacity: 0.25"></i> <i class="ph-fill ph-file-audio"></i> <span>Add some audio</span> </a> </li> <li> <a class="with-icon" href="{{ ('facets/data/sources/index.tile') |> facetLoaderURL }}"> <i class="ph-fill ph-number-circle-two" style="opacity: 0.25"></i> <i class="ph-fill ph-gear-fine"></i> <span>Wait until processed</span> </a> </li> <li> <a class="with-icon" href="featured/?filter=interface"> <i class="ph-fill ph-number-circle-three" style="opacity: 0.25"></i> <i class="ph-fill ph-swatches"></i> <span>Try out interfaces</span> </a> </li> <li> <a class="with-icon" href="featured/?filter=prelude"> <i class="ph-fill ph-number-circle-four" style="opacity: 0.25"></i> <i class="ph-fill ph-sparkle"></i> <span>Enable additional features</span> </a> </li> <li> <a class="with-icon" href="{{ ('facets/data/userdata/index.tile') |> facetLoaderURL }}"> <i class="ph-fill ph-number-circle-five" style="opacity: 0.25"></i> <i class="ph-fill ph-person"></i> <span>Sync your user-data</span> </a> </li> </ul> </div></section><section id="concept"> <h2>Concept</h2> <div class="columns"> <div class="flex"> <p> Diffuse is unlike traditional software; instead of combining several features into a single user interface and producing data as output, we do the opposite, we start with the data and work our way up from there. </p> <p> <strong>Playlists, your list of favourite music, metadata derived from audio, etc. That's the data that stays with you and that we build features and interfaces on top of.</strong> </p> <p> These features and interfaces are housed into units that we call "facets". The default ones consist of <a href="elements/">Diffuse elements</a>, various building blocks that provide functionality. These are configured to broadcast their state to each other if they live in the same group, think dj controller, each group is a channel. </p> <p> Finally, facets are just regular web pages so they can live wherever. We save them to the user-data storage that's configured and give the user the option to share it. This means that you can load features and interfaces from other people, <strong>building software cooperatively</strong>. </p> </div> <div class="flex"> <p> <em>A few things to keep in mind:</em> </p> <ul style="display: flex; flex-direction: column; gap: var(--space-xs);"> <li>You can open as many interfaces as you'd like.</li> <li>Interfaces are connected to each other.</li> <li>Interfaces don't have to be pinned in order to be used, unlike features which do have to be added in order to be activated.</li> </ul> </div> </div></section><section id="tutorial"> <h2>Tutorial</h2> <div class="columns"> <div class="flex"> <p> <strong>Diffuse is not your typical streaming service, you have to add sources of audio so you have stuff to play.</strong> This button below adds some demo content, so you can experiment with the software right away. Wait until processing is completed. </p> <p> <button id="add-sample-content" class="button--bg-twist-2"> <span>Add sample content</span> </button> </p> <p> Now we should explore what is possible with our audio. Because Diffuse is cooperative and malleable software, our interface can look like anything, and we can pick the features we like. That might sound overwhelming, so we'll start with a simple example. </p> <p> By default a feature is enabled which puts audio in the queue automatically. <strong>Let's pick an interface</strong> to play what got put into the queue for us. </p> <p> <a class="button button--bg-twist-2" href="{{ ('facets/themes/blur/artwork-controller/facet/index.tile') |> facetLoaderURL }}" target="_blank"> Play audio </a> </p> <p> You can disable the "Automatic Queue" feature on <a href="./dashboard/">your dashboard</a> by clicking the toggle button, or removing it all together. Don't worry, you can always add it back using the <a href="./catalogue/?category=Playback">playback category page</a>. Next, reload the interface that plays your audio; now there won't be anything in the queue. Note that you have to close all the interfaces that interact with the queue, otherwise the state will be remembered. </p> </div> <div class="flex"> <p> Interfaces can also be added (pinned) to your dashboard, but it's not required, you can try them out right away by clicking the link in their title. For interfaces that are more like traditional web applications, delivering more encompassing experiences, look at <a href="./catalogue/?category=Themes">themes</a>. </p> <p> When you're ready to add your own audio, a useful place to start is the "Connect" interface which summarises which inputs you can add. For more, check out the "Input & Output" category. </p> <p> <a class="button button--bg-twist-2" href="{{ ('facets/connect/index.tile') |> facetLoaderURL }}" target="_blank"> Add audio input </a> </p> <p> The connect interface also shows some options that can be used for syncing your user-data, that's your playlists, configured audio inputs, etc. By default everything is saved in your browser. </p> <p> Lastly, don't forget that you can create, edit and share both features + interfaces. LLMs (AI) can also be used to create or edit them. To edit something, you first add it to your dashboard and then click the edit button, which will load it in the editor on the create page. That page also has some examples and documentation of how the system works. </p> </div> </div></section>