javascripttypescriptweb-audio-apiaudio-processing

How to do time streching audio playback using javascript in 2019?


I'm looking for a up-to-date solution to slow down / speed up the audio playback without changing the pitch (so-called "time-stretch"). The processing should be as fast as possible (audio is speech recording). Using Web Workers would be good, too.

I'm using Web Audio API. Native HTML5 is not an option for my application.

I found some solutions for time-stretching, but these are partly very old and not maintained anymore or there are no examples to use them. The list of solutions I found is from here. This post on StackOverflow is old and probably not the best solution by this time.

Is there any solution that is well implemented, stable and usable in Typescript?


Solution

  • The easiest way without any third-party library is to use HTML5 Audio and its Audio class. It allows to change the playbackSpeed while preserving the pitch.

    More Information:

    https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate

    const player = new Audio();
    player.src = "someURL";
    player.playbackRate = 1.5;
    player.play();
    

    Why is HTML audio an option in my situation?

    I was wrong, using HTML audio is an option for me. Before, I had thought I can't use HTML Audio because it offers playback positions in seconds only. Now I read the binary data from the audio file and get the duration in samples. In my application I convert the sample position to seconds automatically. That's fine and now I can use HTML Audio.