How to change the pitch with JavaScript?

Question

Let’s say you have an audio variable called audio and it stores a sound.

I know how to change the speed for example:

audio.playBackRate = 2;

But I don't know how to change the pitch.

Is there an audio.pitch attribute or do I have to create it myself?

I want to do something like this:

var audio = new Audio();
audio.src = "sound_effect.wav";
audio.pitch = 2 //doubling the pitch but there is no pitch attribute
audio.play();

There is this answer that changes the pitch but I’m not sure if it’s what you want. It is SignatureSmileyFaceProductions answer on this link: https://stackoverflow.com/a/49749868/10424104 — Lloyd Nicholson, Dec 21 '18 at 09:45

score 0 · Answer 1 · answered Dec 22 '18 at 08:31

0

I think you need to use a library to apply pitch shifting to your audio signal. You could use the Tone.js PitchShift. See this JSFiddle of GitHub user Jexim for a working example. I copy-pasted the most importand parts from this fiddle below:

Javascript:

var player = new Tone.Player("http://example.com/my-audiofile.mp3").sync().start(0);

var pitchShift = new Tone.PitchShift({
    pitch: -5
}).toMaster();

player.connect(pitchShift);

Tone.Buffer.on('load', () => {
    alert('Ready for play');
});

window.play = function() {
    Tone.Transport.start();
}

HTML:

<script src="https://unpkg.com/tone@next/build/Tone.js"></script>
<button onclick="play()">Play</button>

answered Dec 22 '18 at 08:31

Marius

1,529
6
21

Thank you for this information. Is there a way to play this without clicking the play button? – chipmunkpassion Dec 22 '18 at 14:25
1

You can replace the code in `Tone.Buffer.on('load', ...)` with `Tone.Buffer.on('load', () => { Tone.Transport.start(); });` to play it without user interaction. – Marius Dec 24 '18 at 03:35
1

The link to the audio file in JSFiddle link is broken – Andre Ravazzi Oct 26 '20 at 23:31

ggorlen · Answer 2 · 2022-05-30T02:28:16.520

Tone's API appears to have changed somewhat since this answer. Here's code that reflects the latest version (as of 2022):

const url = "https://upload.wikimedia.org/wikipedia/commons/9/90/De-Wolfgang_Amadeus_Mozart.ogg"; // use any valid audio file if this disappears over time...

const btn = document.querySelector("button");
btn.addEventListener("click", async () => {
  await Tone.start();
  const player = new Tone.Player({
    url,
    loop: true,
    autostart: false,
  });
  await Tone.loaded();
  const pitchShift = new Tone
    .PitchShift({pitch: -8})
    .toDestination()
  ;
  player.connect(pitchShift);
  player.start();
});

<script src="https://unpkg.com/tone@14.7.77/build/Tone.js"></script>
<button>Play</button>

How to change the pitch with JavaScript?

2 Answers2

Linked