javascript pitch shift with time stretch

Question

I'm a beginner learning javascript. I've got various projects in mind with an interactive page on my site related to microtonal frequencies and planetary frequencies. I need to be able to play my audio sample .wav file in a loop but have the audio sample timestretched with a corresponding change in pitch.

I tried myAudio.playbackRate = 0.5; which plays the audio 0.5 slower but keeps pitch same. I researched and found something. But how do i set preservesPitch to false or true? And this only works in 'Google Chrome' I think, so other program i found is here :
https://github.com/janesconference/KievII/blob/master/dsp/pitchshift.js

Can't seem to get it working, i don't know how i am supposed to modify it, where do i paste my Audio .wav file URL in the program ? Any other tips related to this would be much appreciated. Thanks in advance for your time and help.

Answer 1

I want to pitch shift audio as well, and after ages I found this.
I also re-formatted the code to make it easier to use for myself (you will need to replace "decode-audio-data/viper.ogg" with your own WAV or OGG filename.):

<script>
function playSound(file, speed=1, pitchShift=1, loop=false, autoplay=true) {
    /*
    Use the play() method to start the audio. if pitchShift is true
    use the stop() method to stop the audio and destroy the object.
    If pitchShift is false use the pause() method to pause and set
    the attribute currentTime to 0 to reset the time.
    */
    if(pitchShift) {
        /*
        After weeks of searching, I have finally found a way to pitch shift audio.
        Thank you Mozilla.
        2018/03/31:
            https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode/playbackRate
            https://github.com/mdn/webaudio-examples/tree/master/decode-audio-data
            https://www.w3schools.com/jsref/prop_audio_loop.asp
        Original comments:
            use XHR to load an audio track, and
            decodeAudioData to decode it and stick it in a buffer.
            Then we put the buffer into the source
        */
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        source = audioCtx.createBufferSource();
        request = new XMLHttpRequest();

        request.open('GET', file, true);

        request.responseType = 'arraybuffer';


        request.onload = function() {
            var audioData = request.response;

        audioCtx.decodeAudioData(audioData, function(buffer) {
            myBuffer = buffer;
            songLength = buffer.duration;
            source.buffer = myBuffer;
            source.playbackRate.value = speed;
            source.connect(audioCtx.destination);
            source.loop = loop;
        },

        function(e){"Error with decoding audio data" + e.error});

        }

        request.send();
        source.play=source.start
    } else {
        source=new Audio(file)
        source.playbackRate=speed
        source.loop=loop
    }
    if(autoplay) {
        source.play()
    }
    return source
}
var source
function play() {
    source=playSound('decode-audio-data/viper.ogg', pitch=2);
}

function stop() {
    source.stop(0);
    document.getElementById('play').href=''
    document.getElementById('play').innerHTML='Refresh to play again'
}
</script>
<a id="play" href="#" onclick="play()">Play</a> | <a href="#" onclick="stop()">Stop</a>