-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
1964 lines (1847 loc) · 101 KB
/
Copy pathindex.html
File metadata and controls
1964 lines (1847 loc) · 101 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta name="color-scheme" content="dark" />
<title>sonn — the open audio server</title>
<meta
name="description"
content="sonn is an open-source multiroom audio server: your music, streaming services, radio and line-in, served to any app or played in sync across every room — on the speakers you already own. Full Loxone Audio Server emulation included."
/>
<meta property="og:title" content="sonn — the open audio server" />
<meta
property="og:description"
content="The open audio server. Run it as a pure content server, or as a full multiroom system with fixed zones. Loxone and Home Assistant friendly. Open source."
/>
<meta property="og:type" content="website" />
<meta property="og:image" content="https://sonn-audio.github.io/assets/og.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://sonn-audio.github.io/assets/og.png" />
<link rel="alternate" hreflang="en" href="https://sonn-audio.github.io/" />
<link rel="alternate" hreflang="de" href="https://sonn-audio.github.io/de/" />
<link rel="alternate" hreflang="x-default" href="https://sonn-audio.github.io/" />
<link rel="icon" type="image/svg+xml" href="assets/sonn-mark.svg" />
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "sonn",
"slogan": "the open audio server",
"applicationCategory": "MultimediaApplication",
"operatingSystem": "Linux, Docker, Node.js",
"description": "Open-source, self-hosted multiroom audio server: local library, Spotify, Apple Music, Tidal, radio and line-in, played in sync on the speakers you already own. Includes a complete Loxone Audio Server implementation and works with Home Assistant over MQTT and HTTP.",
"url": "https://sonn-audio.github.io/",
"downloadUrl": "https://github.com/sonn-audio/core",
"softwareVersion": "4.0 beta",
"license": "https://www.apache.org/licenses/LICENSE-2.0",
"offers": { "@type": "Offer", "price": "0", "priceCurrency": "EUR" }
}
</script>
<link rel="preload" href="assets/fonts/hanken-grotesk-var.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="assets/fonts/jetbrains-mono-var.woff2" as="font" type="font/woff2" crossorigin />
<link rel="stylesheet" href="assets/site.css?v=2" />
<!-- The one inline script: mark the page as scripted before first paint, so entrance
states only ever hide things when something is actually going to reveal them. -->
<script>document.documentElement.classList.add('js');</script>
</head>
<body>
<!-- The light of the page: one fixed glow whose colour travels with the chapters —
green at home, teal in the signal path, amber where Loxone lives. -->
<div class="ambient" id="ambient" aria-hidden="true"></div>
<!-- Reading progress — a hairline of accent across the very top. -->
<div class="progress" id="progress" aria-hidden="true"></div>
<!-- ============================================================ top bar -->
<header class="bar" id="bar">
<div class="wrap bar-in">
<a class="bar-brand" href="#top" aria-label="sonn — back to top">
<svg viewBox="8 12 84 68" aria-hidden="true" fill="currentColor">
<path d="M14 46 L50 18 L86 46" fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" />
<rect x="20" y="63.1" width="2.17" height="5.78" rx="1.08" opacity="0.4" />
<rect x="25.78" y="59.5" width="2.17" height="13.01" rx="1.08" opacity="0.6" />
<rect x="31.57" y="61.66" width="2.17" height="8.67" rx="1.08" opacity="0.8" />
<rect x="37.35" y="58.05" width="2.17" height="15.9" rx="1.08" />
<rect x="46.03" y="56.6" width="2.89" height="18.8" rx="1.45" />
<rect x="54.69" y="58.05" width="2.17" height="15.9" rx="1.08" />
<rect x="60.48" y="60.94" width="2.17" height="10.12" rx="1.08" opacity="0.9" />
<rect x="66.26" y="58.77" width="2.17" height="14.46" rx="1.08" opacity="0.8" />
<rect x="72.05" y="62.38" width="2.17" height="7.23" rx="1.08" opacity="0.7" />
<rect x="77.83" y="63.83" width="2.17" height="4.34" rx="1.08" opacity="0.6" />
</svg>
sonn
</a>
<nav class="bar-nav" id="bar-nav" aria-label="Sections">
<a href="#two-ways">Two ways</a>
<a href="#signal">Signal path</a>
<a href="#content">Content</a>
<a href="#player">Player</a>
<a href="#zones">Zones</a>
<a href="#integrations">Loxone & HA</a>
<a href="#api">API</a>
<a href="#start">Get started</a>
<a href="/docs/">Docs</a>
</nav>
<button class="bar-burger" id="bar-burger" type="button" aria-label="Menu" aria-expanded="false" aria-controls="bar-nav">
<i></i><i></i><i></i>
</button>
<nav class="bar-lang" aria-label="Language">
<a class="on" href="/" aria-current="true">en</a>
<a href="/de/" lang="de" hreflang="de">de</a>
</nav>
<a class="btn btn-sm" href="https://github.com/sonn-audio/core" rel="noopener">
<svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
</svg>
GitHub
</a>
</div>
</header>
<main id="top">
<!-- ============================================================= hero -->
<section class="hero" data-amb="145">
<!-- The identity, as weather: aurora overhead, a 3D sea of samples along the ground,
and the roofline itself — engraved into the dark at architectural scale. -->
<div class="hero-aurora" aria-hidden="true"></div>
<svg class="hero-roofline" viewBox="0 0 100 40" preserveAspectRatio="none" aria-hidden="true">
<path d="M2 38 L50 6 L98 38" fill="none" stroke="currentColor" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<canvas class="hero-wave" id="wave" aria-hidden="true"></canvas>
<div class="wrap hero-in">
<div class="hero-copy" id="hero-copy">
<!-- The mark draws itself: roofline first, then its meter rises into place. -->
<svg class="hero-mark" id="hero-mark" viewBox="8 12 84 68" aria-hidden="true" fill="currentColor">
<path id="mark-roof" class="mark-roof" d="M14 46 L50 18 L86 46" fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" />
<g class="mark-bars">
<rect x="20" y="63.1" width="2.17" height="5.78" rx="1.08" fill-opacity="0.4" />
<rect x="25.78" y="59.5" width="2.17" height="13.01" rx="1.08" fill-opacity="0.6" />
<rect x="31.57" y="61.66" width="2.17" height="8.67" rx="1.08" fill-opacity="0.8" />
<rect x="37.35" y="58.05" width="2.17" height="15.9" rx="1.08" />
<rect x="46.03" y="56.6" width="2.89" height="18.8" rx="1.45" />
<rect x="54.69" y="58.05" width="2.17" height="15.9" rx="1.08" />
<rect x="60.48" y="60.94" width="2.17" height="10.12" rx="1.08" fill-opacity="0.9" />
<rect x="66.26" y="58.77" width="2.17" height="14.46" rx="1.08" fill-opacity="0.8" />
<rect x="72.05" y="62.38" width="2.17" height="7.23" rx="1.08" fill-opacity="0.7" />
<rect x="77.83" y="63.83" width="2.17" height="4.34" rx="1.08" fill-opacity="0.6" />
</g>
</svg>
<p class="eyebrow hero-eyebrow">the open audio server</p>
<!-- Each line steps out from behind its own baseline, one after the other. -->
<h1>
<span class="line" style="--l: 0"><span class="line-in">One server.</span></span>
<span class="line" style="--l: 1"><span class="line-in">Every room.</span></span>
<span class="line" style="--l: 2"><span class="line-in"><em>Your speakers.</em></span></span>
</h1>
<p class="lede">
sonn collects your music — local library, Spotify, Apple Music, Tidal, radio, even the
turntable — and plays it in sync on the speakers you already own, over almost any protocol
they speak. Or skip the rooms entirely and serve your content to every app in the house.
</p>
<div class="actions">
<button class="cmd" type="button" data-copy="docker compose up -d" aria-label="Copy: docker compose up -d">
<span class="sig">$</span>
<span>docker compose up -d</span>
<span class="copy">copy</span>
</button>
<a class="btn btn-primary" href="#start">Get started</a>
</div>
<p class="hero-facts">
<span><i class="dot" aria-hidden="true"></i>open source</span>
<span>apache-2.0</span>
<span>self-hosted</span>
<span>4.0 beta</span>
</p>
</div>
<!--
The room board, with the player's signal reading peeking out behind it — the two
cards the product actually draws, stacked like they came off a desk.
-->
<div class="stack" id="stack" aria-hidden="true">
<div class="stack-back">
<p class="stack-back-k">signal · living room</p>
<p class="stack-back-v">
<span class="chiplet perfect">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5" /></svg>
bit-perfect
</span>
<span class="mono">FLAC · 24-bit / 192 kHz</span>
</p>
<p class="stack-back-f mono">source → sendspin → endpoint · no resampler in the path</p>
</div>
<div class="panel stack-front">
<div class="panel-bar">
<i class="dot"></i>zones · live
<span class="panel-bar-right mono">4 rooms · 1 group</span>
</div>
<div class="room" data-live>
<span class="room-icon">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M4 9h4l5-5v16l-5-5H4V9zm12.5-.6a5 5 0 010 7.2l-1.1-1.1a3.5 3.5 0 000-5l1.1-1.1z" /></svg>
</span>
<span class="room-main">
<span class="room-name">Living room</span>
<span class="room-now">Bon Iver — Holocene · 24-bit / 96 kHz</span>
<span class="room-progress"><i></i></span>
</span>
<span class="meter" data-meter><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span>
</div>
<div class="room" data-live>
<span class="room-icon">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M4 9h4l5-5v16l-5-5H4V9zm12.5-.6a5 5 0 010 7.2l-1.1-1.1a3.5 3.5 0 000-5l1.1-1.1z" /></svg>
</span>
<span class="room-main">
<span class="room-name">Kitchen <span class="quiet">+ Terrace</span></span>
<span class="room-now">Radio Paradise · Main Mix</span>
</span>
<span class="tag-chip ok">grouped</span>
</div>
<div class="room" data-live>
<span class="room-icon">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 3a4 4 0 014 4v5a4 4 0 01-8 0V7a4 4 0 014-4zm-7 9h2a5 5 0 0010 0h2a7 7 0 01-6 6.93V21h-2v-2.07A7 7 0 015 12z" /></svg>
</span>
<span class="room-main">
<span class="room-name">Study</span>
<span class="room-now">Turntable · line-in · Shazam: Nina Simone</span>
</span>
<span class="tag-chip">line-in</span>
</div>
<div class="room">
<span class="room-icon">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 4a1 1 0 011 1v6.59l3.7 3.7-1.41 1.42L11 12.4V5a1 1 0 011-1zm0-2a10 10 0 100 20 10 10 0 000-20z" /></svg>
</span>
<span class="room-main">
<span class="room-name">Bedroom</span>
<span class="room-now">Idle · amp off · wakes on play</span>
</span>
<span class="meter idle"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span>
</div>
</div>
</div>
</div>
<!-- Everything it speaks, on one slowly turning belt. -->
<div class="marquee" aria-hidden="true">
<div class="marquee-track">
<span>spotify</span><i></i><span>apple music</span><i></i><span>tidal</span><i></i><span>deezer</span><i></i>
<span>youtube music</span><i></i><span>soundcloud</span><i></i><span>tunein</span><i></i><span>radio paradise</span><i></i>
<span>airplay</span><i></i><span>chromecast</span><i></i><span>sonos</span><i></i><span>snapcast</span><i></i>
<span>squeezelite</span><i></i><span>dlna</span><i></i><span>sendspin</span><i></i><span>spotify connect</span><i></i>
<span>music assistant</span><i></i><span>subsonic</span><i></i><span>loxone</span><i></i><span>mqtt</span><i></i>
<span>spotify</span><i></i><span>apple music</span><i></i><span>tidal</span><i></i><span>deezer</span><i></i>
<span>youtube music</span><i></i><span>soundcloud</span><i></i><span>tunein</span><i></i><span>radio paradise</span><i></i>
<span>airplay</span><i></i><span>chromecast</span><i></i><span>sonos</span><i></i><span>snapcast</span><i></i>
<span>squeezelite</span><i></i><span>dlna</span><i></i><span>sendspin</span><i></i><span>spotify connect</span><i></i>
<span>music assistant</span><i></i><span>subsonic</span><i></i><span>loxone</span><i></i><span>mqtt</span><i></i>
</div>
</div>
</section>
<!-- ==================================================== the spec line -->
<section class="stats-band" aria-label="The numbers" data-amb="145">
<div class="wrap stats-in">
<div class="stat">
<p class="stat-n"><b data-count="24">24</b></p>
<p class="stat-k">zones, one per room</p>
</div>
<div class="stat">
<p class="stat-n"><b data-count="192">192</b><i>kHz</i></p>
<p class="stat-k">bit-perfect, delivered untouched</p>
</div>
<div class="stat">
<p class="stat-n"><b data-count="8">8</b></p>
<p class="stat-k">output protocols</p>
</div>
<div class="stat">
<p class="stat-n"><b data-count="0">0</b></p>
<p class="stat-k">cloud required</p>
</div>
</div>
</section>
<!-- ======================================================== the gist -->
<!-- The translation layer: sonn, placed next to things a first-time visitor
already knows — and the one sentence Loxone-less visitors need to read. -->
<section class="gist" aria-label="sonn in familiar terms" data-amb="145">
<div class="wrap">
<div class="section-head rise">
<p class="eyebrow">the gist</p>
<h2 class="h2">Place it next to what you already know.</h2>
<p class="lede">
sonn sits where a few products you may know sit — it just refuses to pick one lane.
Whichever door you come in through, it is the same server behind it.
</p>
</div>
<div class="cols cols-3 mt-l">
<div class="card rise">
<p class="gist-k">if you know sonos</p>
<h3>The whole-home experience, unbranded</h3>
<p>
Grouped rooms, one app, music everywhere — without buying into one brand of speaker.
sonn does the brains; the speakers you already own do the sound.
</p>
</div>
<div class="card rise">
<p class="gist-k">if you know plex or jellyfin</p>
<h3>A media server, for music</h3>
<p>
Self-hosted, one place for everything you listen to, reachable from every app in the
house. And unlike a media server, it can also drive the rooms itself — in sync.
</p>
</div>
<div class="card rise">
<p class="gist-k">if you run loxone</p>
<h3>A drop-in Audioserver</h3>
<p>
Pair it with the Miniserver and zones, wall switches and the Loxone app just work.
And if Loxone means nothing to you: nothing here requires it.
</p>
</div>
</div>
<p class="eyebrow mt-l rise">out of the box</p>
<ul class="gist-list rise" aria-label="What it does out of the box">
<li>Every room in perfect sync</li>
<li>Spotify, Apple Music & Tidal on devices that lack them</li>
<li>Bit-perfect delivery to the endpoint</li>
<li>AirPlay & Spotify Connect target for any zone</li>
<li>The turntable, through the whole house</li>
<li>Amplifiers wake before the first note</li>
<li>Full Loxone Audio Server, drop-in</li>
<li>HTTP API, live events and MQTT</li>
</ul>
</div>
</section>
<!-- ======================================================== two ways -->
<section id="two-ways" data-num="01" data-amb="145">
<div class="wrap">
<div class="section-head rise">
<p class="eyebrow">one server, two shapes</p>
<h2 class="h2">Content server, or whole-home system. Or both.</h2>
<p class="lede">
A fresh install starts with no zones and nothing shared. What you switch on decides what it
becomes — and you can change your mind later without starting over.
</p>
</div>
<div class="doors rise">
<div class="door-panel">
<p class="door-num">01 / content only</p>
<h3 class="door-title">Serve your music to everything</h3>
<p class="door-sub">
Point your library, streaming accounts and radio at sonn, switch on how you want to reach
it, and every app and device in the house can browse and play — no rooms to configure,
nothing to manage per device.
</p>
<ul class="door-list">
<li>DLNA / UPnP MediaServer — smart TVs, receivers, network speakers</li>
<li>Subsonic API — Symfonium, Amperfy, DSub and friends</li>
<li>Network drive (WebDAV) — drag albums in with Finder or Explorer</li>
<li>Built-in web player, from any browser on the network</li>
</ul>
<p class="door-note">
Streaming services included — on devices that have no support for them of their own.
A DLNA TV has no Apple Music or Tidal app, yet it browses and plays your accounts
straight from the couch, because sonn serves them like any other content.
</p>
</div>
<span class="rule" aria-hidden="true"></span>
<div class="door-panel">
<p class="door-num">02 / multiroom</p>
<h3 class="door-title">Or own the rooms yourself</h3>
<p class="door-sub">
Add fixed zones — up to 24, one per room — and sonn drives the speakers directly: named
rooms, synchronized groups, one place to control the whole house.
</p>
<ul class="door-list">
<li>Central control from the web player, Admin UI or a Loxone app</li>
<li>Group any rooms to play in perfect sync</li>
<li>Per-zone equalizer, volume limits, favorites and recents</li>
<li>Amp power switching over GPIO, USB relay or the network, per zone or shared</li>
</ul>
<p class="door-note">
With the Loxone integration on, the Miniserver supplies the zones — sonn behaves as a
full Loxone Audio Server.
</p>
</div>
</div>
</div>
</section>
<!-- ===================================================== signal path -->
<section id="signal" data-num="02" data-amb="172">
<div class="wrap">
<div class="section-head rise">
<p class="eyebrow">the signal path</p>
<h2 class="h2">Your file, unchanged, at the speaker.</h2>
<p class="lede">
sonn is built around one idea: the audio that leaves your library should reach the player
exactly as it was recorded. Every stage that could touch it is visible per zone — and the
server does none of them unless something makes that impossible. Try it:
</p>
</div>
<div class="sig-wrap rise">
<div class="sig-controls">
<div class="sig-group">
<h4>source</h4>
<div class="chips" role="radiogroup" aria-label="Source format">
<button class="chip" role="radio" aria-checked="true" data-src="hires">FLAC 24/192</button>
<button class="chip" role="radio" aria-checked="false" data-src="cd">CD rip 16/44.1</button>
<button class="chip" role="radio" aria-checked="false" data-src="lossy">Stream 320 kbps</button>
</div>
</div>
<div class="sig-group">
<h4>output</h4>
<div class="chips" role="radiogroup" aria-label="Output type">
<button class="chip" role="radio" aria-checked="true" data-out="sendspin">Sendspin</button>
<button class="chip" role="radio" aria-checked="false" data-out="squeezelite">Squeezelite</button>
<button class="chip" role="radio" aria-checked="false" data-out="snapcast">Snapcast</button>
<button class="chip" role="radio" aria-checked="false" data-out="dlna">DLNA / UPnP</button>
<button class="chip" role="radio" aria-checked="false" data-out="cast">Chromecast</button>
<button class="chip" role="radio" aria-checked="false" data-out="sonos">Sonos</button>
<button class="chip" role="radio" aria-checked="false" data-out="airplay">AirPlay</button>
</div>
</div>
<div class="sig-group">
<h4>processing</h4>
<div class="chips">
<button class="chip" aria-pressed="false" data-eq>Equalizer</button>
</div>
</div>
</div>
<div class="sig-stage-wrap">
<div class="chain" id="chain">
<div class="node">
<p class="node-k">source</p>
<p class="node-v" id="n-src">Library</p>
<p class="node-f" id="n-src-f">FLAC · 24-bit / 192 kHz</p>
</div>
<span class="link" style="--d: 0s"></span>
<div class="node" id="n-resample">
<p class="node-k">resampler</p>
<p class="node-v">SoX · 28-bit</p>
<p class="node-f" id="n-resample-f">bypassed</p>
</div>
<span class="link" style="--d: 0.5s"></span>
<div class="node" id="n-eq">
<p class="node-k">equalizer</p>
<p class="node-v">10-band</p>
<p class="node-f" id="n-eq-f">bypassed</p>
</div>
<span class="link" style="--d: 1s"></span>
<div class="node" id="n-vol">
<p class="node-k">volume</p>
<p class="node-v">On the device</p>
<p class="node-f">never in the stream</p>
</div>
<span class="link" style="--d: 1.5s"></span>
<div class="node endpoint">
<p class="node-k" id="n-out-k">sendspin</p>
<p class="node-v" id="n-out">Endpoint</p>
<p class="node-f" id="n-out-f">24-bit / 192 kHz</p>
</div>
</div>
<div class="verdict">
<span class="verdict-badge" data-v="perfect" id="verdict">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M20 6L9 17l-5-5" />
</svg>
<span id="verdict-label">bit-perfect</span>
</span>
<p class="verdict-why" id="verdict-why">
A Sendspin endpoint announces the formats it accepts, and this one accepts the source's
own — so the server sends exactly that: the file's own samples arrive at the endpoint,
untouched. Nothing in the chain gets a vote — and after the handoff, the chain is yours.
</p>
</div>
</div>
</div>
<!-- The chapter's conclusion: the one output where the simulator above can only ever say bit-perfect. -->
<aside class="spin-love rise">
<p class="eyebrow">sonn ♥ sendspin</p>
<h3 class="h3">The preferred output — nothing in the chain gets a vote.</h3>
<p>
A Sendspin client announces the sample rates and bit depths it accepts, in order of
preference, and the server picks the stream format per track. sonn uses that freedom to
follow the <em>source</em>: a 24-bit/192 kHz FLAC travels as 24-bit/192 kHz, a CD
rip as 16-bit/44.1 kHz — no resampler in the path at all. The endpoint receives the
file's own samples, untouched. Everything after that — the DAC, the amplifier — is yours,
which is exactly how bit-perfect should work.
</p>
<p>
The rest of the house shares the ambition: sonn follows the source on every output
whose protocol can switch formats, and converts only where a fixed format is forced —
AirPlay's 44.1 kHz, a speaker that tops out at 48 — once, well: SoX at 28-bit
precision. What makes Sendspin the preferred output is everything around that: the
format is negotiated per track and guaranteed, and it carries more than playback — the
visualizer role streams live analysis for VU meters and light scenes, and the source
role brings line-in devices in, a part of the spec that started life here, in sonn.
</p>
</aside>
<p class="sig-foot rise">
The player carries this reading for every zone, live — a view inside it rather than a
second app: the source format, every stage that touched the audio, and the verdict.
<em>Bit-perfect</em>, <em>untouched</em>, or <em>altered</em> — with the reason. And if you just
want music: use whatever output you already have. All of it works, all of it sounds good, and
none of it needs a thought about sample rates.
</p>
</div>
</section>
<!-- ========================================================= content -->
<section id="content" data-num="03" data-amb="145">
<div class="wrap">
<div class="section-head rise">
<p class="eyebrow">content</p>
<h2 class="h2">Everything you listen to, in one place.</h2>
<p class="lede">
Every source is available to every consumer of the server — the web player, Loxone, DLNA
devices and Subsonic apps alike. Configure it once, reach it from everywhere.
</p>
</div>
<div class="cols cols-3 mt-l">
<div class="card rise">
<span class="card-ico">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M3 7l9-4 9 4v10l-9 4-9-4V7z" /><path d="M3 7l9 4 9-4M12 11v10" />
</svg>
</span>
<h3>Local library</h3>
<p>
Folders and network shares, indexed by tags into albums, artists and tracks — with cover
art, and artist pictures fetched automatically.
</p>
<ul>
<li>Incremental indexing — a dropped file just appears</li>
<li>Add music by drag-and-drop, or over the network drive</li>
<li>Browse, search and manage from the Admin UI</li>
</ul>
</div>
<div class="card rise">
<span class="card-ico">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<circle cx="12" cy="12" r="9" /><path d="M8 9.5c2.5-.9 5.5-.7 8 .8M8.3 12.7c2-.7 4.4-.5 6.4.7M8.6 15.7c1.6-.5 3.4-.4 5 .5" />
</svg>
</span>
<h3>Streaming services</h3>
<p>
Spotify, Apple Music, Tidal, Deezer, YouTube Music, YouTube, SoundCloud — and Music
Assistant as a source, exposing its own providers.
</p>
<ul>
<li>Several accounts of one service can coexist</li>
<li>Each account is its own browsable service</li>
<li>Served on to Loxone, DLNA and Subsonic too</li>
</ul>
</div>
<div class="card rise">
<span class="card-ico">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M4 11a8 8 0 0116 0" /><path d="M2 18a10 10 0 0120 0" opacity="0.5" /><circle cx="12" cy="17" r="2.4" fill="currentColor" stroke="none" />
</svg>
</span>
<h3>Radio</h3>
<p>
The TuneIn directory, Radio Paradise and your own custom streams — with artwork, through
any zone and any app in the house.
</p>
<ul>
<li>TuneIn presets, and search across the full directory</li>
<li>Custom streams, with your own cover art</li>
</ul>
</div>
<div class="card rise">
<span class="card-ico">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M9 3v5M15 3v5" /><rect x="7" y="8" width="10" height="6" rx="2" /><path d="M12 14v7" />
</svg>
</span>
<h3>Line-in</h3>
<p>
The turntable or CD player, through any zone — carried in by the Sendspin source role
on a <a href="/docs/sonn-client/">Sonn Client</a> next to the equipment, or pushed to
a line-in's own WebSocket or TCP address.
</p>
<ul>
<li>Optional Shazam track recognition</li>
<li>Play, pause and skip are forwarded to the device — when it can be driven over the network</li>
<li>B&O Masterlink gives full control — play, pause, next, previous, and a Beosound 9000 even changes discs on command</li>
</ul>
</div>
<div class="card card-wide rise">
<span class="card-ico">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M3 10v4h4l6 5V5l-6 5H3z" /><path d="M17 9c1.2 1.6 1.2 4.4 0 6" /><path d="M19.5 6.5c2.4 3 2.4 8 0 11" opacity="0.5" />
</svg>
</span>
<h3>Announcements & alerts</h3>
<p>
Text-to-speech and alert sounds through any zone — the music ducks, the message plays,
the music returns. Built for home automation, and fully part of the API.
</p>
<ul>
<li>One call from your automation: <code>POST /zones/3/announce</code></li>
<li>Doorbell, alarm, dinner call — TTS built in, LoxBerry TTS over MQTT if you prefer</li>
<li>Loxone-native when paired: bell, alarm, fire and TTS behave like the original</li>
</ul>
</div>
</div>
</div>
</section>
<!-- ========================================================== player -->
<section id="player" data-num="04" data-amb="158">
<div class="wrap">
<div class="split">
<div class="rise">
<p class="eyebrow">the web player</p>
<h2 class="h2">The whole house, from any browser.</h2>
<p class="lede">
The server serves its own player — open <code>:7090</code> on a phone, a laptop or the
wall panel and every room is there. Nothing to install, nothing to update, and it can
never be out of date: it comes from the same box that plays the music.
</p>
<dl class="rows">
<div class="row">
<dt>A page per record</dt>
<dd>
On a desk the sleeve is the left page and the record's own colour is the right: the
artist, the name, the album it came from, what is next, and every room along the
foot. The name is measured into its place, so a long one never shifts the page under
it — and one record dissolves into the next rather than cutting.
</dd>
</div>
<div class="row">
<dt>Search everything at once</dt>
<dd>
One search across your library and every connected service, bucketed by kind. Find a
track, tap it, and it plays in the room you have selected.
</dd>
</div>
<div class="row">
<dt>A catalogue laid out like a shelf</dt>
<dd>
Every service behind its own mark, with what this room played lately underneath. An
artist gets a page of their records rather than a numbered list, and a library of
hundreds files itself under its letters — with a rail down the side to jump.
</dd>
</div>
<div class="row">
<dt>Favourites from any row</dt>
<dd>
A heart sits on everything that can play — browse results, search hits, queue entries,
recents — and adds it to the zone's favourites: the same ones a Loxone wall switch or
a Beoremote cycles through.
</dd>
</div>
<div class="row">
<dt>The queue, grouping and a 10-band EQ</dt>
<dd>
Reorder what plays next, pull rooms into a group mid-song, shape a zone with its own
equalizer — and see the true stream format of every room, down to the
<a class="hl" href="#signal">bit-perfect verdict</a>.
</dd>
</div>
<div class="row">
<dt>Always in agreement</dt>
<dd>
Two phones, the wall panel and the Loxone app all show the same state, live — nothing
polls, and an edit made anywhere appears everywhere.
</dd>
</div>
</dl>
</div>
<!-- The player itself: a real screenshot, real pixels — nothing drawn around it. -->
<div class="phone-wrap reveal">
<figure class="player-shot">
<img src="assets/shots/player-mobile.png" width="780" height="1688" alt="The sonn web player on a phone: the sleeve to both edges, the name under it, the transport and the room's fader" loading="lazy" />
</figure>
</div>
</div>
<!-- Real pixels again, on a desk: the stage, where the sleeve is a whole page. -->
<figure class="shot reveal">
<div class="slab-chrome" aria-hidden="true"><i></i><i></i><i></i><span>player · stage · living room</span></div>
<img src="assets/shots/player-desktop.jpg" width="3024" height="1890" alt="The sonn web player on a desktop: the album sleeve fills the left page, the right page carries the artist, the title, the timeline, the transport and the other rooms" loading="lazy" />
<figcaption class="shot-caption mono">the stage — the sleeve is the left page, the record's own colour the right</figcaption>
</figure>
</div>
</section>
<!-- =========================================================== zones -->
<section id="zones" data-num="05" data-amb="145">
<div class="wrap">
<div class="section-head rise">
<p class="eyebrow">zones & outputs</p>
<h2 class="h2">The speakers you already own are the system.</h2>
<p class="lede">
A zone is one device in one room. sonn speaks to nearly anything that can make sound — and a
zone can also <em>receive</em>: point AirPlay or Spotify Connect at an old amplifier, and
it just works.
</p>
</div>
</div>
<!--
The mark, unfolded — as scrollytelling. The logo is a roofline over a level meter;
scroll, and this drawing performs its own construction: the roof draws itself, the
server boots in the basement, packets rise, and the rooms come online one by one.
Without JS (or with reduced motion) the finished scene simply stands there.
-->
<div class="scrolly" id="house-scrolly">
<div class="scrolly-pin">
<div class="wrap">
<figure class="house" aria-label="A house with five rooms playing music from one sonn server in the basement">
<svg viewBox="0 0 640 476" role="img">
<!-- roofline — the logo's own stroke, drawn live -->
<path class="h-roof" id="h-roof" d="M36 168 L320 30 L604 168" />
<!-- shell -->
<g class="h-shell" id="h-shell">
<rect class="h-wall" x="68" y="168" width="504" height="276" rx="6" />
<line class="h-line" x1="68" y1="288" x2="572" y2="288" />
<line class="h-line" x1="68" y1="400" x2="572" y2="400" />
<line class="h-line" x1="236" y1="168" x2="236" y2="288" />
<line class="h-line" x1="404" y1="168" x2="404" y2="288" />
<line class="h-line" x1="320" y1="288" x2="320" y2="400" />
</g>
<!-- packet risers: the audio leaving the basement for each room -->
<g class="h-risers" id="h-risers" aria-hidden="true">
<line class="h-riser" x1="152" y1="400" x2="152" y2="252" />
<line class="h-riser" x1="320" y1="400" x2="320" y2="252" />
<line class="h-riser" x1="488" y1="400" x2="488" y2="252" />
<line class="h-riser" x1="194" y1="400" x2="194" y2="360" />
<line class="h-riser" x1="446" y1="400" x2="446" y2="360" />
<circle class="h-pkt" cx="152" cy="396" r="2.2" style="--dy: -140px; --dur: 3.4s; --del: 0s" />
<circle class="h-pkt" cx="320" cy="396" r="2.2" style="--dy: -140px; --dur: 3.4s; --del: 1.3s" />
<circle class="h-pkt" cx="488" cy="396" r="2.2" style="--dy: -140px; --dur: 3.4s; --del: 2.2s" />
<circle class="h-pkt" cx="194" cy="396" r="2.2" style="--dy: -32px; --dur: 1.9s; --del: 0.6s" />
<circle class="h-pkt" cx="446" cy="396" r="2.2" style="--dy: -32px; --dur: 1.9s; --del: 1.6s" />
</g>
<!-- upstairs: bedroom (idle) · study (line-in) · bath -->
<g class="h-room" data-room="bedroom">
<text class="h-label" x="86" y="192">bedroom</text>
<text class="h-sub" x="86" y="206">idle · amp off</text>
<g class="h-meter is-idle" transform="translate(138 236)">
<rect x="0" y="-10" width="3" height="10" rx="1.5" />
<rect x="7" y="-14" width="3" height="14" rx="1.5" />
<rect x="14" y="-8" width="3" height="8" rx="1.5" />
<rect x="21" y="-12" width="3" height="12" rx="1.5" />
</g>
<circle class="h-spk is-idle" cx="152" cy="248" r="3.4" />
</g>
<g class="h-room" data-room="study">
<text class="h-label" x="254" y="192">study</text>
<text class="h-sub" x="254" y="206">turntable · line-in</text>
<g class="h-meter" transform="translate(306 236)">
<rect class="m m1" x="0" y="-10" width="3" height="10" rx="1.5" />
<rect class="m m2" x="7" y="-14" width="3" height="14" rx="1.5" />
<rect class="m m3" x="14" y="-8" width="3" height="8" rx="1.5" />
<rect class="m m4" x="21" y="-12" width="3" height="12" rx="1.5" />
</g>
<circle class="h-spk" cx="320" cy="248" r="3.4" />
<circle class="h-ring" cx="320" cy="248" r="3.4" />
</g>
<g class="h-room" data-room="bath">
<text class="h-label" x="422" y="192">bath</text>
<text class="h-sub" x="422" y="206">airplay receiver</text>
<g class="h-meter" transform="translate(474 236)">
<rect class="m m2" x="0" y="-10" width="3" height="10" rx="1.5" />
<rect class="m m4" x="7" y="-14" width="3" height="14" rx="1.5" />
<rect class="m m1" x="14" y="-8" width="3" height="8" rx="1.5" />
<rect class="m m3" x="21" y="-12" width="3" height="12" rx="1.5" />
</g>
<circle class="h-spk" cx="488" cy="248" r="3.4" />
<circle class="h-ring" cx="488" cy="248" r="3.4" />
</g>
<!-- downstairs: living room + kitchen, grouped and in sync -->
<g class="h-room" data-room="living">
<text class="h-label" x="86" y="312">living room</text>
<text class="h-sub" x="86" y="326">sendspin · 24/96</text>
<g class="h-meter is-grouped" transform="translate(180 372)">
<rect class="m m1" x="0" y="-10" width="3" height="10" rx="1.5" />
<rect class="m m2" x="7" y="-14" width="3" height="14" rx="1.5" />
<rect class="m m3" x="14" y="-8" width="3" height="8" rx="1.5" />
<rect class="m m4" x="21" y="-12" width="3" height="12" rx="1.5" />
</g>
<circle class="h-spk is-grouped" cx="194" cy="384" r="3.4" />
<circle class="h-ring is-grouped" cx="194" cy="384" r="3.4" />
</g>
<g class="h-room" data-room="kitchen">
<text class="h-label" x="338" y="312">kitchen</text>
<text class="h-sub" x="338" y="326">chromecast</text>
<!-- identical delays on purpose: grouped rooms march in step -->
<g class="h-meter is-grouped" transform="translate(432 372)">
<rect class="m m1" x="0" y="-10" width="3" height="10" rx="1.5" />
<rect class="m m2" x="7" y="-14" width="3" height="14" rx="1.5" />
<rect class="m m3" x="14" y="-8" width="3" height="8" rx="1.5" />
<rect class="m m4" x="21" y="-12" width="3" height="12" rx="1.5" />
</g>
<circle class="h-spk is-grouped" cx="446" cy="384" r="3.4" />
<circle class="h-ring is-grouped" cx="446" cy="384" r="3.4" />
</g>
<!-- the group, drawn: one marching line between the two speakers -->
<g class="h-groupline" id="h-groupline">
<path class="h-group" d="M206 384 H434" />
<text class="h-group-label" x="320" y="376">grouped · in sync</text>
</g>
<!-- the basement: where the server lives -->
<g class="h-core" id="h-core">
<rect class="h-core-box" x="68" y="400" width="504" height="44" />
<circle class="h-core-dot" cx="94" cy="422" r="3" />
<text class="h-core-name" x="108" y="426">sonn core</text>
<text class="h-core-meta" x="546" y="426" text-anchor="end">24 zones max · :7090</text>
</g>
</svg>
<figcaption class="house-caption mono" id="house-caption">
one server in the basement, every room in sync
</figcaption>
</figure>
</div>
</div>
</div>
<div class="wrap">
<div class="tiles rise" aria-label="Supported outputs">
<div class="tile star">
<span class="glyph">SP</span>
<span><b>Sendspin</b></span>
</div>
<div class="tile">
<span class="glyph">CC</span>
<span><b>Chromecast</b></span>
</div>
<div class="tile">
<span class="glyph">SN</span>
<span><b>Sonos</b></span>
</div>
<div class="tile">
<span class="glyph">AP</span>
<span><b>AirPlay</b></span>
</div>
<div class="tile">
<span class="glyph">DL</span>
<span><b>DLNA / UPnP</b></span>
</div>
<div class="tile">
<span class="glyph">SC</span>
<span><b>Snapcast</b></span>
</div>
<div class="tile">
<span class="glyph">SQ</span>
<span><b>Squeezelite</b></span>
</div>
<div class="tile">
<span class="glyph">MA</span>
<span><b>Music Assistant</b></span>
</div>
</div>
<dl class="rows rise">
<div class="row">
<dt>Receivers</dt>
<dd>
A receiver lets a phone or app play <em>to</em> a zone: the stream lands on the server,
which sends it on to that zone's output. A pair of Snapcast speakers on a
Raspberry Pi shows up as an AirPlay target with no support of its own — and one
zone can offer them all at once.
<span class="receiver-chips" aria-label="Available receivers">
<span class="tag-chip ok">spotify connect</span>
<span class="tag-chip ok">airplay</span>
<span class="tag-chip ok">dlna</span>
<span class="tag-chip ok">line-in</span>
<span class="tag-chip ok">music assistant</span>
</span>
</dd>
</div>
<div class="row">
<dt>Grouping</dt>
<dd>
Any rooms play in sync, regrouped on the fly. The kitchen joins the terrace for dinner and
leaves again after — from the app, the wall panel, or a Loxone scene.
</dd>
</div>
<div class="row">
<dt>Power management</dt>
<dd>
A zone can wake its amplifier before the first note and switch it off after the music
stops — a GPIO line, a USB relay, or a network switch driven over HTTP or UDP — per
zone or per shared amp group, with pre-delays and off-delays so short gaps never
cycle the hardware.
</dd>
</div>
<div class="row">
<dt>A Raspberry Pi becomes a room</dt>
<dd>
<a href="/docs/sonn-client/">Sonn Client</a> is one command on a Pi: it registers
itself, reports its sound cards, and waits here to be given a room. The same box can
also carry the turntable in as a line-in, take a phone over Bluetooth, or serve a
Bang & Olufsen remote — each switched on separately, and none of it configured on
the device.
</dd>
</div>
<div class="row">
<dt>This browser is a room</dt>
<dd>
The web player registers itself as a local destination: select it and play, and it plays
here — driven by exactly the same controls as the hardware zones.
</dd>
</div>
</dl>
<!-- The Beoremote One. What matters is the display: the menu on it comes from this server. -->
<div class="split remote-split rise">
<div>
<p class="eyebrow">beoremote one</p>
<h3 class="h3">Bidirectional control with the Beoremote One.</h3>
<p class="remote-p">
Radio stations and room favourites appear directly as playable items on the remote's
screen — the server builds the list, the remote plays from it. Every coloured and dot
button starts something in the room, and play, pause and skip route to whatever is
playing, including a line-in device that can be driven.
</p>
<p class="remote-p">
Volume stays on the device itself, so it keeps working even when the server is briefly
unreachable. The remote pairs over Bluetooth with a <a href="/docs/sonn-client/">Sonn
Client</a> in the room — a Raspberry Pi, one command — which serves the menu and
forwards the keys; once it runs, you only pick which remote belongs to which zone. A
Beoremote Essence works there too.
</p>
</div>
<figure class="remote-photo rise">
<img src="assets/shots/beoremote-cut.png" width="363" height="377" alt="A Bang & Olufsen Beoremote One, close up: the display lists the sources" loading="lazy" />
<figcaption class="shot-caption mono">beoremote one — the list on it comes from the server</figcaption>
</figure>
</div>
<!-- Real pixels: the Admin UI's Zones screen, exactly as it ships. -->
<figure class="shot reveal">
<div class="slab-chrome" aria-hidden="true"><i></i><i></i><i></i><span>admin · zones · live</span></div>
<img src="assets/shots/zones-web.jpg" width="1920" height="1260" alt="The sonn Admin UI Zones screen: four zones named Living room, Kitchen, Study and Bedroom, each with AirPlay, Spotify Connect and DLNA receiver chips" loading="lazy" />
<figcaption class="shot-caption mono">zones — one per room, receivers on every one</figcaption>
</figure>
</div>
</section>
<!-- ==================================================== integrations -->
<section id="integrations" data-num="06" data-amb="38">
<div class="wrap">
<div class="split">
<div class="rise">
<p class="eyebrow">loxone</p>
<h2 class="h2">A drop-in Loxone Audio Server.</h2>
<p class="lede">
Not an add-on that talks to Loxone — a complete Audioserver implementation. Pair it with a
Miniserver and it behaves like the real thing: zones, sources, favorites, alerts and the
native Loxone app, with up to 24 zones — the same ceiling as the original.
</p>
<!-- The pairing, as it looks from the network: the Miniserver and sonn find each
other, the handshake crosses the wire both ways, and the icon turns green. -->
<div class="pairing" aria-hidden="true">
<div class="pair-box">
<span class="pair-k">miniserver</span>
<svg class="pair-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="6" width="18" height="12" rx="2" /><path d="M7 10h.01M7 14h.01M11 10h6M11 14h4" />
</svg>
</div>
<div class="pair-wire">
<i class="pair-pkt to"></i>
<i class="pair-pkt fro"></i>
<span class="pair-status mono">pairing…</span>
</div>
<div class="pair-box">
<span class="pair-k">sonn core</span>
<svg class="pair-ico pair-mark" viewBox="8 12 84 68" fill="currentColor">
<path d="M14 46 L50 18 L86 46" fill="none" stroke="currentColor" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" />
<rect x="31.57" y="61.66" width="3.5" height="8.67" rx="1.7" opacity="0.8" />
<rect x="40" y="58.05" width="3.5" height="15.9" rx="1.7" />
<rect x="48.5" y="56.6" width="3.5" height="18.8" rx="1.7" />
<rect x="57" y="58.05" width="3.5" height="15.9" rx="1.7" />
<rect x="65.5" y="61.66" width="3.5" height="8.67" rx="1.7" opacity="0.8" />
</svg>
</div>
</div>
<ol class="steps">
<li><span>Choose <em>Loxone integrated</em> under Zones — the server starts listening immediately.</span></li>
<li><span>Add the Audio Server in Loxone Config with the serial and host from the Admin UI.</span></li>
<li><span>Deploy and reboot the Miniserver. The icon turns green, and your zones arrive.</span></li>