time-pitch-player

A browser audio player that changes playback speed and pitch. Decoding runs on the main thread. Varispeed, time-stretch, and pitch shift run in an AudioWorklet, in Wasm. The Wasm module is included in the package, so there is nothing else to host.

Install

npm install @arikata-nobuaki/time-pitch-player

Usage

import { TimePitchPlayer } from '@arikata-nobuaki/time-pitch-player';

const player = new TimePitchPlayer();

button.addEventListener('click', async () => {
  await player.loadUrl('/sample.mp3', 'sample.mp3');
  await player.play();
});

Call play() inside a user gesture. That call resumes the AudioContext.

Audio must be in a format the browser can decode with decodeAudioData.

Playback

| Method | Description | | --- | --- | | loadFile(file) | Decode a File and load it | | loadUrl(url, label) | Load from a URL. label is used in the error message | | play() | Start playback | | pause() | Pause | | stop() | Stop and return to the start |

Properties

Assigning a property updates playback that is already loaded.

| Property | Default | Description | | --- | --- | --- | | playbackRate | 1 | Playback speed. Negative values play in reverse. The engine clamps this to ±16 | | pitch | 0 | Pitch in semitones. The engine clamps this to ±48 | | pitchFollowsSpeed | true | When true, pitch follows speed. When false, speed and pitch are independent | | currentTime | 0 | Position in seconds. Assigning it seeks | | volume | 1 | Gain, from 0 to 1 | | loop | false | Loop playback |

When pitchFollowsSpeed is true, the engine ignores pitch and changes speed and pitch together from playbackRate. When it is false, playbackRate sets the duration and pitch sets the pitch.

Read-only state:

| Property | Description | | --- | --- | | duration | Length in seconds | | sampleRate | Sample rate | | playing | true while playing | | peaks | Waveform peaks, a Float32Array of up to 900 values |

Callbacks

| Property | Called when | | --- | --- | | onposition | The playhead moves. The argument is { seconds, duration, playing } | | onended | Playback reaches the end | | onerror | Processing fails. The argument is an error message |

player.onposition = ({ seconds, duration }) => {
  console.log(seconds, duration);
};

License

MIT