Making Noise with the Web API
Clayton Salem
A common question asked by learners in JavaScript is, “Should I learn a framework, or learn vanilla JavaScript.” In this talk I will complicate that question by introducing the Audio WebAPI, it’s challenges, and how using a framework like Tone.js evens out the process of working with browsers and provides essential functionality that is difficult to write on your own. The presentation will serve as an example of how writing vanilla JavaScript can be a good learning experience, and how that process can lead a programmer to use a framework for accelerated development.I live in a small house with two children. As such, we rely on sound machines for bedtime. While the app-store has a plethora of free/freemium sound apps, the quality is not great, and they are often bloated with unwanted features. Being the intrepid developer I asked myself, why get something for free when I can build it myself?Using the MDN documentation, I built a simple working sound machine in chrome desktop. It was after deploying the app and attempting to run it in ios that the fuzziness of browser support became apparent. In this talk I will demonstrate the basics of the Web Audio API. I will show some of my solutions to solve browser support issues, and how much simpler those become when using the Tone.js framework. I will also demonstrate some of the synthesizing features of Tone.js, and attempt to recreate one or more of those features in vanilla JavaScript. Here is a very rough sound machine implementation: https://claytron5000.github.io/sound-machine/
A common question asked by learners in JavaScript is, “Should I learn a framework, or learn vanilla JavaScript.” In this talk I will complicate that question by introducing the Audio WebAPI, it’s challenges, and how using a framework like Tone.js evens out the process of working with browsers and provides essential functionality that is difficult to write on your own. The presentation will serve as an example of how writing vanilla JavaScript can be a good learning experience, and how that process can lead a programmer to use a framework for accelerated development.I live in a small house with two children. As such, we rely on sound machines for bedtime. While the app-store has a plethora of free/freemium sound apps, the quality is not great, and they are often bloated with unwanted features. Being the intrepid developer I asked myself, why get something for free when I can build it myself?Using the MDN documentation, I built a simple working sound machine in chrome desktop. It was after deploying the app and attempting to run it in ios that the fuzziness of browser support became apparent. In this talk I will demonstrate the basics of the Web Audio API. I will show some of my solutions to solve browser support issues, and how much simpler those become when using the Tone.js framework. I will also demonstrate some of the synthesizing features of Tone.js, and attempt to recreate one or more of those features in vanilla JavaScript. Here is a very rough sound machine implementation: https://claytron5000.github.io/sound-machine/