But looking ahead (a.k.a. "Margin before") is important, because, for example, there are certain sounds in speech that you can start a word with that are not very loud. But it's not good to skip such sounds just because of that. The speech would become harder to understand. For example, "throb" would become "rob".

Here is where the "stretching" part comes in. It's about how we're able to "look ahead" and slow down shortly before a loud part. Basically it involves slightly (~200ms) delaying the audio before outputting it (and that is for a purpose!).

Imagine that we're currently playing a silent part, so the playback rate is higher. Now, when we encounter a loud part, we go "aha! That might be a word, and it might start with 'th'".

As said above, we always delay (buffer) the audio for ~200ms before outputting it. So we know that these 200ms of buffered audio must contain that "th" sound, and we want the user to hear that "th" sound. But remember: at the time we recorded the said sound, the video was playing at a high speed, but we want to play back that 'th' at normal speed. So we can't just output it as is. What do we do?

What we do is we take that buffered (delayed) audio, and we slow it down (stretch and pitch-shift it) so that it appears to have been played at normal speed! Only then do we pass it to the system (which then passes it to your speakers).

And that, kids, is why we call it "the stretching algorithm".

For more details, you can check out the comments in its source code.

If below you see a block of text instead of a chart, go here.

graph
%%graph TD

    %% TODO add links https://mermaid.js.org/syntax/flowchart.html#interaction

    watchAllElements["watchAllElements
        looks for media elements
        on the page"]
    click watchAllElements "https://github.com/WofWca/jumpcutter/blob/890a2b25948f39f1553cb9afb06c4cc10c9d2a19/src/entry-points/content/watchAllElements.ts"

    AllMediaElementsController["AllMediaElementsController
        the orchestrator,"]
    click AllMediaElementsController "https://github.com/WofWca/jumpcutter/blob/44fadb1982fbe7dd20c64741ae9e754ba9261042/src/entry-points/content/AllMediaElementsController.ts"

    watchAllElements -->|"onNewMediaElements(...elements)"| AllMediaElementsController
    AllMediaElementsController -->|original HTMLMediaElement| chooseController{choose
        appropriate
        controller}
    chooseController -->|original HTMLMediaElement| ElementPlaybackControllerCloning & ElementPlaybackControllerStretching


    %% ElementPlaybackControllerCloning

    %% subgraph "ElementPlaybackControllerCloning"

    ElementPlaybackControllerCloning["ElementPlaybackControllerCloning
        controls playbackRate
        of the original
        HTMLMediaElement"]
    click ElementPlaybackControllerCloning "https://github.com/WofWca/jumpcutter/blob/3ff011318dc9af407eaf9f4cc8d33dfafaf0b53e/src/entry-points/content/ElementPlaybackControllerCloning/ElementPlaybackControllerCloning.ts"

    Lookahead["Lookahead
        plays back the clone element
        to look for silence ranges"]
    click Lookahead "https://github.com/WofWca/jumpcutter/blob/988ec301bf2e6c07e6cc328f73a4177f7504f1e1/src/entry-points/content/ElementPlaybackControllerCloning/Lookahead.ts"

    ElementPlaybackControllerCloning --> | original HTMLMediaElement reference| Lookahead
    Lookahead --> |silence ranges| ElementPlaybackControllerCloning

    createCloneElementWithSameSrc --> |HTMLMediaElement clone| Lookahead
    Lookahead --> |original HTMLMediaElement reference| createCloneElementWithSameSrc
    click createCloneElementWithSameSrc "https://github.com/WofWca/jumpcutter/blob/e9daff122f12263a50fb1c4a10e4b13c7fd190cf/src/entry-points/content/ElementPlaybackControllerCloning/createCloneElementWithSameSrc.ts"

    cloneMediaSources["`cloneMediaSources
        intercepts all MediaSources
        and holds a clone
        HTMLMediaElement`"]
    click cloneMediaSources "https://github.com/WofWca/jumpcutter/blob/5bcfdaf53066c5ac4f664e089b916118afe37ae2/src/entry-points/content/cloneMediaSources/lib.ts"

    cloneMediaSources -->|HTMLMediaElement clone| Lookahead
    Lookahead -->|getMediaSourceCloneElement| cloneMediaSources

    SilenceDetector1["SilenceDetector
        utilizes Web Audio API
        to detect silence"]
    click SilenceDetector1 "https://github.com/WofWca/jumpcutter/blob/e3283500aeefe994a8be5bb7fdd8f7308e895f4f/src/entry-points/content/SilenceDetector/SilenceDetectorProcessor.ts"
    Lookahead --> |clone HTMLMediaElement audio| SilenceDetector1
    SilenceDetector1 --> |
        SILENCE_END &
        SILENCE_START events
        with timestamps
    | Lookahead

    %% end
    
    %% ElementPlaybackControllerStretching

    %% subgraph "ElementPlaybackControllerStretching"

    ElementPlaybackControllerStretching["ElementPlaybackControllerStretching
        controls playbackRate
        of the original
        HTMLMediaElement"]
    click ElementPlaybackControllerStretching "https://github.com/WofWca/jumpcutter/blob/3ff011318dc9af407eaf9f4cc8d33dfafaf0b53e/src/entry-points/content/ElementPlaybackControllerStretching/ElementPlaybackControllerStretching.ts"

    SilenceDetector2["SilenceDetector
        utilizes Web Audio API
        to detect silence"]
    click SilenceDetector2 "https://github.com/WofWca/jumpcutter/blob/e3283500aeefe994a8be5bb7fdd8f7308e895f4f/src/entry-points/content/SilenceDetector/SilenceDetectorProcessor.ts"
    ElementPlaybackControllerStretching --> |original HTMLMediaElement audio| SilenceDetector2
    SilenceDetector2 --> |
        SILENCE_END &
        SILENCE_START events
        with timestamps
    | ElementPlaybackControllerStretching

    %% end


    %% Telemetry

    %% ElementPlaybackControllerCloning & ElementPlaybackControllerStretching --> |telemetry| AllMediaElementsController

    Popup["Popup
        (UI, chart)"]
    click Popup "https://github.com/WofWca/jumpcutter/blob/44fadb1982fbe7dd20c64741ae9e754ba9261042/src/entry-points/popup/App.svelte"
    AllMediaElementsController --> |telemetry| Popup

Donations are great, but what they do is tell the user "we don't really want money, but if you insist, you can send some", or even "nobody pays for this product, so you'll be one of the generous few, and if you donate $5 I'll only be able to buy one coffee with it and will not really be incentivized to continue the development".

A lot of people are willing to pay. They want to really purchase the product and be done with it fair and square instead of running a charity and throwing money at the bottomless pit of "coffees", wondering "did I give enough?".

Of course by this I'm not saying I don't appreciate donations. They mean a lot to me. They are more personal. I am just describing that in terms of revenue they're not as powerful.