I want to change the frequency of a HTML video to play at a different frequency/pitch.

I have seen that I am able to change an audio element's output with the following code:

https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode/detune

var source = audioCtx.createBufferSource();
source.detune.value = 100; // value in cents

So I have tried the following:

const videoElement = document.getElementById("video");

const audioCtx = new AudioContext();
const source = audioCtx.createBufferSource();
source.detune.value = 100;

const mediaSource = audioCtx.createMediaElementSource(videoElement);
mediaSource.connect(source);

But I am facing the following issue:

Uncaught DOMException: 
Failed to execute 'createMediaElementSource' on 'AudioContext': 
HTMLMediaElement already connected previously to a different MediaElementSourceNode

Please let me know if I am heading in the right direction and if this issue can be fixed. TA.