Speech Playground: An Interactive Tool for Speech Analysis and Comparison

# Speech Playground: An Interactive Tool for Speech Analysis and Comparison
Source: [https://arxiv.org/html/2607.00418](https://arxiv.org/html/2607.00418)
McIntosh Saito Minematsu

###### Abstract

This paper presents Speech Playground, an interactive speech visualization and comparison tool\. While existing tools such as Praat are excellent, it can be cumbersome to integrate them with modern deep learning representations and use them for comparison\. Speech Playground addresses this by combining a Python backend with a web\-based frontend for interactive exploration of multiple feature types, including continuous, discrete, and variable\-length representations\. It includes TextGrid and forced alignment support together with configurable distance and alignment settings for visual and auditory comparison\. Speech Playground is intended for use in speech research, representation validation, and computer\-aided pronunciation training \(CAPT\)\-oriented experimentation\.

###### keywords:

speech analysis, utterance comparison, CAPT

## 1Introduction

Interactive tools for speech analysis such as Praat are widely used in speech research and are also useful for speech feedback in CAPT settings\. However, recent deep\-learning\-based speech research has produced many different representations such as self\-supervised or articulatory features\. Comparing these requires Python\-based encoders, alignment code, and ad\-hoc visualization scripts, which is cumbersome\.

In this paper, we present Speech Playground111[https://github\.com/stephenmac7/speech\-playground](https://github.com/stephenmac7/speech-playground), an extensible interactive tool for visualization of speech features and utterance comparison\. Speech Playground has two modes:Analysisfor single\-track visualization \([Figure1](https://arxiv.org/html/2607.00418#S2.F1)\) andDiff\([Figure2](https://arxiv.org/html/2607.00418#S2.F2)\) for utterance comparison\.

Speech Playground provides a single interactive environment in which users can compare speech encoders, continuous, discrete, and variable\-length representations, and alternative distance and alignment settings on the same utterance pair\. We envision the following use cases: \(1\)Speech researchusing speech features unavailable in other tools and Diff mode to explain variation in speech with respect to a reference; \(2\)Representation validationby checking whether a representation captures a specific contrast or behaves consistently with the audio; and \(3\)CAPT\-oriented experimentationusing Diff mode to show where and how model speech and learner speech are different\.

## 2Overview

![Refer to caption](https://arxiv.org/html/2607.00418v1/fig/phonfeat.png)Figure 1:Sample viewerwith TextGrid annotation and phonological vector tiers\[choi2026bdt\+p\]\.Positiveandnegativeactivations are shadedpurpleandorange, respectively\.### 2\.1Architecture

Speech Playground comprises three components:

Thefrontendis a SvelteKit application that provides two primary modes:*Analysis*, for examining a single utterance, and*Diff*, for aligning and comparing two utterances\. WaveSurfer\.js is used for waveform visualization\. IndexedDB is used to manage and persist uploaded recordings and metadata such as transcription and TextGrid files\.

Thebackendis a FastAPI \(Python\) server exposing speech processing endpoints including encoding, segmentation, and alignment, lazily loading models on demand for fast startup and iteration\.

Thespeech\-processing libraryprovides a uniform interface over feature extractors, calledencoders\. Each encoder maps waveforms to a sequence of continuous frame\- or segment\-level representations\. Built\-in encoders include SSL, articulatory, phonological\-feature, and segmental representations, including SSL\-derived variable\-length representations such as ZeroSyl\[visser2026zerosyl\]\. Representations can optionally be transformed into discrete units or grouped into coarser variable\-length segments\.

The speech\-processing library also includes functions for comparing utterances \(used inDiffmode\)\. It includes functions that compute similarity matrices between utterances and perform discrete or segment\-based alignments, producing diffs with insertions, deletions, and substitutions\. Users can switch between distance measures and alignment settings, including global and semi\-global matching\. For fixed\-rate representations, Speech Playground defaults to dynamic time warping \(DTW\) viadtw\-python222[https://dynamictimewarping\.github\.io/python/](https://dynamictimewarping.github.io/python/); variable\-length segmental representations and discrete tokenizations can be compared with alternative alignment methods\.

![Refer to caption](https://arxiv.org/html/2607.00418v1/fig/overview_annot_cropped.png)Figure 2:The full UIin Diff mode\. The top tier in theQuery1shows the frame\-wise DTW distance to theModel\(higher distances inred\)\. The blue tiers2shown on theModelrepresent TextGrid tiers and are available for samples in the library with an attached TextGrid file \(indicated by a greenTGbutton\)\. The green tiers3shown on theQueryare a forced alignment using the optional MFA service\. The user is currently recording new audio for the last \`\`One wonders about its applicability to people'' sample4\(recording progress shown at5\)\.
### 2\.2Components

[Figure2](https://arxiv.org/html/2607.00418#S2.F2)shows the full UI\. It consists of a mode selector at the top right, alibraryin a sidebar on the right, and a main area on the left containingsample viewer\(s\)andconfiguration\.

Thelibrarymanages recordings and metadata \(tracks\), including transcripts and TextGrid files\. Selected tracks are visualized in one or moresample viewers, which display the waveform together with interval tiers such as annotations, encoder\-derived segments, or phonological features\. For tracks with transcripts, the viewer can also request a forced alignment333Forced alignment requires an additional backend server: [https://github\.com/stephenmac7/mfa\-service](https://github.com/stephenmac7/mfa-service)\. The sample viewer is interactive: it can be zoomed and scrolled, and users can listen to segments of the audio by dragging over the waveform or intervals\. InDiffmode, holdingShiftwhile selecting an area to play will play the corresponding audio in theothertrack's sample viewer\.

### 2\.3Workflow

![Refer to caption](https://arxiv.org/html/2607.00418v1/fig/art_inversion.png)Figure 3:Articulatory inversionfeatures\[mcghee2025training\]in Diff mode at a single frame\. Animated when a sample plays\.Selected track\(s\) are encoded and compared \(when in Diff mode\) according to the selected configuration whenever either changes, allowing users to interactively switch encoders, discretization settings, distance measures, and alignment modes while exploring the results\. Beyond locating mismatches, the aligned phonological and articulatory views can help users interpret how two utterances are different\. For example,[Figure3](https://arxiv.org/html/2607.00418#S2.F3)shows articulatory inversion features aligned at a single frame, allowing direct inspection of estimated articulator differences between the two utterances\.

## 3Conclusion

Speech Playground is an interactive tool for analyzing and comparing speech\. Its extensible design makes it easy to compare different speech representations and processing strategies within a single interface, making it useful for speech research, representation validation, and CAPT\-oriented experimentation\.

## 4Generative AI Use Disclosure

LLMs were used for coding assistance and final proofreading\.

## References