PrebakedGoodness_musicbox.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: musicbox.js\
\pard\pardeftab720\sa400\partightenfactor0

\fs36 \cf2 We've got two new files, "BufferLoader.js" and "Audio.js" that we'll use to load and play sounds. Now, we need to make some changes to "musicbox.js" to use the\'a0
\f1 \cf4 \strokec4 BufferLoader
\f0 \cf2 \strokec2 , and supply a callback function that will be called once the sounds are loaded. This callback function will initialize the sounds in the audio context, and then do what our code already does: set up the view, the canvas click handler, and the call to\'a0
\f1 \cf4 \strokec4 updateDisplay
\f0 \cf2 \strokec2 \'a0to get our animation started.\cb1 \
\cb3 Open up the file "musicbox.js" and make sure you update your code with the\'a0{\field{\*\fldinst{HYPERLINK "https://gist.github.com/bethrobson/5736f3fb94bcdde3c000"}}{\fldrslt \cf5 \strokec5 full code from GitHub}}.\cb1 \
\cb3 The first thing we're doing in the\'a0
\f1 \cf4 \strokec4 window.onload
\f0 \cf2 \strokec2 \'a0function now is creating a new\'a0
\f1 \cf4 \strokec4 BufferLoader
\f0 \cf2 \strokec2 \'a0object. Recall that the constructor function for the\'a0
\f1 \cf4 \strokec4 BufferLoader
\f0 \cf2 \strokec2 \'a0takes three arguments: the audio context, which is a property of the\'a0
\f1 \cf4 \strokec4 Audio
\f0 \cf2 \strokec2 \'a0object, an array of URLs (which in our case are just file names) for the sound files, and a callback function to call once the sounds have been successfully loaded. Note that we're assuming the sound files are in the same folder as your code, so the path to the sounds is the same as the path to the music box application.\cb1 \
\cb3 The callback function we're specifying is the\'a0
\f1 \cf4 \strokec4 finishedLoading
\f0 \cf2 \strokec2 \'a0function which is defined in the\'a0
\f1 \cf4 \strokec4 window.onload
\f0 \cf2 \strokec2 \'a0function also. We'll go over what that does in a moment.\cb1 \
\cb3 Once we've created the\'a0
\f1 \cf4 \strokec4 BufferLoader
\f0 \cf2 \strokec2 \'a0object, we call the\'a0
\f1 \cf4 \strokec4 load
\f0 \cf2 \strokec2 \'a0method. Remember,\'a0
\f1 \cf4 \strokec4 load
\f0 \cf2 \strokec2 \'a0iterates through all the file names in the array, and passes the file name, along with the index of the file name in the list, to the\'a0
\f1 \cf4 \strokec4 loadBuffer
\f0 \cf2 \strokec2 \'a0method which is responsible for loading the sounds as binary data, using\'a0
\f1 \cf4 \strokec4 XMLHttpRequest
\f0 \cf2 \strokec2 .\cb1 \
\cb3 Once\'a0
\f1 \cf4 \strokec4 loadBuffer
\f0 \cf2 \strokec2 \'a0has successfully loaded the sounds, the callback function,\'a0
\f1 \cf4 \strokec4 finishedLoading
\f0 \cf2 \strokec2 \'a0is called (to see where we do this, look at the "BufferLoader.js" file for the call to\'a0
\f1 \cf4 \strokec4 loader.onload
\f0 \cf2 \strokec2 ). What gets passed into the\'a0
\f1 \cf4 \strokec4 finishedLoading
\f0 \cf2 \strokec2 \'a0function is the\'a0
\f1 \cf4 \strokec4 bufferList
\f0 \cf2 \strokec2 \'a0array in the\'a0
\f1 \cf4 \strokec4 BufferLoader
\f0 \cf2 \strokec2 \'a0object, which contains all the decoded sounds from the MP3 files.\cb1 \
\cb3 The\'a0
\f1 \cf4 \strokec4 finishedLoading
\f0 \cf2 \strokec2 \'a0function contains the code we had previously written to set up the view, the click handler for the canvas, and start the calls to\'a0
\f1 \cf4 \strokec4 updateDisplay
\f0 \cf2 \strokec2 \'a0to kick off the animation. In addition, we've added one line at the top to call the\'a0
\f1 \cf4 \strokec4 Audio.init
\f0 \cf2 \strokec2 \'a0method, passing in the\'a0
\f1 \cf4 \strokec4 bufferList
\f0 \cf2 \strokec2 \'a0array. This array of sounds gets stored in the\'a0
\f1 \cf4 \strokec4 Audio
\f0 \cf2 \strokec2 \'a0object and used when we call the\'a0
\f1 \cf4 \strokec4 Audio.play
\f0 \cf2 \strokec2 \'a0method.\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 musicbox.js}}\cf2 \cb1 \expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec2 \
}