A Minimal Template for Interactive Web-based Demonstrations of Musical Machine Learning

Sep 11, 2026

New machine learning methods are being built to tackle problems across domains, including music. Accessible demonstrations of newly created models can broaden participation and spark informed discussion. Yet interactive demonstrations are not commonly practiced in musical machine learning research. This paper proposes a web-focused template for showcasing symbolic musical machine learning models, distributed as an easy-to-use open-source codebase with modular design for reuse, faster implementation, and browser-based interactivity.

LanguageEnglish

CategoryPresentations

FormatPDF

Pages6

Reading Time2 min

AccessFree to download

Abstract

Introduction

Motivation for interactive demos

Web Audio API and interactivity

Related Works

Audio rendering in Python

IUI Workshops'19, March 20, 2019, Los Angeles, USA. A Minimal Template for Interactive Web-based Demonstrations of Musical Machine Learning Vibert Thio, Hao-Min Liu, Yin-Cheng Yeh, and Yi-Hsuan Yang Research Center for Information Technology Innovation, Academia Sinica, Taipei, Taiwan {vibertthio, paul115236, ycyeh, [yang}@citi.sinica.edu.tw](yang}@citi.sinica.edu.tw) ABSTRACT New machine learning algorithms are being developed to solve problems in different areas, including music. Intuitive, accessible, and understandable demonstrations of the newly built models could help attract the attention of people from different disciplines and evoke discussions. However, we notice that it has not been a common practice for researchers working on musical machine learning to demonstrate their models inan interactive way. To address this issue, we present in this paper an template that is speciﬁcally designed to demonstrate symbolic musical machine learning models on the web. The template comes with a small codebase, is open source, and is meant to be easy to use by any practitioners to implement their own demonstrations. Moreover, its modular design facilitates the reuse of the musical components and accelerates the implementation. We use the template to build interactive demonstrations of four exemplary music generation models. We show that the built-in interactivity and real-time audio rendering of the browser make the demonstration easier to understand and to play with. It also helps researchers to gain insights into different models and to A/B test them. ACM Classiﬁcation Keywords D.2.2 Design Tools and Techniques: Modules and interfaces; H.5.2 User Interfaces: Prototyping; H.5.5 Sound and Music Computing: Systems Author Keywords Musical interface; web; latent space; deep learning ACM Reference Format Vibert Thio, Hao-Min Liu, Yin-Cheng Yeh, and Yi-Hsuan Yang. 2019. A Minimal Template for Interactive Web-based Demonstrations of Musical Machine Learning. In Joint Proceedings of the ACMIUI 2019 Workshops, Los Angeles, USA, March 20, 2019, 6 pages. INTRODUCTION Recent years have witnessed great progress in applying ma chine learning (ML) to music related problems, such as thumbnailing [10], music generation [5, 7, 21], and style transfer [15] . To demonstrate the result of such musical machine learning models, researchers usually put the audio output as the result IUI Workshops'19, March 20, 2019, Los Angeles, USA. Copyright ©2019 for the individual papers by the papers' authors. Copying permitted for private and academic purposes. This volume is published and copyrighted by its editors. on the accompanying project websites. This method works well in the early days. However, as the ML models themselves are getting more complicated, some concepts ofthe algorithms may not be clearly expressed with only static sounds. In the neighboring ﬁeld of computer vision, many interactive demonstrations of ML models have been developed recently. Famous examples include DeepDream [18], image/video style transfer [8, 23], and DCGAN [19] . These interactive demos provoke active discussions and positive anticipation about the technology. Nevertheless, the demonstration of musical machine learning models is not as easy in the case of computer vision, due to the fact that it involves audio rendering (i.e., we cannot simply use images for demonstration) . Web Audio API, a high-level JavaScript API for processing and synthesizing audio in web applications, was published only in 2011, which is not far from now compared to WebGL and other features of the browser. Furthermore, interactivity is needed to improve understandability and create engaging experiences. Musical machine learning is gaining increasing attention. We believe that if more people from other ﬁelds, such as art and music, start to appreciate the new models of musical machine learning, it is easier to create an active community and to stimulate new ideas

FAQs

Why is an interactive demonstration template important for musical machine learning models?

The paper argues that static outputs are insufficient as models become more complex, and interactive demos can make concepts clearer while engaging broader audiences.

What does the proposed template provide to users?

It provides a small open-source codebase designed specifically for demonstrating symbolic musical machine learning models on the web, with modular structure for reuse.

How does the browser improve the demonstration experience?

Built-in interactivity and real-time audio rendering help users understand the models more easily, play with them, and support direct A/B testing of different models.

Sep 11, 2026

Uploaded by Caleb Sterling