GamePlanForAudio.rtf

{\rtf1\ansi\ansicpg1252\cocoartf2513
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fnil\fcharset0 HelveticaNeue;\f1\fnil\fcharset0 HelveticaNeue-Italic;\f2\fnil\fcharset0 Menlo-Regular;
}
{\colortbl;\red255\green255\blue255;\red46\green45\blue42;\red255\green255\blue255;\red162\green70\blue22;
\red13\green100\blue126;\red245\green246\blue249;}
{\*\expandedcolortbl;;\cssrgb\c23529\c23137\c21569;\cssrgb\c100000\c100000\c100000;\cssrgb\c70196\c35294\c10588;
\cssrgb\c0\c46667\c56863;\cssrgb\c96863\c97255\c98039;}
{\*\listtable{\list\listtemplateid1\listhybrid{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{none\}}{\leveltext\leveltemplateid1\'00;}{\levelnumbers;}\fi-360\li720\lin720 }{\listname ;}\listid1}}
{\*\listoverridetable{\listoverride\listid1\listoverridecount0\ls1}}
{\info
{\author Elisabeth Robson}}\margl1440\margr1440\vieww19520\viewh25200\viewkind0
\deftab720
\pard\pardeftab720\sl920\partightenfactor0

\f0\fs72 \cf2 \cb3 \expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec2 Game plan for audio\
\pard\pardeftab720\sa400\partightenfactor0

\fs36 \cf2 To add audio to the Music Box project, you're going to download all the music samples, and then add two new JavaScript files, and modify code in "musicbox.js" and "View.js".\cb1 \
\cb3 We're also going to have to make sure you can run a web server to load the audio files.\cb1 \
\cb3 There are quite a few steps to get audio working, but don't worry; we'll take it a step at a time.\cb1 \
\cb3 We'll work on getting a web server running first, so you have that out of the way.\cb1 \
\cb3 Then we'll work on the JavaScript code to load and play sounds. We're going to use the AudioContext API, a built-in JavaScript API that was added to JavaScript as part of the HTML5 overhaul. All modern browsers support AudioContext, but note that this does\'a0
\f1\i not
\f0\i0 \'a0include IE, so you'll need to use Edge instead.\cb1 \
\cb3 We'll be adding audio in four steps. The first step is to add a new object,\'a0
\f2 \cf4 \strokec4 Audio
\f0 \cf2 \strokec2 , which will contain properties and methods we need to play audio samples. Next, we'll create a BufferLoader object. This object will load audio samples from sample files, and get them stored in an array in a format that the\'a0
\f2 \cf4 \strokec4 Audio
\f0 \cf2 \strokec2 \'a0object can use to play sounds. We'll update the\'a0
\f2 \cf4 \strokec4 window.onload
\f0 \cf2 \strokec2 \'a0function in "musicbox.js" to kick things off by loading and initializing the audio.\cb1 \
\cb3 Finally, once we've done all that, we can play the audio. We want to play a sound with each circle on the canvas; to do this, we'll need to make just a small change to the\'a0
\f2 \cf4 \strokec4 handleClick
\f0 \cf2 \strokec2 \'a0function in the View.\cb1 \
\cb3 We're going to go pretty quickly through the code to load, initialize, and play audio. For a more in-depth description of the AudioContext web API and using the BufferLoader to load audio data, check out this\'a0{\field{\*\fldinst{HYPERLINK "https://www.html5rocks.com/en/tutorials/webaudio/intro/"}}{\fldrslt \cf5 \strokec5 HTML5 Rocks article}}.\cb1 \
\cb3 Before you begin writing any code, make sure you have the audio samples ready to go. If you haven't already, download the samples from\'a0{\field{\*\fldinst{HYPERLINK "https://github.com/bethrobson/musicbox"}}{\fldrslt \cf5 \strokec5 github}}, and put them in the same folder where your code is. You should have ten MP3 samples that contain notes from the C major pentatonic scale. We chose these notes so when they're played together in the music box, they sound good!\cb1 \
\cb3 Okay, let's jump in and get going!\cb1 \
\pard\pardeftab720\partightenfactor0

\fs48 \cf2 \cb3 Resources for this lecture\cb1 \
\pard\tx220\tx720\pardeftab720\li720\fi-720\partightenfactor0
\ls1\ilvl0
\fs40 \cf5 \cb6 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 		{\field{\*\fldinst{HYPERLINK "javascript:void(0)"}}{\fldrslt \expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec5 HTML5 Rocks Article on Web Audio}}\cf2 \cb1 \expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec2 \
\ls1\ilvl0\cf5 \cb6 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 		{\field{\*\fldinst{HYPERLINK "javascript:void(0)"}}{\fldrslt \expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec5 Download the audio samples from GitHub}}\cf2 \cb1 \expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec2 \
}