Glitch Garden: Implementing an Online Technical Ear Training Environment

Glitch Garden: Implementing an Online Technical Ear Training Environment Rochelle Tham ([email protected]) – Stanford University Hongchan Choi ([email protected]) – Stanford University Link: https://rochelletham.github.io/glitchgarden/ Introduction Technical ear training is a fundamental building block for audio engineering students to strengthen their ability to recognize distinct sonic artifacts and identify different types of signal processing that could be applied to create such artifacts.1 Recent works have explored developing software applications aimed to support student ear training. Digital Audio Arts (DAA) at the University of Lethbridge has developed online applets to demonstrate specific topics such as frequency band recognition, additive audio synthesis, and fourier analysis.2 This work inspires Glitch Garden’s approach of using SVG and Web Audio to create interactive audio exercises for users to learn audio engineering concepts. Motivation Glitch Garden’s primary focus is to provide exercises on specific, simple audio effects, namely delay-based effects. Exercises include working with echo, flanger, stereo delay, phaser, chorus, and doubling. Furthermore, the application’s user interface design aims to be more accessible and approachable to avoid overwhelming users and prioritize familiarizing users with the bare, essential parameters of the audio effect. We discuss the design of the application and how we implemented it using the Web Audio API and Vue JavaScript framework. Exercise Workflow Users first pick an audio effect from the dropdown menu in “Other Exercises.” Fig. 1 displays the exercise for the echo effect. The goal is to change the slider parameters such that when the audio effect is applied to the input sound, the outcome matches the expected sound. Users can toggle between “Yours” and “Expected” to compare their current sound with the expected sound. Subsequently, the user can click “check answer” to evaluate their answer. After reviewing their answer and overall score, they can click “next exercise” to advance to a newly generated exercise of that current audio effect. 2 Thilo Schaller and Ian G. Burleigh. 2015. Using Web Audio for Ear Training of Sound Engineers. In 26th Audio Engineering Society UK Conference 2015. Audio Engineering Society (AES), Glasgow, Scotland, United Kingdom. 1 Jason Corey. 2017. Audio Production and Critical Listening: Technical Ear Training. Routledge, New York. https://doi.org/10.4324/9781315727813. 1 SVG, Vue Javascript Framework, and the Web Audio API The core buttons (play, loop, and mute/unmute) are each designed using Scalable Vector Graphics (SVG). The sliders are custom HTML elements. Feedback was taken at an informal project display and it was noted that there could be better visual measurement in each slider and methods in input control. Tick marks were added to the sliders and users can now control sliders with mouse, editable text, and arrow keys. Glitch Garden’s page template (created with HTML/Vue.js, CSS, SVG’s, JavaScript audio code) is well-structured such that it is easy to extend with more tutorials in the future. Each page has the same core buttons, and in this case of delay-based effects, the same sliders. Since the workflow of the exercise will stay the same regardless of the audio effect, a similar page template can be followed for other exercises. Additionally, since this project is open source, it can also be crowd-sourced and this extensible nature of this project will be beneficial for such effort. The Web Audio API routing graphs are used to implement the circuit and parameters provided in Jon Dattorro’s paper.3 The dry signal path is simply the input audio sent to the dry GainNode, followed by the destination node. For the wet signal, the input audio is sent to the delay subprocess then the destination node. As seen in Fig. 2, the OscillatorNode is initialized as a low frequency oscillator (LFO) to modulate the delay time parameter in the DelayNode. Parameters such as the range of the LFO, depth gain, and feedback gain vary per audio effect. The audio routing graphs of the exercises are set up such that the audio effect processing can easily be replaced by another to implement a different type of audio effect exercise. Biographies Rochelle Tham Rochelle is a Master’s student at the Center for Computer Research in Music and Acoustics at Stanford University. Her favorite sounds include footsteps and bow and arrow whooshes! Hongchan Choi Hongchan, a musician, engineer, and mentor, is dedicated to advancing web platforms for music technology and nurturing the next generation of creators. Currently, he leads a team at Google Chrome as a Tech Lead Manager, spearheading cutting-edge web capabilities, and co-chairs the W3C Audio Working Group to design advanced audio features for the web platform. Licensed under a Creative Commons Attribution 4.0 International License (CC BY 4.0). Attribution: owner/author(s). Web Audio Conference WAC-2025, November 19–21, 2025, Paris, France. © 2025 Copyright held by the owner/author(s). 3 Jon Dattorro. 1997. Effect Design, Part 2: Delay Line Modulation and Chorus. Journal of The Audio Engineering Society 45 (1997), 764–788. https://api.semanticscholar.org/CorpusID:792941. 2 1 Glitch Garden: Implementing an Online Technical Ear Training Environment Rochelle Tham, Hongchan Choi Stanford University, Center for Computer Research in Music and Acoustics (CCRMA) 9th Web Audio Conference, IRCAM, France November 2025 2 1) Motivation + Relevant Works 2) Glitch Garden Demo 3) Designing the Application 4) Implementation, Reusability of Components Outline 3 Motivation: Importance of Technical Ear Training •Technical ear training: a fundamental building block for audio engineering! •Applicable in a variety of audio work •A web-based platform: potential to support students’ practice •Flexibility in environment and schedule TURNS Concert at ZKM, July 2025. 4 Motivation: Goal Goal: Develop an online platform that introduces and offers practice for users to strengthen their audio effects and computer music knowledge at their own pace. 5 Relevant Works - Webtet Jason Corey. 2017. Audio Production and Critical Listening: Technical Ear Training. Routledge, New York. https://doi.org/10.4324/9781315727813. •Mid-side, Reverberation, Equalization, Compression, Distortion 6 Relevant Works - Quint.js Library Thilo Schaller and Ian G. Burleigh. 2015. Using Web Audio for Ear Training of Sound Engineers. In 26th Audio Engineering Society UK Conference 2015. Audio Engineering Society (AES), Glasgow, Scotland, United Kingdom. 7 •Provide exercises on specific, simple audio effects, namely delay-based effects •Echo, flanger, phaser, chorus, and doubling •User interface design: •Accessibility •Familiarity •Explore template making exercise through •Web Audio API •Vue JavaScript framework Motivation – Designing Simple Audio Effects for Beginners 14 •Take feedback from students on using Glitch Garden •Variety of audio clips to work with, add more audio effects •Grading system: more differing difficulties •Continue to explore and design flows and usable interfaces •Maintaining the code base on Github! Future Work 15 Thank you! •Thank you to the WAC organizers, Stanford University / CCRMA, and Hongchan for the support. •Rochelle Tham: [email protected] •Hongchan Choi: [email protected] •Website: https://rochelletham.github.io/glitchgarden/ Appendix 16 17 Web-based environments allow for iterative design and implementation of educational, interactive ear training for music learners. This work introduces Glitch Garden, a web-based approach that introduces and offers practice for users to strengthen their audio effects and computer music knowledge. Glitch Garden’s focus is to teach specific, simple audio effects through an accessible and approachable user interface. It is available to the public as an open source project and designed to be componentized and modularized, making it simple to extend. We describe how the application is designed and implemented with various web technologies, including the Web Audio API and the Vue JavaScript framework. We are working towards developing this tool to support accessible learning of technical ear training for music. Abstract 18 •Delay-based effects created using the same circuit and different parameter settings Modularized Structure and Web Audio API Jon Dattorro. 1997. Effect Design, Part 2: Delay Line Modulation and Chorus. Journal of The Audio Engineering Society 45 (1997), 764–788.