Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Audio module tutorial #82

Merged
merged 4 commits into from
Apr 11, 2016
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions _layouts/default.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions modules.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
* [Climate](modules/climate.html)
* [GPS](modules/gps.html)
Expand Down
4 changes: 4 additions & 0 deletions modules/_module_footer.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
10 changes: 10 additions & 0 deletions modules/audio.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
layout: default
---

{% capture include_install %}
{% include_relative audio.md %}
{% endcapture %}
{{ include_install | markdownify }}

{% include_relative _module_footer.html %}
114 changes: 114 additions & 0 deletions modules/audio.md
Original file line number Diff line number Diff line change
@@ -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.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a GIF in the works?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How do I gif the playback of audio?

To see what else you can do with the USB audio module, read the [tessel-av](https://github.com/tessel/tessel-av) documentation.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Frijol I was thinking about this, and I wanted to know what you think about embedding a YouTube video?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's the direction @HipsterBrown chose for the WAP tutorial.

My opinion is definitely on the side of using a GIF in this situation, for a few reasons:

  • It forces simplicity: just the result of the tutorial and nothing more. This follows the same design philosophy as all the other things in the right-hand column of the module tutorials
  • no user interaction required
  • it's consistent across all the tutorials

If we want to think about full video tutorials, that's a different question and one I'm interested in. I actually made a bunch of them for Tessel 1 (here's the servo for example) but never got around to making all of them - so they didn't go live.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@johnnyman727 points out that you might want to do a video because this is a module that has to do with sound. ...makes sense.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

... Yes, that's why I asked after I got no answer to my previous question :P

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yep yep, embedding a video is a good idea - please check out the WAP example to make sure the styles match :)

Also, where did you ask before? I didn't see it- want to make sure I'm not losing communication

</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>