182 lines
7.8 KiB
HTML
182 lines
7.8 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Qudio - A QR-enabled Audio Player for Children</title>
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.css" />
|
|
|
|
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,800' rel='stylesheet' type='text/css' />
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700" rel="stylesheet" type='text/css'>
|
|
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
|
|
|
|
<style type="text/css" media="all">
|
|
<!--
|
|
body {
|
|
background-color: #FFFFFF;
|
|
color: black;
|
|
font-family: 'Roboto Slab', serif;
|
|
font-size: 160%;
|
|
}
|
|
|
|
p {
|
|
margin-top: 1.5em;
|
|
}
|
|
|
|
h1 {
|
|
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
font-weight: 800;
|
|
text-align: center;
|
|
color: #303030;
|
|
}
|
|
|
|
h2, h3, h4 {
|
|
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
font-weight: 800;
|
|
color: #303030;
|
|
margin-top: 1em;
|
|
}
|
|
|
|
#subtitle {
|
|
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
font-weight: 800;
|
|
font-weight: 800;
|
|
text-align: center;
|
|
color: #303030;
|
|
font-size: 120%;
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
.gallery {
|
|
text-align: center;
|
|
margin-top: 2em;
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
.timestamp {
|
|
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
text-align: right;
|
|
color: #888;
|
|
margin-top: 2em;
|
|
}
|
|
|
|
.fancybox-title {
|
|
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
.fancybox-caption {
|
|
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
}
|
|
-->
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.js"></script>
|
|
|
|
<div id="content" class="container">
|
|
<h1>Qudio Player</h1>
|
|
|
|
<h2>Inbetriebnahme</h2>
|
|
<p>
|
|
Sobald das Netzteil eingesteckt wird, fährt der Player hoch. Damit man auch etwas hören kann, muss außerdem der Power-Button auf der Rückseite versenkt sein, so dass die grüne LED auf der Vorderseite leuchtet.
|
|
Der Lautsprecher geht automatisch in Stand-By, wenn eine Weile lang kein Signal kam (dann erlischt das grüne Licht). Man kann das Gerät im Normalfall also einfach anlassen.
|
|
</p>
|
|
|
|
<a data-fancybox style="float:right;margin: 2em;" href="images/qudio-assistant.png"><img src="images/qudio-assistant.png" width="240" /></a>
|
|
|
|
<p>
|
|
Nach zwei bis drei Minuten ist das Gerät gestartet. Wenn kein bekanntes WLAN-Netzwerk gefunden wird, öffnet der Player einen Hotspot namens <em>volumio</em>, mit dem man sich z.B. mit dem Smartphone verbinden kann.
|
|
</p>
|
|
|
|
<p>
|
|
Sobald man sich mit dem Hotspot verbunden hat, öffnet sich die Bedienoberfläche. Am einfachsten ist es, über das Zahnrad auf der rechten Seite die Einstellungen zu öffnen und im Untermenü <em>SYSTEM</em> den Einrichtungsassistenten erneut auszuführen.
|
|
</p>
|
|
|
|
<p>
|
|
Der Assistent fragt den Gerätenamen und die WLAN-Einstellungen. Als Ausgabegerät muss <em>Generic I2S DAC</em> ausgewählt bleiben. Netzlaufwerke können natürlich erst verbunden werden, wenn der Player sie über das WLAN erreichen kann.
|
|
</p>
|
|
|
|
<p>
|
|
Wenn der Player ins lokale WLAN eingebunden ist, kann man ihn über <em>hostname.local</em> erreichen, voreingestellt ist <a href="http://qudio.local">http://qudio.local</a>. Jetzt kann man in den Einstellungen unter <em>MEINE MUSIK</em> Netzlaufwerke hinzufügen oder unter <em>PLUGINS</em> Erweiterungen für Dienste wie Spotify oder Youtube installieren.
|
|
</p>
|
|
|
|
<h2>Musik abspielen</h2>
|
|
|
|
<p>
|
|
Zum Abspielen wird einfach eine Karte mit dem QR-Code nach unten auf das Fenster an der Oberseite des Players gelegt. Sobald der Infrarot-Sensor abgedeckt ist, wird die Beleuchtung im Innern angeschaltet und der Erkennungsprozess gestartet. Wenn ein QR-Code erkannt wird, erlischt das Licht und die Musik wird abgespielt. Ansonsten gibt das Gerät nach vier Sekunden ein enttäuschtes Quaken von sich.
|
|
</p>
|
|
|
|
<p>
|
|
Hier führt Jacob das mal vor:
|
|
</p>
|
|
|
|
<div style="text-align:center">
|
|
<iframe src="https://player.vimeo.com/video/318207633" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
|
|
</div>
|
|
|
|
<p>
|
|
Natürlich kann man auch über die Weboberfläche Musik aus der Bibliothek zum Abspielen auswählen.
|
|
</p>
|
|
|
|
<h2>Musik hinzufügen</h2>
|
|
|
|
<p>
|
|
Am einfachsten kann man Musik der Bibliothek hinzufügen, indem man ein Netzlaufwerk in den Einstellungen verbindet. Das Verzeichnis wird automatisch nach Inhalten durchsucht, die man dann zum Abspielen auswählen kann.
|
|
</p>
|
|
|
|
<p>
|
|
Webstreams kann man in der Musikbibliothek unter <em>Internetradio</em> aus dem Verzeichnis heraussuchen oder direkt per URL unter <em>Meine Radiosender</em> hinzufügen.
|
|
</p>
|
|
|
|
<p>
|
|
Eine weitere Möglichkeit sind Streaming-Dienste wie Spotify oder Youtube, auf die über Plugins zugegriffen werden kann. Zum Abspielen von Spotify wird ein Premium-Account benötigt, die Zugangsdaten konfiguriert man in den Plugin-Einstellungen.
|
|
</p>
|
|
|
|
<p>
|
|
Zu guter Letzt können Inhalte auch direkt auf der Speicherkarte abgelegt werden. Wenn man den Player nicht gerade auseinander bauen will, muss man sich dafür über SSH verbinden.
|
|
Der Zugang via SSH kann auf der Seite <a href="http://qudio.local/dev">http://qudio.local/dev</a> aktiviert werden, Benutzername und Passwort sind <em>volumio</em>.
|
|
Alles, was im Verzeichnis <code>/data/INTERNAL</code> abgelegt wird, taucht in der Musikbibliothek auf, nachdem man in den Einstellungen unter <em>MEINE MUSIK</em> einen Rescan durchgeführt hat.
|
|
</p>
|
|
|
|
<h2>Neue Karten</h2>
|
|
|
|
<p>
|
|
Der Code auf den Karten kann auf eine URI, eine Datei oder ein Verzeichnis verweisen.
|
|
</p>
|
|
|
|
<h3>URIs</h3>
|
|
|
|
<p>
|
|
Stream-Adressen von Webradios können dem Player direkt per QR-Code übergeben werden, z.B. <code>http://stream.laut.fm/kinderradio</code>. Außerdem werden Spotify-URIs erkannt und abgespielt, sofern das Plugin installiert und konfiguriert ist. Die Spotify-URI kann man für jedes Album/Track/Playlist über das <em>Share</em>-Menü abrufen.
|
|
</p>
|
|
|
|
<h3>Verzeichnisse und einzelne Dateien</h3>
|
|
|
|
<p>
|
|
Der Pfad zum Verzeichnis muss wie in der Musikbibliothek angegeben werden, also z.B. <code>INTERNAL/qudio/sounds/armstrong.mp3</code> oder <code>NAS/share/Kinder/Der Grüffelo</code>. Wenn man nicht sicher ist, kann man die Musik über die Weboberfläche aus der Bibliothek starten und dann unter <a href="http://qudio.local/dev">/dev</a> nachschauen, welche URI in der aktellen Abspielliste steht.
|
|
</p>
|
|
|
|
<a data-fancybox style="float:right;margin: 2em;" href="images/curb.png"><img src="images/curb.png" width="320" /></a>
|
|
|
|
<p>
|
|
Das Umwandeln in einen QR-Code kann man mit jedem beliebigen Generator machen; online z.B. mit <a href="http://goqr.me/de/">http://goqr.me/de/</a>. (Der Player akzeptiert Codes in UTF-8-Codierung, so dass Umlaute und Sonderzeichen im Pfad keine Probleme machen, solange sie korrekt kodiert sind.)
|
|
</p>
|
|
|
|
<h3>Maße</h3>
|
|
|
|
<p>
|
|
Die Auflagefläche für die Karten ist 34 cm breit. In der Regel ist es eine gute Idee, Karten mit 33 cm Breite zu drucken, damit sie etwas Spielraum haben. Außerdem passen dann exakt 9 Karten nebeneinander auf ein DIN-A4-Blatt. Der QR-Code ist 10 mm breit und hat einen Abstand von 16 mm zur Oberkante der Karte.
|
|
</p>
|
|
|
|
<p>
|
|
Für die Karten gibt es eine <a href="misc/QR-Card_Template.odt">Vorlage für Open/Libre Office</a>. Um größere Mengen an Karten mit möglichst wenig Aufwand zu erzeugen, habe ich einen Generator geschrieben, der eine Liste von Verzeichnissen nach Covern durchsucht und die Karten mit den Codes automatisch erzeugt. Ich versuche, den Generator demnächst mal online zu stellen.
|
|
</p>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|