Skip to content

Choppy audio #7

@page200

Description

@page200

Duplicated issue check

  • I confirm that I have searched the existing issues

package version

same as https://spessasus.github.io/SpessaSynth/ from 2025-06-10

Description

In most JavaScript MIDI players, including SpessaSynth, audio is choppy sometimes. For example while and after quickly switching between other Chrome tabs or repeatedly scrolling large web pages up and down. Chrome and Firefox are affected. Tested on a low-end laptop that first released only several years ago by a major brand.

Here is a screencast. The problems in the video are a mix of the actual choppy audio I heard (which was moderate during that particular session) and additional choppiness due to the computer being too busy to record everything perfectly. But this gives a good idea of what can be heard sometimes.

I tested many JavaScript MIDI players. Only one of them works well: webaudiofont, and specifically this version posted at surikov/webaudiofont#92 (comment). (This version, unlike the main branch, also plays back audio when the tab is not selected). It repeatedly calls setTimeout() to schedule the next few notes, as far as I recall using AudioBufferSourceNode.start() here in the code.

setTimeout() is important because otherwise playback in Chrome may fail if we schedule all notes of the entire song at once, as described in that same comment thread.

Possible solution: In what way is SpessaSynth different from the working approach, which calls AudioBufferSourceNode.start() inside setTimeout()? Can (a new branch of) SpessaSynth be rewritten to call AudioBufferSourceNode.start() inside setTimeout()?

An advantage of fixing SpessaSynth over using webaudiofont is that webaudiofont downloads audio files for each note of each instrument instead of a small SoundFont file.

Expected Behavior

Uninterrupted audio

Reproduction steps

  1. Start playing any MIDI file, for example PASSPORT.MID
  2. Quickly switch between other Chrome tabs or repeatedly scroll a large webpage up and down.

Browser Engine

Other (please specify in additional info)

Additional info

Chrome and Firefox

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions