TMS Blog: Web Audio API Part 2/2

TMS Blog: Web Audio API Part 2/2

Oct 06, 2022

TMS Blog: Web Audio API Part 2/2: In the first of our pair of Web Audio API posts (which can be viewed here), we used TMS WEB Core to create a functional music player app, including a visualizer created with D3 (a JS charting library we first covered in this post), and a play list created with Tabulator (a JS datagrid library we covered in a series of seven blog posts, starting with this one).  We also employed an additional JavaScript library, jsmediatags, to help with reading metadata from whatever music files were loaded into the player, such as the song, artist, and cover art from an .MP3 file.  As far as the Web Audio API was concerned, we created a simple AudioGraph that just connected an AudioBufferSourceNode to an AudioGainNode to play back music tracks, with a master volume control.  We then put all the JavaScript code into its own unit, WebAudioAPIHelper.pas, so that it would be less work to create music players with different user interfaces.  Overall, this involved a lot of little pieces that were ultimately combined to produce something familiar - a typical music "Player" app.

This time out, we're going to do pretty much the same sort of thing, but with the goal of using TMS WEB Core to create a music editor app, referred to here as the TrackEditor.  Something along the lines of a basic GarageBand-style app rather than a basic WinAmp-style app.  We'll be extending the WebAudioAPIHelper.pas unit with more JavaScript code, with the same goal of keeping the main project unit JavaScript-free.  We'll be calling on some earlier JavaScript libraries that we've already covered to help with a handful of interesting UI challenges that need to get solved along the way.  And, naturally, we'll be going further into the Web Audio API itself, using more AudioNodes and constructing a considerably more complex AudioGraph.

Enjoy this post?

Buy Andrew Simard a pizza

More from Andrew Simard