playing a sound using html5/javascript

Question

My Problem: I would like a user to hear a sound of some sort if a number is over 100.

If (x > 100) { play sound }

How would I go about this using html5/javascript. Is it possible to play sound without having an inline little video clip. The only stuff I've seen thus far has those little quicktime players embedded within the page: http://www.w3schools.com/html/html_sounds.asp

Hopefully there's a better solution? Thanks

Please checkout musquitojs.com

VJAI
– VJAI

2018-06-25 15:56:09 +00:00
Commented Jun 25, 2018 at 15:56 — VJAI
– VJAI, Commented Jun 25, 2018 at 15:56

Matt Ball · Accepted Answer · 2012-10-02 23:52:59Z

2

Use an <audio> element.

var foo = document.createElement('audio');
foo.src = 'https://dl.dropbox.com/u/8090976/Matrix%20Ring.aiff';

if (x > 100)
{
    document.getElementById('foo').play();
}

Demo: http://jsfiddle.net/mattball/ZcRt9/

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

edited Oct 2, 2012 at 23:52

answered Oct 2, 2012 at 23:41

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Apollo Over a year ago

so this will not create any inline clip, but will actually just allow me to play an audio snippet?

Matt Ball Over a year ago

Edited to use document.createElement() instead of an existing one in the page. N.B. you do not need to create a new element every time you want to play a sound; you can re-use the same one.

Apollo Over a year ago

great! so if I have the sound clip hosted on my server somewhere, I can just link to it using the whole URL??

Apollo Over a year ago

jsfiddle doesnt seem to be working for me. It is not producing any sound on either Chrome or Firefox

Matt Ball Over a year ago

My demo works for me in Safari on a Mac. It's possible that the codec isn't compatible with your OS/browser combination; try an mp3.

|

Collectives™ on Stack Overflow

playing a sound using html5/javascript

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related