229 lines
11 KiB
HTML
229 lines
11 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" />
|
|
|
|
<meta property="og:url" content="http://tilman.de/projekte/qudio/" />
|
|
<meta property="og:title" content="Qudio - a QR-enabled Audio Player for Children" />
|
|
<meta property="og:description" content="After building the first version of this music player for my oldest son in 2016, I recently had to update my project for his younger brother. As before, music can be played by simply placing a card with a QR code on the player. The new version has a improved case and is cheaper and easier to build. Internally it uses the volumio player which allows to not only play all MP3s from the local network, but also to connect streaming services like Spotify. Oh, an there is a rocket again, too. But this time it is optional." />
|
|
<meta property="og:image" content="http://tilman.de/projekte/qudio/images/qudio-01-space.jpg" />
|
|
|
|
<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=Lora:400,400italic,700,700italic' 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;
|
|
}
|
|
|
|
a > img {
|
|
margin: 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">
|
|
<p class="timestamp">2019-01-20</p>
|
|
<h1>Qudio Player</h1>
|
|
<p id="subtitle">An easy-to-use music player for children based on the Raspberry Pi Zero and the JBL On Stage IIIp (again)</p>
|
|
|
|
<p class="well" style="text-align: center;">In spring 2016 I finalized the <a href="http://tilman.de/projekte/musikrakete/">"Musikrakete"</a>, an MP3 player that our boys could operate without assistance. Later on, there was a <a href="http://www.tilman.de/projekte/audiosphere/">second version</a>. This is the third version, with all of the improvements I came up with during the last three years. It is easier and cheaper to build, the case is way smaller and much more robust and by switching to volumio the player now supports remote control from the phone and streaming services like Spotify. This is all combined with the existing features like playing MP3s from the local network and, most importantly, being easy to use even for small children. So if your children love music and audio books just like mine, this might be a project for you.</p>
|
|
|
|
<h2 id="history">The Idea</h2>
|
|
|
|
<a data-fancybox style="float:right;" href="images/qudio-01-space.jpg" data-caption="The Qudio player (with the additional rocket). The QR cards are placed on the window on top of the case, where they are detected by a photo sensor that triggers the recognition process. After the code has been read by the webcam, the stream or MP3s it point to start playing."><img src="images/qudio-01-space.jpg"
|
|
width="480" alt="The Qudio player (with the additional rocket). The QR cards are placed on the window on top of the case, where they are detected by a photo sensor that triggers the recognition process. After the code has been read by the webcam, the stream or MP3s it point to start playing." /></a>
|
|
</p>
|
|
|
|
<p>
|
|
This project started in 2016, when Anica asked me if buying a <a href="https://de-de.hoerbert.com/">hörbert</a> MP3 player would be a good idea. At the time our boys wasted two to three CDs every week, trying to get some music out of the small player in their room. And the player in the living room also seemed to reach its end of life pretty soon due to their enthusiasm. Still I wasn't too sure about this hörbert thing. In order to get new files on the SD card of the player, the case had to be opened, the navigation with 11 buttons seemed a little confusing and a single speaker operated with four batteries also did not seem promising to me.
|
|
</p>
|
|
|
|
<p>
|
|
I had seen a <a href="http://www.die-schembergs.de/index.php?page=qr-music">project description of an MP3 player for small children</a> shortly before: A Raspberry Pi mini computer, connected to a webcam and speakers, reads QR codes and plays the respective track or playlist. So this was what I suggested and to my surprise it was considered a better solution right away. And I had a project.
|
|
</p>
|
|
|
|
<p>
|
|
As good as the project description seemed to be, I wanted to make some improvements on the original design: The player should detect the QR automatically, it should have buttons for play/pause and skipping and all components should be put together in a single case. Most importantly, the MP3 files should be delivered directly from our home server. No SD card replacement needed.
|
|
</p>
|
|
|
|
<p>
|
|
Since we had an old <a href="https://www.manualslib.com/manual/684236/Jbl-On-Stage-Iiip.html">JBL <em>On Stage IIIp</em></a> speaker lying around that wasn't used anymore due to its outdated iPhone dock connector, I decided to use this as a base. After playing around with <a href="https://www.onshape.com/">Onshape</a>, soldering and programming for three months, I had the <a href="http://tilman.de/projekte/musikrakete/">Musikrakete</a> ready by end of March 2016. It was a huge success with the boys and has been in heavy use ever since.
|
|
</p>
|
|
|
|
<p>
|
|
Over the last years I came up with some improvements on the original design and created a <a href="http://www.tilman.de/projekte/audiosphere/">second version</a>. But I always had some things in the back of my mind that I wanted to make better about both the hard- and the software and when the little brother moved into a room of his own, I knew it was time to bring all that to life. So this is the smaller, better and cheaper third version. The rocket on top is optional, by the way. But little brother would never have accepted a player that did not somehow include a rocket, since the original, rocket-shaped design is still used by the older one.
|
|
</p>
|
|
|
|
<div style="margin: 2em; text-align: center;">
|
|
<video controls><source src="Video to follow" type="video/mp4" /></video>
|
|
</div>
|
|
|
|
<h2 id="piplayer3">PiPlayer 3.0: Qudio</h2>
|
|
|
|
<p>
|
|
This third version now relies on <a href="https://volumio.org/">volumio</a> which can play music from streaming services like Spotify Premium or LastFM, has a nice web interface and does most of the configuration for us. The case is much smaller than before, which makes it sturdier and easier to print. The electronic parts are all easily obtainable standard compontents and even cheaper than before. Again, it is built on top of the JBL On Stage IIIp speaker, that can still be found on ebay for little money and provides a perfect base for a player like this.
|
|
</p>
|
|
|
|
<p>
|
|
The main component is now a Raspberry Pi Zero W, that can be run off the dock connector without an additional power source. I replaced the Pimoroni PHAT DAC with a dirt cheap audio module based on the same chip. The IR sensor that detects the QR cards is now a ready-made module which makes assembly easier. The buttons have been replaced by the ubiqitous standard components that come with every Arduino starter kit.
|
|
</p>
|
|
|
|
<h2 id="parts">Parts list</h2>
|
|
|
|
<ul>
|
|
<li>JBL On Stage IIIP</li>
|
|
<li>The <a href="https://github.com/tliero/qudio/tree/master/case">case, which consists of four parts</a>. I printed mine in standard PLA.</li>
|
|
<li>Raspberry Pi Zero W with a micro SD card</li>
|
|
<li><a href="https://blog.sengotta.net/connecting-a-pcm5102a-breakout-board-to-a-raspberry-pi/">CJMCU-5102 plus a 10 kΩ resistor</a>, some other PCM5102A based module or any other I2S DAC that is supported by volumio. Search for 'pHAT DAC'. A usb sound card will not work, since the USB port is used by the webcam.</li>
|
|
<li>TCRT5000 reflective sensor module</li>
|
|
<li>The ultra-cheap <a href="http://www.penguin.cz/~utx/hardware/USB_Camera_AX2311/">USB webcam</a> that can be found on ebay, aliexpress and the like (just sort for price). Some versions come with a small cable reel. This fits perfectly in the holder at the bottom of the case.</li>
|
|
<li><a data-fancybox href="images/usb-a-to-micro-usb-adapter.jpg">USB A to micro USB adapter</a> that connects the webcam to the Raspberry Pi's micro USB port</li>
|
|
<li><a data-fancybox href="images/30-pin-apple-dock-to-micro-usb-and-audio-adapter.jpg">30-pin Apple dock adapter to micro USB and 3.5 mm audio</a></li>
|
|
<li>White LED (preferably diffused) for illumination of the QR cards with a proper resistor</li>
|
|
<li>3 push buttons with 12 mm caps</li>
|
|
<li>Jumper cables: 6x M-F 10 cm for the buttons, 5x F-F 10 cm for the audio module, 4x F-F 20 cm for the sensor and the LED</li>
|
|
<li>A small sheet of acrylic glass / plexiglass (around 2 mm)</li>
|
|
<li>8 M3×8 screws with nuts</li>
|
|
<li>4 M3 <a href="https://www.3dhubs.com/knowledge-base/how-assemble-3d-printed-parts-threaded-fasteners#inserts">threaded heat-set inserts</a></li>
|
|
<li>Soldering iron, drill, screwdriver, glue gun, box cutter</li>
|
|
</ul>
|
|
|
|
<pre style="background-color:#ffff66">
|
|
deactivate microphone?
|
|
12 mm caps?
|
|
acrylic glass --> size?
|
|
</pre>
|
|
|
|
|
|
|
|
|
|
|
|
<h2 id="components">Assembling the Components</h2>
|
|
|
|
<h3 id="mount">Mounting the Base</h3>
|
|
|
|
<p>
|
|
</p>
|
|
|
|
<h3 id="wiring">Wiring</h3>
|
|
|
|
<h4 id="audio-module">Audio Module</h3>
|
|
|
|
<p>
|
|
Test 1, 2, 3
|
|
</p>
|
|
|
|
<h4 id="buttons">Buttons</h3>
|
|
|
|
<p>
|
|
</p>
|
|
|
|
<h4 id="sensor">Sensor</h3>
|
|
|
|
<p>
|
|
</p>
|
|
|
|
<h4 id="led">LED</h3>
|
|
|
|
<p>
|
|
</p>
|
|
|
|
<h2 id="software">Software Installation and Configuration</h2>
|
|
|
|
<h3 id="volumio">Volumio</h3>
|
|
|
|
<p>
|
|
</p>
|
|
|
|
<h3 id="python">Python Script</h3>
|
|
|
|
<p>
|
|
</p>
|
|
|
|
<h3 id="configuration">Configuration und Test</h3>
|
|
|
|
<p>
|
|
</p>
|
|
|
|
|
|
<h2 id="qr-cards">QR Cards</h2>
|
|
|
|
|
|
<h2>What's Left</h2>
|
|
|
|
|
|
|
|
<p>
|
|
If you have any questions or improvements please send me an e-mail to <a href="mailto:tliero@gmx.net">tliero@gmx.net</a>.
|
|
</p>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|