PrebakedGoodness_Audio.js.rtf

{\rtf1\ansi\ansicpg1252\cocoartf2513
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fnil\fcharset0 HelveticaNeue;\f1\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 Prebaked goodness: audio.js\
\pard\pardeftab720\sa400\partightenfactor0

\fs36 \cf2 To play sounds in JavaScript, we need to use the built-in\'a0
\f1 \cf4 \strokec4 AudioContext
\f0 \cf2 \strokec2 \'a0constructor to create an\'a0
\f1 \cf4 \strokec4 AudioContext
\f0 \cf2 \strokec2 \'a0object. After creating the\'a0
\f1 \cf4 \strokec4 AudioContext
\f0 \cf2 \strokec2 \'a0object, we'll initialize it with sounds, so it's ready to play. We'll put all the code associated with generating audio from the sounds in a new file, "Audio.js", so go ahead and create this file now, and\'a0{\field{\*\fldinst{HYPERLINK "https://gist.github.com/bethrobson/806eaf32af4d83a1f8a9"}}{\fldrslt \cf5 \strokec5 copy in the code from GitHub}}.\cb1 \
\cb3 Once you've saved "Audio.js", you'll need to add a link to the JavaScript in the file "musicbox.html" using a\'a0
\f1 \cf4 \strokec4 <script>
\f0 \cf2 \strokec2 \'a0tag. Add it to the bottom of the file, above the link to the "View.js" file, and save your "musicbox.html" file.\cb1 \
\cb3 Let's quickly step through the code so you understand how it works. First, notice that we're encapsulating all the code related to audio in an object named\'a0
\f1 \cf4 \strokec4 Audio
\f0 \cf2 \strokec2 . Using an object literal like we're doing here is a good strategy for grouping related code together, and we can use this object to access the audio-related properties and methods from other JavaScript code.\cb1 \
\cb3 The\'a0
\f1 \cf4 \strokec4 Audio
\f0 \cf2 \strokec2 \'a0object has five properties, two of which are methods. The\'a0
\f1 \cf4 \strokec4 gainNode
\f0 \cf2 \strokec2 \'a0will be used to control the volume; the\'a0
\f1 \cf4 \strokec4 bufferList
\f0 \cf2 \strokec2 \'a0will be an array holding the sounds to play; and the\'a0
\f1 \cf4 \strokec4 audioContext
\f0 \cf2 \strokec2 \'a0is the object that knows how to decode binary audio data and make the browser play a sound.\cb1 \
\cb3 Audio operations, like making a sound or adjusting the volume, are handled with nodes that are connected together. Audio people think of the groups of nodes as "audio routing graphs", which is where this "node" language comes from. For this example, we're keeping it extremely simple. We just need two nodes: one to create the sound, and one to generate the sound.\cb1 \
\cb3 We'll be calling the\'a0
\f1 \cf4 \strokec4 init
\f0 \cf2 \strokec2 \'a0method to initialize the\'a0
\f1 \cf4 \strokec4 Audio
\f0 \cf2 \strokec2 \'a0object with the sounds it needs to play. We'll also use this method to set up the volume at which the sounds will be played. The function takes an array,\'a0
\f1 \cf4 \strokec4 bufferList
\f0 \cf2 \strokec2 , of sounds, which it stores in the property\'a0
\f1 \cf4 \strokec4 bufferList
\f0 \cf2 \strokec2 . Each item in this array will be one of the sounds from the audio files you downloaded earlier.\cb1 \
\cb3 To set the volume for the audio, we create a gain node and connect it to the audio context object. The gain (the amount of volume to apply to your sound) on the gain node is set to 1, to play at maximum volume. If you wanted to play at half volume, you'd set this to 0.5.\cb1 \
\cb3 To actually play a sound, we'll be calling the\'a0
\f1 \cf4 \strokec4 play
\f0 \cf2 \strokec2 \'a0method. We'll be doing this in the View object, and we'll get to that shortly. The\'a0
\f1 \cf4 \strokec4 play
\f0 \cf2 \strokec2 \'a0method takes an index of one of the sounds in the\'a0
\f1 \cf4 \strokec4 bufferList
\f0 \cf2 \strokec2 \'a0and prepares that for playing by creating a buffer source. This source is then connected to the gain node and the sound is started. A started sound will play to completion and then end. Each time we need to play a sound, we recreate the buffer source and connect it to the gain node.\cb1 \
\cb3 We have the code to take sounds and play them; next up, we'll tackle loading the sounds from the MP3 files.\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 Audio.js}}\cf2 \cb1 \expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec2 \
}