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.
Related
This question already has an answer here:
"Autoplay" HTML5 audio player on mobile browsers
(1 answer)
Closed 6 years ago.
I have created a webpage using html and css, I wanted to start an audio file in the background automatically once the page is loaded. Thus I have used <audio> tag in my code.
Now, this works perfectly fine when I open my page in my desktop, but when I open same page through mobile's browser, audio does not starts automatically. It requires manual option.
Can anyone provide me with the solution?
Most of the mobile browsers don't support audio autoplay to save mobile bandwidth on behalf of the user! The similar issue already discussed before, but i have something to share with you which may help you out.
Chrome does not allow applications to play HTML5 audio
after googlling little bit i found an article on codeproject which is really helpful in your case. here is the link.
Fix autoplay issue in mobile browser
i hope it will help you to come out from trouble, thanks.
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!
How can I get the current playing time from an embedded video on a webpage? Is there simply an attribute that can be obtained using JavaScript from one of the common embedded video players? Or do I need to do a work-around like make my own pause and play buttons and keep track of time manually while feeding the play/pause commands to the video using JavaScript? The latter is much more ugly in my opinion. Other solutions?
The html5 video tag provides some decent support for this kind of thing.
The following page gives some decent ideas:
http://www.broken-links.com/2009/10/06/building-html5-video-controls-with-javascript/
I assume there might be a HTML5 or some JS that can be used to play sound?
Before you mark this as duplicate, this question is old, so I believe outdated:
Play sound in iPhone web app with Javascript?
Maybe you could use a JS event, send a event to your UIWebView delegate and then play a sound with in objective-c ?
Best solution I think ^^
For a solution in HTML5 I have no idea.
You could take a look at
Sound effects in JavaScript / HTML5
But I'm not sure this solution would work on all device. It depends if you need to play the sound "often" or not.
The current version of mobile Safari (iOS 5.0.1) has poor audio HTML5 support. The play method of an Audio object will work sporadically, but only as the result of direct user click and it will not preload (expect a random delay on first play.) This makes it impractical to use audio in your iPhone web applications at this time.
If noticed some issues in Chrome but otherwise seems to work in other major browsers.
HTML:
<audio id="sound_example" title="Sample" autobuffer>
<source src="sample1.wav" type="audio/x-wav">
<source src="sample2.ogg" type="application/ogg">
<source src="sample3.mp3" type="audio/mpeg">
</audio>
Javascript:
var playThis = document.getElementById("sound_example");
if (!playThis.paused) {
playThis.pause();
playThis.currentTime = 0.0;
}
tmpAudio.play();
Obviously you'll need to provide your own wav, ogg, or mp3 to try this yourself. The check for it being paused is there so if the condition is met, it will reset before playing it again.
If you'd like to skip the audio tag altogether you can go with this:
var sound_example = new Audio("sample3.mp3");
sound_example.play();
There are some minor pros and cons to both approaches but if you're needs are straight-forward then either should suffice.
I'm working on my HTML and Javascript project and I wanted to add music for the website..
Is there any way I can put more than one song in the code to be played? And is there anyway that the song will continue when openning the next page?
Without using Flash, you are bound to a new HTML5 technique <audio/>, which is supported in Firefox 3.5+, Safari 4+, Chrome 3+, and Opera 10+. Here is an example:
<audio src="path/to/some/audio.file" autoplay>
This is a fall back for old browsers, here you could implement a Flash based audio player
</audio>
I'm not sure if it is possible to continue the song when opening the next page, maybe you could store player data in a cookie.
Here is a similar question with some good answers. The comments in that question list many duplicate questions as well. Many of those answers require HTML5. There are also various Flash-based answers as well.
If you want the song to continue when opening the next page you will need to use frames (easy) or make your website entirely AJAX-driven (more tedious).