2

I want to make an online metronome using JavaScript. Recently people around me started needing them but there isn't any decent one that doesn't use Flash. So I thought why not.

Before starting I want to make sure it's possible to do this with JavaScript. Basically all I need to know is if it's possible to output a sound, if it is then the rest should be simple enough.

So is it possible? If yes, how?

P.S.: I checked the HTML5 audio tag and I don't think it's gonna work. It's not one long file with the metronome sounds. It's a loop that runs the sound every time it should.

greduan
  • 4,770
  • 6
  • 45
  • 73
  • Not that I'm an expert on metronomes, but it should be possible to engineer a sound loop that does loop properly (ie sounds the metronome tick at the right time) and doesn't have to be a very long file, so that you could use it with the HTML5 audio tag. –  Aug 09 '13 at 20:58
  • What makes you think the audio tag doesn't work for that purpose? – JJJ Aug 09 '13 at 21:00
  • http://stackoverflow.com/questions/9419263/playing-audio-with-javascript – mahe Aug 09 '13 at 21:00
  • Please check out http://musquitojs.com – VJAI Jun 25 '18 at 15:54

2 Answers2

2

The audio tag is the right tool for this:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio

Create an audio tag - something like:

<audio id="m" loop>
    <source src="metronome.mp3">
</audio>

And either make it loop using the appropriate options on the tag (loop), or you can script it in JS:

<script>
// goes inside whatever event handler - when the user clicks a button, timer, etc.
document.getElementById('m').play(); // play the sound
</script>

This article provides a good introduction:

http://html5doctor.com/native-audio-in-the-browser/

If you need it to work in older browsers, you can resort to using Flash (which is "traditionally" how this sort of thing has been done). But as you mention - it's a good idea to avoid this for new development. The audio tag is supported in IE9+ and Chrome, FF, Safari, Opera.

Brad Peabody
  • 10,917
  • 9
  • 44
  • 63
0

You can use my play() function: http://pastebin.com/GKRx0GDk

It uses the HTML5 audio tag.

play('click.wav');

Just put that on a setInterval if you need it to repeat at a certain time.

Joe Simmons
  • 1,828
  • 2
  • 12
  • 9