javascript - Changing the pitch of an audio element without external libraries? - Stack Overflow

I would like a way to change the pitch of an Audio() element through JavaScript. Something simple like:

var audio = new Audio()
audio.src = "sound_effect.wav"
audio.pitch = 0.5 //Halving the frequency
audio.play()

EDIT: I now discovered AudioContext(), and I have the following code:

//Import sounds
var SOUNDS = {};
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var audioContext = new AudioContext();
function loadSound(name,success,err) {
    var request = new XMLHttpRequest();
    request.open('GET', 'sounds/'+name+'.wav')
    request.responseType = 'arraybuffer'
    request.onload = function() {
        audioContext.decodeAudioData(request.response, function(buffer) {
            SOUNDS[name] = buffer;
            (success || (function(){}))()
        }, err || function(msg) {console.error(msg)});
     }
     request.send();
 }
 function playSound(name,param) {
     param = param || {}
     var s = SOUNDS[name]
     var source = audioContext.createBufferSource()
     source.buffer = s
     if (param.loop) {
         source.loop = true
     }
     source.connect(audioContext.destination);
     source.start(0);
 }
 loadSound("laser",function() {
     //Onload
     playSound('laser')
 })
 loadSound("thump")

However I do not know how to change the pitch yet.

I would like a way to change the pitch of an Audio() element through JavaScript. Something simple like:

var audio = new Audio()
audio.src = "sound_effect.wav"
audio.pitch = 0.5 //Halving the frequency
audio.play()

EDIT: I now discovered AudioContext(), and I have the following code:

//Import sounds
var SOUNDS = {};
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var audioContext = new AudioContext();
function loadSound(name,success,err) {
    var request = new XMLHttpRequest();
    request.open('GET', 'sounds/'+name+'.wav')
    request.responseType = 'arraybuffer'
    request.onload = function() {
        audioContext.decodeAudioData(request.response, function(buffer) {
            SOUNDS[name] = buffer;
            (success || (function(){}))()
        }, err || function(msg) {console.error(msg)});
     }
     request.send();
 }
 function playSound(name,param) {
     param = param || {}
     var s = SOUNDS[name]
     var source = audioContext.createBufferSource()
     source.buffer = s
     if (param.loop) {
         source.loop = true
     }
     source.connect(audioContext.destination);
     source.start(0);
 }
 loadSound("laser",function() {
     //Onload
     playSound('laser')
 })
 loadSound("thump")

However I do not know how to change the pitch yet.

• javascript
• html5-audio

Share Follow edited May 13, 2016 at 11:13 The Awesome Nerd asked May 13, 2016 at 9:30 The Awesome NerdThe Awesome Nerd 8511 silver badge1010 bronze badges 3

• anything searched so far ? – Asim Khan Commented May 13, 2016 at 9:36
• yes i did but all i found was AudioContext() and i don't know how to simply change the pitch! – The Awesome Nerd Commented May 13, 2016 at 9:40
• 2 Please have a look at this thread – Asim Khan Commented May 13, 2016 at 9:43

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You've done all of the heavy lifting. The last part is to add the pitch value in your code. More info from MDN.

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

 function playSound(name,param) {
     param = param || {}
     var s = SOUNDS[name]
     var source = audioContext.createBufferSource()
     source.buffer = s
     if (param.loop) {
         source.loop = true
     }
     source.connect(audioContext.destination);
     // set the value of the pitch here
     source.detune.value = // value of pitch
     source.start(0);
 }