How to play a specific frequency with Javascript?

Question

I want a function that works like this:

playSound(345, 1000)

Which would play a tone of 345 hz for 1000 milliseconds. What is the simplest way to achieve this in JavaScript? I don't mind if it uses a sample (maybe of a sin wave, or piano), or uses the computer's hardware to generate the sound.

Never thought this can be donei mean creating waveform in a web-browser. Nice one :D — Vinay
– Vinay, Commented Aug 29, 2016 at 12:33
Awesome. Thanks @Kaiido. I might need to make another question, but I'd now like to know how to shape a sin wave to emulate a tuning fork, including attack and decay. Anyone reading know how to do this? — Robin Andrews
– Robin Andrews, Commented Aug 29, 2016 at 21:29
Check the link I gave you and the link it contains, we can't write a full tutorial for you — Kaiido
– Kaiido, Commented Aug 29, 2016 at 22:41

Cristian Ciupitu · Accepted Answer · 2019-06-18 20:44:35Z

As already pointed out in the comments, the way to do it is through the OscillatorNode.

// create web audio api context var audioCtx = new(window.AudioContext || window.webkitAudioContext)(); function playNote(frequency, duration) { // create Oscillator node var oscillator = audioCtx.createOscillator(); oscillator.type = 'square'; oscillator.frequency.value = frequency; // value in hertz oscillator.connect(audioCtx.destination); oscillator.start(); setTimeout( function() { oscillator.stop(); playMelody(); }, duration); } function playMelody() { if (notes.length > 0) { note = notes.pop(); playNote(note[0], 1000 * 256 / (note[1] * tempo)); } } notes = [ [659, 4], [659, 4], [659, 4], [523, 8], [0, 16], [783, 16], [659, 4], [523, 8], [0, 16], [783, 16], [659, 4], [0, 4], [987, 4], [987, 4], [987, 4], [1046, 8], [0, 16], [783, 16], [622, 4], [523, 8], [0, 16], [783, 16], [659, 4] ]; notes.reverse(); tempo = 100; playMelody();

If I may, don't use setTimeout here. AudioScheduledSourceNode (like the OscillatorNode)'s start() and stop() method accept a time parameter, which allows to schedule both method relatively with the AudioContext own clock. This is far more precise than any other external timing method. Also note that these nodes also have an onended event handler, so your fiddle could be rewritten to jsfiddle.net/njb91z84/113
Wow, thanks @Kaiido that's a nice update! I've would have done it this way if I knew about the feature at the time
Rather than "notes.pop()" You can use "notes.shift()" That takes the first one from the array, so you don't need to reverse the array
I was on headphones and the volume was on max, this gave me a heart attack
"The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page." And no amount of clicking or interacting will make it work.

Community · Accepted Answer · 2020-06-20 09:12:55Z

There is a library called simpleTones.js that greatly simplifies the Web Audio API to do exactly what you are attempting.

Once the library is included in your project, playing a timed frequency is as easy as calling

playTone(345, sine, 1)

345 being the frequency in Hz, sine being the wave pattern(there are other wave pattern options as well) and "1" being one second, or 1000 milliseconds.

You can download the library and read the documentation here: https://github.com/escottalexander/simpleTones.js

Best of luck on your project.

Collectives™ on Stack Overflow

How to play a specific frequency with Javascript?

2 Answers 2

5 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Linked

Related