CODEWITHSUNDEEP
javascriptaudio
user36956
user36956

Reputation: 320

Playing a sound in a browser (Chrome), from javascript

I am writing an html page. I want it to make sounds, as specified by some javascript as it runs.

In the html, as recommended in the answers I have read here, I have the line

<embed src="wavs/beep.wav" autostart="true" width="0" height="0" id="beep" 
  enablejavascript="true">

This plays the sound at load time, so I am confident I have given a valid path to a valid .wav file. (I will set autostart to false once everything is working.)

I have a function

function playSound ( soundname )   
  {
    var thissound = document.getElementById( soundname );
    thissound.Play();
    alert( "Played " + soundname );
  }

which I call using 

  playSound( "beep" );

But when that call is made, there is no sound, although the alert happens. It looks to me as if I am doing everything in the recommended way, but I must have got something wrong. What should I check next?

Upvotes: 15

Views: 37538

Answers (4)

IliasT
IliasT

Reputation: 4311

Use the native HTML5 Audio API

In Chrome's console try creating a new instance of the Audio element, passing in the path of the sound you want to buffer. For example, if we want a typewriter sound we can do something like:

const typeWriter = new Audio("https://www.freesound.org/data/previews/256/256458_4772965-lq.mp3");

Note: for this exact sound to buffer and avoid a CSRF issue, you must be working in a console at www.freesound.org

typeWriter now represents an html audio tag.

Try making the sound loop by setting typeWriter.loop = true

Finally, play/pause the sound with typeWriter.play() & typeWriter.pause()

Upvotes: 30

Belvi Nosakhare
Belvi Nosakhare

Reputation: 3255

Have tried this code, and it works well in most browsers used the js method below

function playSound(soundfile_ogg, soundfile_mp, soundfile_ma) {
    if ("Audio" in window) {
        var a = new Audio();
        if (!!(a.canPlayType && a.canPlayType('audio/ogg; codecs="vorbis"')
                .replace(/no/, '')))
            a.src = soundfile_ogg;
        else if (!!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/,
                '')))
            a.src = soundfile_mp;
        else if (!!(a.canPlayType && a.canPlayType(
                'audio/mp4; codecs="mp4a.40.2"').replace(/no/, '')))
            a.src = soundfile_ma;
        else
            a.src = soundfile_mp;

        a.autoplay = true;
        return;
    }
}

Upvotes: 5

Crusher
Crusher

Reputation: 64

You are getting an error because the getElementById gives you an embed element and not an audio element. embed element does not know how to play. In other words, there is no play method in embed element. Use the following code to play it properly.

<html>
<script>
function playSound ( soundname )
  {
    var thissound = document.getElementById( soundname );
    thissound.play();
    alert( "Played " + soundname );
  }
</script>
<body>
  <audio src="wavs/beep.wav" id="beep" autostart="false"></audio>
  <input type=button onclick="playSound('beep')">play</input>
  </body>
  </html>

One more note. Depending on the browsers you might want to support, you need multiple versions of the audio sources defined. Refer to this for details.

Upvotes: 2

Joris Lindhout
Joris Lindhout

Reputation: 205

Shouldn't it be .play() - with a lowercase 'p'?

Depending on what browsers you want to support, you might want to consider replacing your <embed> with an HTML5 <audio> tag: http://www.storiesinflight.com/html5/audio.html. This page has some working js examples as well!

Upvotes: 1

Related Questions