Speaker 1: You know, it kind of blows my mind that JavaScript,
Speaker 1: a language initially like hammered out in just eleven days
Speaker 1: to make websites a bit more lively, now packs enough
Speaker 1: punch to construct full blown audio applications, synthesizers, drum machines,
Speaker 1: write in your web browser.
Speaker 2: It really is something else.
Speaker 1: Let's really dig into that, because today on the deep dive,
Speaker 1: we're plunging into JavaScript for sound artists Learn to Code
Speaker 1: with the Web Audio API. It's a super useful book
Speaker 1: by William Turner, edited by Steve Leonard. Our goal to
Speaker 1: basically connect what you already know about audio with the
Speaker 1: fascinating possibilities of JavaScript programming.
Speaker 2: Yeah, because instead of being stuck with desktop software, you
Speaker 2: could potentially build and share a unique synth with anyone
Speaker 2: just a weblink exactly.
Speaker 1: That's a fundamentally different landscape for audio creation, isn't it.
Speaker 2: It absolutely is, And it's remarkable how this book speaks
Speaker 2: directly to that creative audio community. You don't see many
Speaker 2: resources teaching programming to sound artartists using examples they get.
Speaker 2: The beauty isn't just that these Web audio API tools exist,
Speaker 2: but that they're accessible through JavaScript, which is just everywhere.
Speaker 2: It really lowers the barrier for sound artists to experiment
Speaker 2: with coding sound way less complex than it used to be.
Speaker 1: Absolutely, and if you've ever gotten lost tweaking knobs on
Speaker 1: a synth or programmed to MIDI sequence, or maybe just
Speaker 1: wanted about the code behind interactive websites, then listen closely.
Speaker 1: This deep dive is crafted just for you. We're going
Speaker 1: to pull out the key ideas of those aha moments
Speaker 1: to show you how JavaScript and the Web Audio API
Speaker 1: can unlock totally new sonic territories and hopefully without drowning
Speaker 1: you and tech speak.
Speaker 2: Right, it's about making audio creation even more accessible, isn't
Speaker 2: it like how democratized production? This brings coding for audio
Speaker 2: right into the browser, which almost everyone has. What kind
Speaker 2: of creative doors does that open up? Think about it?
Speaker 1: Exactly? So, just to give you a roadmap, we'll explore
Speaker 1: how the book cleverly uses these audio examples to teach
Speaker 1: core JavaScript fundamentals. Yeah, we're talking variables, functions, and crucially
Speaker 1: how they talk to the Web Audio API to make
Speaker 1: and shape sound in real time. All your browser ready
Speaker 1: to tune in?
Speaker 2: Absolutely, let's lay the groundwork.
Speaker 1: Okay. Chapter one laying the foundation. It starts with a
Speaker 1: really interesting question what is a program?
Speaker 2: And the answer they give is pretty broad.
Speaker 1: Yeah, any set of instructions created or followed. They even
Speaker 1: use early analog since you know, with the patch base
Speaker 1: as an.
Speaker 2: Example, which is such a great starting point. It connects
Speaker 2: programming to something tangible for sound artists, they've basically been
Speaker 2: programming with patch cables.
Speaker 1: Already, right, just learning a different language for it now exactly?
Speaker 1: Then what is JavaScript? And this origin story is wild
Speaker 1: nineteen ninety five Netscape, Brenda Night, brendan Ike. Yeah, just
Speaker 1: eleven days to cook up this language for web interactivity.
Speaker 1: And it was called live script first.
Speaker 2: Live script before it became JavaScript. And the book makes
Speaker 2: it really good. Crucial point here. Oh yeah, it's got
Speaker 2: nothing to do with Java, despite the name that trips
Speaker 2: up so many people.
Speaker 1: Right, super important distinction.
Speaker 2: And today JavaScript is just well, it's everywhere, robotics, smart homes,
Speaker 2: you name it.
Speaker 1: Incredible versatility. And now the star of our show, what
Speaker 1: is the Web Audio API? The toolkit exactly. Think of
Speaker 1: it like a pre built code toolkit nestled right inside
Speaker 1: your browser, specifically for making musical and audio tasks. Way
Speaker 1: way simpler saves you building everything for the ground up.
Speaker 2: And what's cool is you're writing in JavaScript, but the
Speaker 2: api itself that's built using stuff like c plus plus
Speaker 2: b a Java machine code, powerful stuff happening under the
Speaker 2: hood in the browser.
Speaker 1: So you're getting a friendly interface to some serious audio power.
Speaker 2: Precisely.
Speaker 1: Okay. So the chapter wraps up with practical first steps.
Speaker 1: It recommends Brave as the browser and tells you how
Speaker 1: to open the developer tools. That's cray L plus Shift
Speaker 1: plus J or command plus option plus J on.
Speaker 2: Mas the essential tool.
Speaker 1: And they also point you to stackoverflow dot com specifically
Speaker 1: the web audio api community. There like having a global.
Speaker 2: Help desk, which is so vital for newcomers right. Knowing
Speaker 2: where to get help when you inevitably hit a snag
Speaker 2: makes a huge difference.
Speaker 1: No kidding. Okay, let's move to chapter two, Getting started
Speaker 1: with sound and code. Time to make some noise.
Speaker 2: Literally. They contrast the classic Hello World.
Speaker 1: Program yes, which just prints text.
Speaker 2: With their Hello Sound program. Much more fun for.
Speaker 1: This crowd, for sure. So instead of text you get sound.
Speaker 1: The book gives you this simple snippet audio context New
Speaker 1: Audio context letosciaudio context dot create oscillator audise dot type
Speaker 1: sign ovc dot connect audio context dot destination, audio context
Speaker 1: dot current time.
Speaker 2: Let's break that down, maybe.
Speaker 1: Yeah, good IDEA. First line gets the audio engine ready
Speaker 1: new audio context right. Second line creates an oscillator that's
Speaker 1: your sound source. Create oscillator, got it. Third sets the
Speaker 1: sound type here it's a pure sign wave offc dot
Speaker 1: type sign. Fourth connects it to your speaker. Connect audio
Speaker 1: context dot destination, yeah output. And the last one says,
Speaker 1: go right now start audiocontext dot current time.
Speaker 2: And the cool thing is that immediate feedback you type that,
Speaker 2: run it and bam sound. That direct code to audio
Speaker 2: link is super motivating.
Speaker 1: Definitely. And they mentioned you need their web audio template
Speaker 1: and a local web server like the one in Sublime
Speaker 1: text to actually hear it.
Speaker 2: Right, crucial practical step.
Speaker 1: Next up variables. Think of them like labeled boxes for
Speaker 1: storing info.
Speaker 2: Containers.
Speaker 1: Yeah, containers. The book uses let waveform type equal saw
Speaker 1: too as an example. Let is the keyword saying new
Speaker 1: variable coming up declaration right. Then waveform type is the name.
Speaker 1: Notice the capital T that's CamelCase. You need it because
Speaker 1: variable names can't have spaces.
Speaker 2: Try it with the space let waveform type and you'll
Speaker 2: see an error right away in the console. Good lesson
Speaker 2: in precision definitely and at equals.
Speaker 1: It's not equals like in math.
Speaker 2: It's the assignment operator exactly.
Speaker 1: It takes the value on the right. Yeah, the string
Speaker 1: saw tooth in quotes and stores it in the variable
Speaker 1: waveform type on.
Speaker 2: The left, and those quotes tell JavaScript it's a string,
Speaker 2: you know, text data.
Speaker 1: They also bring in const. It's like let, but for
Speaker 1: variables you don't want to change later.
Speaker 2: Immutable sort of.
Speaker 1: Yeah, try reassigning a const variable of the book shows
Speaker 1: constant oscu one thousand off key eel some thousand and boom.
Speaker 2: Error.
Speaker 1: Keeps your code predictable.
Speaker 2: Good practice.
Speaker 1: Then there's declaring without a value like let waveform type.
Speaker 1: JavaScript automatically assigns it the special value.
Speaker 2: Undefined, which is its own data type, not a string.
Speaker 2: No quotes.
Speaker 1: Right, These little differences let const undefined. They seem small,
Speaker 1: but they're fundamental to how JavaScript works.
Speaker 2: Absolutely foundational, okay.
Speaker 1: Making code human readable. Comments, potential use for single lines
Speaker 1: or for multiple lines. The computer ignores them, but they
Speaker 1: tell you what's going on. Let waveform type saw tooth oscillator.
Speaker 2: Value it's like leaving notes for your future self or
Speaker 2: your collaborators, so important. As things get complex totally.
Speaker 1: Then they revisit hello sound to show variables in action.
Speaker 1: They make variables for different waveforms saw tooth, sign, triangle square.
Speaker 1: Then they assign one of these to another variable like
Speaker 1: current waveform. And the cool part is you can change
Speaker 1: current waveform later without using lead again. Just assign a
Speaker 1: new value.
Speaker 2: That's mutability, the ability to change the variables value.
Speaker 1: And if you actually do this in the browser, change
Speaker 1: current waveform from signed to saw tooth, you hear the
Speaker 1: difference instantly, it gets buzzier.
Speaker 2: That's the magic. Connecting code changes to audible results makes
Speaker 2: abstract concepts totally concrete for sound folks.
Speaker 1: Okay, so we covered string and undefined. They briefly mention
Speaker 1: null two, another data type often used to intentionally show
Speaker 1: a variable.
Speaker 2: Has no value, right, deliberately empty.
Speaker 1: Then back to strings. You can stick them together with
Speaker 1: the plus sign that's concatenation.
Speaker 2: Or use template literals.
Speaker 1: Yeah, template literals with the backticks. They let you embed
Speaker 1: variables right inside the string, like yeah to phrase sound
Speaker 1: type cleaner, somethe times, and yes, strings can have spaces.
Speaker 2: Crucial for interfaces handling text data.
Speaker 1: And if you need the length of a string, just
Speaker 1: use length like mystring dot length counts spaces too handy property.
Speaker 1: Then they introduce built in string methods tools for manipulating
Speaker 1: strings like to uppercase or to lower case.
Speaker 2: You don't need to memorize them all no way, but
Speaker 2: know they exist. Check what slice slice tools in the
Speaker 2: toolbox for when.
Speaker 1: You need them exactly. Next, numbers, key thing no quotes.
Speaker 1: Put quotes around one hundred and twenty three and it's
Speaker 1: a string, not a number. You can do math with right.
Speaker 2: And the basic math operators plus from multiply for divide
Speaker 2: and percent.
Speaker 1: The modulo gives you the remainder after division.
Speaker 2: And if you're ever unsure what data type of variable holds,
Speaker 2: use type of type of my variable.
Speaker 1: Super useful for debugging. Okay, then boolean data type just
Speaker 1: true or false perfect for on off states.
Speaker 2: Let synth this on true fundamental for logic.
Speaker 1: They quickly mentioned assignment operators like plus or not as
Speaker 1: shorthand compound assignment, and then comparison operators. These compare values
Speaker 1: and give back a booleion true or false like for.
Speaker 2: Strict equality checks value and type.
Speaker 1: Right, and for strict inequality CEO too. Yeah, the book
Speaker 1: stress is using the strict ones because the non strict
Speaker 1: ones can do weird automatic type conversions.
Speaker 2: Yeah, strict equality avoids surprises. It's essential for making decisions
Speaker 2: in your code. If this condition is true, do that.
Speaker 1: Okay, let's jump to chapter five. Functions encapsulating actions. This
Speaker 1: is where code gets organized.
Speaker 2: Right, we've got our data building blocks, Now how do
Speaker 2: we organize actions on that data? Functions they're the workhorses.
Speaker 1: The book calls them reusable blocks of code. Yeah, stop
Speaker 1: repeating yourself. They do specific tasks based on inputs.
Speaker 2: Yeah, like a synth module takes inputs, does something gives
Speaker 2: an output.
Speaker 1: Good analogy. They start simple function effectsbox. Input takes an input,
Speaker 1: returns it doubled.
Speaker 2: And you call it or invoke it with affectsbox one twenty.
Speaker 1: Right, it gives you two forty. The book breaks down
Speaker 1: the parts function keyword the name effects box, barenthes for parameters.
Speaker 2: Like input placeholders for input.
Speaker 1: Curly braces for the code block, and the optional return
Speaker 1: statement for the output. They even mention js dot comments
Speaker 1: for documenting parameters.
Speaker 2: That input output idea parameters in return value out is
Speaker 2: core programming stuff makes code modular.
Speaker 1: You run it with the name and parentheses. Values you
Speaker 1: pass in when you call it are arguments, and if
Speaker 1: you give too many.
Speaker 2: Arguments, jobscript just ignores the extras.
Speaker 1: Interesting. They also show function expressions assigning a function to
Speaker 1: a variable like let add function ab return a plus
Speaker 1: b shows functions are like data.
Speaker 2: Which is super powerful, especially for callbacks.
Speaker 1: Later on, Yeah, and they mentioned functions help abstract way
Speaker 1: complex stuff like playing that oscillator makes code cleaner definitely.
Speaker 1: They show a working effects box with a multiplier parameter
Speaker 1: to make it flexible, and default arguments, setting a fallback
Speaker 1: value if an argument.
Speaker 2: Isn't provided useful and they touch on the arguments object,
Speaker 2: but quickly move to the modern.
Speaker 1: Rest para right. The syntax lets you gather multiple arguments
Speaker 1: into an array function some dot numbers.
Speaker 2: Cleaner, more flexible way to handle varying numbers of inputs.
Speaker 1: Now a big one function scope Variables you declare inside
Speaker 1: a function with let or const. They're local they don't
Speaker 1: clash with variables outside.
Speaker 2: But the function can see its on variables and variables
Speaker 2: in outer scopes, including the global scope.
Speaker 1: Which is why the book Cammer's home. Always declare variables
Speaker 1: with let or constant inside functions. Avoids accidental globals and
Speaker 1: weird bugs.
Speaker 2: Absolutely vital advice for organization and preventing side effects. They
Speaker 2: also mention hoisting for function declarations.
Speaker 1: Briefly, Yeah, they get moved to the top conceptually. Then
Speaker 1: anonymous functions functions without names often used on.
Speaker 2: The fly, like in callbacks or expressions, which.
Speaker 1: Leads to closures. This one's a bit more advanced.
Speaker 2: Yeah, it can be tricky.
Speaker 1: Think of it as an inner function that remembers the
Speaker 1: variables from its outer function even after the outer one
Speaker 1: is done running.
Speaker 2: It keeps its environment.
Speaker 1: They use the effects box example again showing the inner
Speaker 1: functions still accessing the component variable from the outer scope.
Speaker 1: Whoa kind of mind bending it.
Speaker 2: Is, but it's super powerful. Allows functions to maintain state.
Speaker 2: Essentially crucial for lots of patterns.
Speaker 1: Okay. Next, callback functions functions you pass as arguments to
Speaker 1: other functions.
Speaker 2: Enables flexibility asynchronous stuff.
Speaker 1: They show a calculate frequencies example that can use a
Speaker 1: default calculation or a custom callback you provide, and then
Speaker 1: built in JavaScript callbacks.
Speaker 2: Like array methods, dot filter, and map.
Speaker 1: Yeah, these let you operate on array elements really elegantly
Speaker 1: using callback functions. Imagine filtering audio samples with that.
Speaker 2: Oh yeah, filter and dot map are incredibly expressive for
Speaker 2: working with data collections. Fundamental for event handling too.
Speaker 1: Chapter five wraps with function aerosyntax the expressive just a
Speaker 1: shorter way to write function.
Speaker 2: Expressions, especially concise for single parameters or simple returns.
Speaker 1: And finally, recursion. A function calling.
Speaker 2: Itself need that base case absolutely.
Speaker 1: To stop it from looping forever and crashing your browser.
Speaker 1: As they hilariously warn, they show a loop from two.
Speaker 2: Example all again for some problems, but maybe not your
Speaker 2: everyday tool.
Speaker 1: Starting out right, okay, big jump out to chapter ten
Speaker 1: Simplifying DOM programming with jQuery.
Speaker 2: Okay, so we got JavaScript basics down. Now interacting with
Speaker 2: the web page itself exactly.
Speaker 1: The book introduces jquerys library to make interacting with the
Speaker 1: DOM the document object model way easier.
Speaker 2: The DOM is like the page of structure, right, all
Speaker 2: the HTML elements, yeah, the.
Speaker 1: Blueprint and manipulating it directly with just JavaScript can be verbose.
Speaker 1: jQuery is like a set of shortcuts. Pre written code.
Speaker 2: Handles browser differences too. Simplify subtax write less, Do more
Speaker 2: is the motto.
Speaker 1: So how do you use it? Two ways to include it?
Speaker 1: Download the file or use a CDN, a content delivery network.
Speaker 2: CDN needs internet though, good point.
Speaker 1: Then the basic pattern select an HTML element, then do
Speaker 1: something to it and select.
Speaker 2: Acting is where jQuery shines. Uses syntax like CSS selectors.
Speaker 1: Right, if you know CSS, this feels familiar. The sign
Speaker 1: is the key. You can select elements like dive child elements,
Speaker 1: t span descendants, p span, multiple types, dive span p.
Speaker 2: Or by id, hashtag item or class night item.
Speaker 1: They're very powerful.
Speaker 2: Once selected, you use jQuery methods like dot CSS to
Speaker 2: change styles. You can set one property or multiple using
Speaker 2: an object.
Speaker 1: And CSS is just one of many methods for changing content, attributes, styles, everything.
Speaker 2: So the book does this great practical thing refactors. The
Speaker 2: early Oscillator player code using.
Speaker 1: jQuery shows the different side by side. Yeah, the longer
Speaker 1: JavaScript for finding the on off button or the frequency
Speaker 1: slider gets much shorter with jQuery selectors like hashtag on
Speaker 1: off or input dot eq one.
Speaker 2: To vowel explaining eq for selecting by position and dot
Speaker 2: vowel for getting form element values.
Speaker 1: It really shows how much cleaner and more readable jQuery
Speaker 1: can make that dom interaction.
Speaker 2: Drives home the benefit immediately. See the code shrink All.
Speaker 1: Right, well more leap Chapter twenty three Building a step sequencer.
Speaker 1: This is where it all comes together, a real interactive
Speaker 1: audio app in the browser.
Speaker 2: Yeah, building your own sequencer. That's about designing custom rhythm logic.
Speaker 2: Huge potential beyond standard sequencers.
Speaker 1: But the chapter starts with a problem precise musical timing
Speaker 1: in JavaScript. Standard set interval and set timeout aren't quite
Speaker 1: reliable enough, right.
Speaker 2: They drift, and once you schedule something, it's hard to
Speaker 2: unschedule cleanly.
Speaker 1: So the books solution a custom schedule function. It doesn't
Speaker 1: just fire and forget. It constantly checks if it's time
Speaker 1: for the next event. More control.
Speaker 2: The core idea uses a future tick time variable. It
Speaker 2: tracks when the next tick should happen. The scheduler uses
Speaker 2: set time out to repeatedly call itself, comparing future tick
Speaker 2: time to the Web audio API's current time, so.
Speaker 1: It's like a self correcting loop for timing exactly keeps
Speaker 1: it accurate.
Speaker 2: In tempo changing, the BPM adjusts a countertime value which
Speaker 2: directly changes the timing within them.
Speaker 1: Makes sense. Then they build the sequencer logic using JavaScript arrays,
Speaker 1: kick tracks and air track, et cetera.
Speaker 2: Each number in the array is a step in say
Speaker 2: a sixteenth note sequence. Simple way to represent patterns position
Speaker 2: is time, value is on off or velocity maybe gen.
Speaker 1: To play the sounds a schedule sound function. It loops
Speaker 1: through the track arrays based on a counter and triggers
Speaker 1: the right sound at the right time.
Speaker 2: Then the UI the grid. They use jQuery to dynamically
Speaker 2: create HTML deve elements. Each row is an instrument.
Speaker 1: Columns are steps dynamically generating HML. That's powerful. jQuery makes
Speaker 1: adding those elements easy totally and making it interactive. jQuery
Speaker 1: is on click clicks on the grid cells dot grid item.
Speaker 2: Yet dot index figures out which cell in the row
Speaker 2: was clicked right.
Speaker 1: That index tells you the musical step. Clicking toggles the
Speaker 1: step number and the corresponding track array adds or removes it.
Speaker 1: And they toggle CSS classes too, so you see the
Speaker 1: active steps light.
Speaker 2: Up, visual feedback. Hello crucial.
Speaker 1: Finally, they mentioned jQuery listeners for a metronome but and
Speaker 1: a tempo slider, so user interaction controls the whole thing
Speaker 1: in real time.
Speaker 2: It's a fantastic example pulling everything together. JavaScript fundamentals, Web
Speaker 2: Audio API for sound and timing, jQuery for the interactive UI,
Speaker 2: a full browser audio app.
Speaker 1: So wrapping up our deep dives, what a journey from
Speaker 1: what's a program to JavaScript basics functions, simplifying with jQuery
Speaker 1: and building a step sequencer. JavaScript for Sound Artists really
Speaker 1: does connect audio thinking with programming concepts effectively.
Speaker 2: Yeah, it demystifies. It shows you don't need to be
Speaker 2: a coding guru to start making cool sonic tools in
Speaker 2: the browser with the Web Audio API and libraries like jQuery.
Speaker 1: So if this sparked your curiosity, If making your own
Speaker 1: web audio tool sounds exciting, definitely check out the book.
Speaker 2: There's way more in their audio files, effects, building sense.
Speaker 1: Loads more, which leads to a final thought, go on,
Speaker 1: just like early hardware sense opened up sound creation, could
Speaker 1: JavaScript and the Web Audio API be this new way
Speaker 1: of accessible, shareable audio innovation online.
Speaker 2: That's a really interesting question. What kinds of tools and
Speaker 2: experiences could you the listener build with this? What does
Speaker 2: audio creation look like when it's native to the web.
Speaker 1: Definitely food for a thought. To explore more, check the
Speaker 1: book's companion side JavaScript for Sound Artists, dot com code
Speaker 1: examples resources. It's all there, yep, and let us know
Speaker 1: what parts of web audio interest you. Your questions might
Speaker 1: just spark our next deep dive