We Keep Coding

How to make a webpage play a sound

I need to make a sound from a webpage immediately after load (OK/NOT OK signal depending on the case). The page is generated and I can control the content fully.
How do I do this in a modern, cross browser compatible way? I've experienced problems with <audio> tag (maybe browser issues, maybe I'm doing it somehow wrong). Currently I use a small flash player, but as you might guess, it is not a perfect solution.
And yes, the sound is exactly what the user wants, so please no "website with sound is not a good idea" -comments. Generally I would agree, but there are special cases.

Using an audio element works in modern browsers, and for older browsers, you can use an embed fallback (which may or may not work, depending on installed plugins, but if it does not work, there is not much you can do):
<audio src=maamme.mp3 controls autoplay>
<embed src=maamme.mp3>
</audio>
This creates visible controls at the place where you put this element. You can modify those controls to some extent or hide them. If you want to control more exactly when the presentation starts, you can dynamically add the element into the document instead of having it statically there. If old browsers are not very relevant, you could alternatively use an audio element without autoplay and use the HTMLMediaElement interface to start the presentation, do things when it has ended, etc.

If you wish to control the audio yourself, you can do it programatically through javascript.
window.onload = function(){
var snd = new Audio("sound/mysound.wav");
snd.play();
}
This should load the audio file and play it automatically once the page has loaded. It should be noted however that iOS limits any audio being played like this, without a user interaction (e.g. a click) because it forces the user to use up bandwidth and takes control away from them. Android, and other devices may or may not allow autoplaying audio, but all latest web browsers on desktop allow it (Chrome, FF, IE9+, Safari)

HTML5 Audio IOS(7) - Javascript Metronome

I'm creating a simple metronome web app that also displays a random note for training purposes. It works fine on desktop, but on my iPhone (IOS7) there seems to be an issue with the multiple audio elements I'm using.
I'm using one sound for the first accented beat of the measure, and then a different sound for the rest of the beats. The two audio elements look like this:
<div id="audioHide" class="hide">
<audio id="beepOne" src="http://ivandurst.com/metronome/sounds/beat.wav" preload="auto" controls="controls">Your browser is not supported. Get a better standards compliant browser!</audio>
<audio id="beepTwo" src="http://ivandurst.com/metronome/sounds/accent.wav" preload="auto" controls="controls">Your browser is not supported. Get a better standards compliant browser!</audio>
</div>
JSFiddle and Live on my site
When I hit "play" on my iPhone in the jsfiddle, I hear the first sound every first beat, but it doesn't play the second sound for the rest of the beats. Everything else works perfectly. The reason I share both links is because it behaves different in the live environment - Sometimes it only plays the first sound every beat, sometimes it plays both sounds and works properly, and sometimes it says "The operation could not be completed" and/or plays nothing.
I'm not planning on selling this as an app or anything and it doesn't have to be perfectly accurate. I just want to share it as a web app with my friends who are trying to learn the notes on an instrument. Any thoughts on what's wrong here, or ideas for a possible workaround if it's a bug/known issue?

Output sound using JavaScript [duplicate]

This question already has answers here:
How to play audio?
(22 answers)
Closed 9 years ago.
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.

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.

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.

Show controls while HTML5 video is playing

Is there a way to show the controls after a video has started playing. Basically, I'm playing a video with play(), and I want the controls to stay up for a few seconds. Currently (at least on my Android device), the controls fade once the video starts.
Toggling the controls attribute doesn't work, unfortunately.

HTML5 video on Android (iOS too) is not opened inline but in the native player (i.e. outside the browser), so the <video>-tag attributes have no control over what is going to happen in the player.
I don't know if it's possible to "hack" / set-up the native player so I guess you'll have to do research on that. I don't know of any way to remotely influence the behavior of the Android application unfortunately. In case you find out something it would be nice if you could let me know btw.
Also see a recent question of mine (which is rather discouraging unfortunately).

JavaScript - shuffling audio

I am creating a webpage that uses JavaScript to shuffle a series of audio file questions and their matching drag-and-drop answers. I have successfully implemented this using the native HTML5 audio tags but also have a fallback section for IE 7/8 since these browsers cannot read the audio tag. This fallback section uses conditional comments around object and param tags as demonstrated at the end of this article here.
It works in that it does shuffle in IE, but breaks in that it displays the ugly Media Player-style controls that I had specifically hidden, as this activity uses "play sound" buttons instead of audio player controls.
If anyone needs to see specific parts of code, just let me know.
Many thanks in advance!

Two thoughts (sorry, I'm on a mac at the moment so testing in IE isn't a great option):
I see the parameters where you're trying to hide the controls, but have you also tried applying css to the object tag or to a container wrapped around it? It might be as simple as giving a wrapper div a style of display: none or visibility: hidden.
This isn't a direct answer to your question, but have you investigated any plugins such as SoundManager 2? It uses HTML5 audio with a Flash fallback; I've used it before and had success. Obviously it requires Flash on older browsers, but if that's not an issue it could be easier than trying to figure out how to hide the controls.
It's a nice little page by the way. Good luck!
To address your second question/comment: using an object/embed tag means that you're relying on the browser/OS deciding on what plugin it will use to play audio. Some Googling turns up issues with IE and quicktime, and one possible solution:
Jan 2009 Microsoft update breaks mp3 sound objects in IE7
IE issues with quicktime
Hope it helps. SoundManager 2 might be worth trying if you keep hitting walls, just be aware that using SM2 will mandate that users with older browsers have Flash installed and unblocked.

I’ve managed to out the second issue with the audio in IE – for the shuffle script to work with the audio in IE, you have to call the shuffle BEFORE the audio code – in my case I moved all the conditional comments below the .shuffle(); stuff and it works no worries!