forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
1---
2layout: layouts/kitchen.vto
3base: ../
4title: Guide | Diffuse
5---
6
7<style>
8 h2 {
9 color: var(--bg-color);
10 background: oklch(from var(--accent-twist-2) l c h / 0.8);
11 display: inline-block;
12 line-height: 0.75;
13 text-box: trim-both cap alphabetic;
14 padding: var(--space-3xs);
15 }
16</style>
17
18<h1 hidden>Guide</h1>
19
20<div class="columns">
21 <section>
22 <h2>Concept</h2>
23
24 <p>
25 Diffuse is unlike traditional software; instead of combining several features into a single user interface and producing data output, we do the opposite, we start with the data and work our way up from there.
26 </p>
27
28 <p>
29 <strong>It provides every user the ability to choose which features and interfaces they want to layer on top of their data.</strong>
30 </p>
31
32 <p>
33 These features and interfaces are housed into units that we call "facets". They consist of <a href="elements/">Diffuse elements</a> that are connected, they broadcast their state and the parts of your data that have been updated.
34 </p>
35
36 <p>
37 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>.
38 </p>
39 </section>
40
41 <section>
42 <h2>Getting started</h2>
43
44 <ul style="display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-md); padding-left: 0">
45 <!-- 1 -->
46 <li class="with-icon" style="gap: var(--space-sm)">
47 <i class="ph-fill ph-file-audio" style="opacity: 0.4"></i>
48 <span><strong>Add some audio files or streams.</strong> The wide range of <a href="{{ ('facets/connect/index.html') |> facetLoaderURL }}">connect interfaces</a> can be used for this, or use the demo from the tutorial below.</span>
49 </li>
50
51 <!-- 2 -->
52 <li class="with-icon" style="gap: var(--space-sm)">
53 <i class="ph-fill ph-gear-six" style="opacity: 0.4"></i>
54 <span><strong>Wait until the processing of audio sources into tracks is completed.</strong> You can monitor it using this <a href="{{ ('facets/data/process-tracks/index.html') |> facetLoaderURL }}">interface</a>. The tutorial demo will show it directly.</span>
55 </li>
56
57 <!-- 3 -->
58 <li class="with-icon" style="gap: var(--space-sm)">
59 <i class="ph-fill ph-paint-brush" style="opacity: 0.4"></i>
60 <span><strong style="color: var(--accent-twist-2)">Explore the interfaces that can be used to play and manage your audio.</strong> Check out the <a href="featured/?filter=interface">featured interfaces</a>.</span>
61 </li>
62
63 <!-- 4 -->
64 <li class="with-icon" style="gap: var(--space-sm)">
65 <i class="ph-fill ph-sparkle" style="opacity: 0.4"></i>
66 <span><strong>Continue exploring, enable some additional features</strong> such as making played audio available offline automatically.</span>
67 </li>
68
69 <!-- 5 -->
70 <li class="with-icon" style="gap: var(--space-sm)">
71 <i class="ph-fill ph-person" style="opacity: 0.4"></i>
72 <span><strong>Sync your configuration and playlists with your other devices.</strong> Or share it with other people.</span>
73 </li>
74 </ul>
75 </section>
76</div>
77
78<section id="tutorial">
79 <h2>Tutorial</h2>
80
81 <div class="columns">
82 <div>
83 <p>
84 <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.
85 </p>
86
87 <p>
88 <button id="add-sample-content" class="button--bg-twist-2">
89 <span>Add sample content</span>
90 </button>
91 </p>
92
93 <p>
94 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.
95 </p>
96
97 <p>
98 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.
99 </p>
100
101 <p>
102 <a class="button button--bg-twist-2" href="{{ ('themes/blur/artwork-controller/facet/index.html') |> facetLoaderURL }}" target="_blank">
103 Play audio
104 </a>
105 </p>
106
107 <p>
108 You can disable the "Automatic Queue" feature on <a href="./dashboard/">your dashboard</a> by deleting that item, or toggling it off on the <a href="./playback/">playback category page</a>. Next, reload the interface that plays your audio; now there won't be anything in the queue.
109 </p>
110 </div>
111
112 <div>
113 <p>
114 Interfaces can also be added 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="themes/">themes</a>.
115 </p>
116
117 <p>
118 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.
119 </p>
120
121 <p>
122 <a class="button button--bg-twist-2" href="{{ ('facets/connect/index.html') |> facetLoaderURL }}" target="_blank">
123 Add audio input
124 </a>
125 </p>
126
127 <p>
128 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.
129 </p>
130
131 <p>
132 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 build page. The build page has some examples and documentation of how that system works.
133 </p>
134 </div>
135 </div>
136</section>