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 font-size: var(--fs-lg);
10 opacity: 0.6;
11 }
12
13 .getting-started {
14 font-size: var(--fs-md);
15 font-weight: 500;
16
17 ul {
18 display: flex;
19 flex-direction: column;
20 gap: var(--space-md);
21 margin: var(--space-xl) 0;
22 max-width: 100%;
23 padding-left: 0;
24
25 @media (min-width: 42rem) {
26 margin: var(--space-md) 0;
27 }
28 }
29
30 li {
31 display: inline-block;
32 }
33
34 li a {
35 text-decoration: none;
36 }
37
38 ul:first-child i[style] {
39 @media (width < 35rem) {
40 display: none;
41 }
42 }
43
44 .with-icon {
45 gap: var(--space-sm);
46 }
47 }
48</style>
49
50<h1 hidden>Guide</h1>
51
52<section class="getting-started">
53 <div class="columns">
54 <ul class="flex" style="color: oklch(from var(--text-color) l c h / 0.4);">
55 <li>
56 <span class="with-icon">
57 <i class="ph-fill ph-play-circle" style="opacity: 0.25"></i>
58 <i class="ph-fill ph-eye-slash"></i>
59 <span>There's no main audio interface</span>
60 </span>
61 </li>
62
63 <li>
64 <span class="with-icon">
65 <i class="ph-fill ph-asterisk" style="opacity: 0.25"></i>
66 <i class="ph-fill ph-lightning-slash"></i>
67 <span>There's no fixed feature set</span>
68 </span>
69 </li>
70
71 <li>
72 <span class="with-icon">
73 <i class="ph-fill ph-info" style="opacity: 0.25"></i>
74 <i class="ph-fill ph-app-window"></i>
75 <span><a style="color: var(--accent-twist-2)" href="catalogue/?category=Themes">Themes</a> are like traditional "apps"</span>
76 </span>
77 </li>
78
79 <li>
80 <span class="with-icon">
81 <i class="ph-fill ph-plus-circle" style="opacity: 0.25"></i>
82 <i class="ph-fill ph-tabs"></i>
83 <span>
84 Unlike interfaces in <a style="text-decoration: underline; text-decoration-color: var(--accent-twist-2)" href="{{ ('facets/themes/blur/artwork-controller/facet/index.html') |> facetLoaderURL }}">separate</a> <a style="text-decoration: underline; text-decoration-color: var(--accent-twist-2)" href="{{ ('facets/themes/winamp/browser/facet/index.html') |> facetLoaderURL }}">tabs</a>
85 </span>
86 </span>
87 </li>
88
89 <li>
90 <span class="with-icon">
91 <i class="ph-fill ph-person-simple-circle" style="opacity: 0.25"></i>
92 <i class="ph-fill ph-share"></i>
93 <span>Shareable interfaces & features</span>
94 </span>
95 </li>
96 </ul>
97
98 <ul class="flex" style="color: var(--accent-twist-2);">
99 <li>
100 <a class="with-icon" href="{{ ('facets/connect/index.html') |> facetLoaderURL }}">
101 <i class="ph-fill ph-number-circle-one" style="opacity: 0.25"></i>
102 <i class="ph-fill ph-file-audio"></i>
103 <span>Add some audio</span>
104 </a>
105 </li>
106
107 <li>
108 <a class="with-icon" href="{{ ('facets/data/sources/index.html') |> facetLoaderURL }}">
109 <i class="ph-fill ph-number-circle-two" style="opacity: 0.25"></i>
110 <i class="ph-fill ph-gear-fine"></i>
111 <span>Wait until processed</span>
112 </a>
113 </li>
114
115 <li>
116 <a class="with-icon" href="featured/">
117 <i class="ph-fill ph-number-circle-three" style="opacity: 0.25"></i>
118 <i class="ph-fill ph-swatches"></i>
119 <span>Try out interfaces</span>
120 </a>
121 </li>
122
123 <li>
124 <a class="with-icon" href="featured/">
125 <i class="ph-fill ph-number-circle-four" style="opacity: 0.25"></i>
126 <i class="ph-fill ph-sparkle"></i>
127 <span>Enable additional features</span>
128 </a>
129 </li>
130
131 <li>
132 <a class="with-icon" href="{{ ('facets/connect/index.html') |> facetLoaderURL }}">
133 <i class="ph-fill ph-number-circle-five" style="opacity: 0.25"></i>
134 <i class="ph-fill ph-person"></i>
135 <span>Sync your user-data</span>
136 </a>
137 </li>
138 </ul>
139 </div>
140</section>
141
142<section id="concept">
143 <h2>Concept</h2>
144
145 <div class="columns">
146 <div class="flex">
147 <p>
148 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.
149 </p>
150
151 <p>
152 <strong>It provides every user the ability to choose which features and interfaces they want to layer on top of their data.</strong>
153 </p>
154
155 <p>
156 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.
157 </p>
158
159 <p>
160 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>.
161 </p>
162 </div>
163 <div class="flex">
164 <p>
165 <em>A few things to keep in mind:</em>
166 </p>
167 <ul style="display: flex; flex-direction: column; gap: var(--space-xs);">
168 <li>You can open as many interfaces as you'd like.</li>
169 <li>Interfaces are connected to each other.</li>
170 <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>
171 </ul>
172 </div>
173 </div>
174</section>
175
176<section id="tutorial">
177 <h2>Tutorial</h2>
178
179 <div class="columns">
180 <div class="flex">
181 <p>
182 <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.
183 </p>
184
185 <p>
186 <button id="add-sample-content" class="button--bg-twist-2">
187 <span>Add sample content</span>
188 </button>
189 </p>
190
191 <p>
192 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.
193 </p>
194
195 <p>
196 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.
197 </p>
198
199 <p>
200 <a class="button button--bg-twist-2" href="{{ ('facets/themes/blur/artwork-controller/facet/index.html') |> facetLoaderURL }}" target="_blank">
201 Play audio
202 </a>
203 </p>
204
205 <p>
206 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.
207 </p>
208 </div>
209
210 <div class="flex">
211 <p>
212 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>.
213 </p>
214
215 <p>
216 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.
217 </p>
218
219 <p>
220 <a class="button button--bg-twist-2" href="{{ ('facets/connect/index.html') |> facetLoaderURL }}" target="_blank">
221 Add audio input
222 </a>
223 </p>
224
225 <p>
226 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.
227 </p>
228
229 <p>
230 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.
231 </p>
232 </div>
233 </div>
234</section>