Merge pull request tessel#82 from tessel/audio

[WIP] Audio module tutorial

_layouts/default.html

@@ -129,6 +129,10 @@ <h1><a href="https://tessel.io/"><nobr><img src=
               <a href="{{ site.baseurl }}/modules/ambient.html" class=
               "side-bar-modules">ambient</a>
             </li>
+            <li style="padding-left:10px;">
+              <a href="{{ site.baseurl }}/modules/audio.html" class=
+              "side-bar-modules">audio</a>
+            </li>
             <li style="padding-left:10px;">
               <a href="{{ site.baseurl }}/modules/ble.html" class=
               "side-bar-modules">ble</a>

modules.md

@@ -56,6 +56,7 @@ If you've already tried out your modules, move on to [Tweet.](tweet.html)
 
 *   [Accelerometer](modules/accelerometer.html)
 *   [Ambient (Light + Sound)](modules/ambient.html)
+*   [Audio](modules/audio.html)
 *   [BLE](modules/ble.html)
 *   [Camera](modules/camera.html)
 *   [Climate](modules/climate.html)

modules/_module_footer.html

@@ -14,6 +14,10 @@ <h2>Choose another module</h2>
     "moduleLink">Ambient <small>Light +
     Sound</small></span></a>
   </li>
+  <li>
+    <a href="audio.html"><span class=
+    "moduleLink">Audio</span></a>
+  </li>
   <li>
     <a href="ble.html"><span class=
     "moduleLink">BLE</span></a>

modules/audio.html

@@ -0,0 +1,10 @@
+---
+layout: default
+---
+
+{% capture include_install %}
+{% include_relative audio.md %}
+{% endcapture %}
+{{ include_install | markdownify }}
+
+{% include_relative _module_footer.html %}

modules/audio.md

@@ -0,0 +1,114 @@
+{::options parse_block_html="true" /}
+
+<div class="row">
+<div class="large-12 columns">
+
+## <img class="constrain-sm" src="https://s3.amazonaws.com/technicalmachine-assets/technical-io/modules/usb.png"> Audio
+
+[<i class="fa fa-github">View source on Github</i>](https://github.com/tessel/tessel-av)
+
+### Step 1
+
+Make a directory inside your "tessel-code" folder called "audio", change directory into that folder, and initialize a tessel project:
+
+`mkdir audio; cd audio; t2 init`
+
+Download [this mp3](https://dl.dropboxusercontent.com/u/3531958/yoda-mudhole.mp3) into the "audio" directory, this will be the audio file we manipulate.
+
+In order to include static, non-require-dependency resources in your deployment, you'll need to explicitly inform Tessel's CLI. To do this, create a `.tesselinclude` file in your `audio` directory. In that file, type the name of the static asset that should be deployed with the project. For this project, your `.tesselinclude` will have at least the following in it:
+
+`yoda-mudhole.mp3`
+
+(Learn more about Tessel CLI deployment [tips and tricks in the docs](https://tessel.io/docs/cli#usage))
+
+### Step 2
+</div>
+</div>
+
+<div class="row">
+<div class="large-6 columns">
+
+Plug Tessel into your computer via USB, then plug the audio module into either of Tessel's USB ports. You will also need some kind of speaker output, headphones or [desk speakers](http://www.amazon.com/AmazonBasics-Powered-Computer-Speakers-A100/dp/B00GHY5F3K/) will do the trick.
+
+</div>
+<div class="large-6 columns">
+
+![](http://i.imgur.com/zbRKAVx.jpg)
+
+</div>
+</div>
+
+<div class="row">
+<div class="large-12 columns">
+
+### Step 3
+
+Install by typing `npm install tessel-av` into the command line.
+
+### Step 4
+
+Rename "index.js" to "audio.js" and replace the file's contents with the following:
+
+{% highlight js %}
+// Any copyright is dedicated to the Public Domain.
+// http://creativecommons.org/publicdomain/zero/1.0/
+
+/*********************************************
+- Play audio from an amusing scene between Luke Skywalker, R2-D2 and Yoda
+- When the audio reaches the end, play it again from the beginning.
+*********************************************/
+
+var path = require('path');
+var av = require('tessel-av');
+var mp3 = path.join(__dirname, 'yoda-mudhole.mp3');
+var sound = new av.Speaker(mp3);
+
+sound.play();
+
+sound.on('end', function(seconds) {
+  sound.play();
+});
+
+
+{% endhighlight %}
+
+Save the file.
+
+</div>
+</div>
+
+<div class="row">
+<div class="large-12 columns">
+
+### Step 5
+
+</div>
+</div>
+
+<div class="row">
+<div class="large-12 columns">
+
+In your command line, `t2 run audio.js`
+
+Hooray! You should hear the mp3 playing in a loop!
+
+**Bonus:** Try connecting buttons to your Tessel 2 and use them to control playback. Hint: it may help to look for the NPM module `tessel-gpio-button`.
+
+**Extra bonus:** Load many mp3s onto a USB storage drive and playback from that source. Hint: check out the "storage" tutorial on the left sidebar.
+
+To see what else you can do with the USB audio module, read the [tessel-av](https://github.com/tessel/tessel-av) documentation.
+
+</div>
+</div>
+
+<div class="row">
+<div class="large-12 columns">
+
+### Step 6
+
+What else can you do with an audio module? What are you making? [Share your invention!](//tessel.io/projects)
+
+If you run into any issues you can check out the [module forums](http://forums.tessel.io/c/modules).
+
+</div>
+</div>