Menu
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?
480
Ensure the Allow sites to play sound (recommended) option is enabled in the Chrome sound settings (chrome://settings/content/sound.) Make sure the page is not muted by right-clicking on its tab. If it's muted, you'll see an Unmute site option.
To beep a sound on a button click using JavaScript, it does not require a lengthy code to implement. However, you need to embed the source of the beeping music using the HTML tab and provide the link of the audio in src.
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()
160
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;
}
}
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.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
