Playing game sounds on JavaScript \ jQuery - javascript

I would like to play short sounds in my new JavaScript game.
It is a poker game so the sounds are pretty short (dealt card sound, shuffle deck sound, your turn beep etc.)
I Googled before posting here but all I could see was some MP3 players that actually have "play\stop" buttons, (which are not good for me)
Any ideas?

Put an <audio> element on your page.
Get your audio element and call the play() method:
document.getElementById('yourAudioTag').play();
Check out this example: http://www.storiesinflight.com/html5/audio.html
This site uncovers some of the other cool things you can do such as load(), pause(), and a few other properties of the audio element.
When exactly you want to play this audio element is up to you. Read the text of the button and compare it to "no" if you like.
Alternatively
http://www.schillmania.com/projects/soundmanager2/
SoundManager 2 provides a easy to use API that allows sound to be played in any modern browser, including IE 6+. If the browser doesn't support HTML5, then it gets help from flash. If you want stricly HTML5 and no flash, there's a setting for that, preferFlash=false
It supports 100% Flash-free audio on iPad, iPhone (iOS4) and other HTML5-enabled devices + browsers
Use is as simple as:
<script src="soundmanager2.js"></script>
<script>
// where to find flash SWFs, if needed...
soundManager.url = '/path/to/swf-files/';
soundManager.onready(function() {
soundManager.createSound({
id: 'mySound',
url: '/path/to/an.mp3'
});
// ...and play it
soundManager.play('mySound');
});
Here's a demo of it in action: http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/

One Word. SoundManager2

I believe the common way is to make an invisible flash applet (as "sound library") and trigger it to play the sounds appropriately.

Related

Is there a way to play a video with JS, that isn't play()?

I need to be able to press a button and play an embedded video. This would be easy, however, I need the method to be compatible with IE4 (yes, that was launched in 1997). It's for a school project, and one of the requirements is to work on the school's system (which uses IE4).
I would be able to just use play(), but this requires IE9+.
Is there another way to play a video with a button, excluding play()?
I'm pretty sure that the <video> tag, which is what interfaces with JavaScript's play() method, is a part of HTML5 which is not supported by IE4. Honestly, this is what Flash was made for.

Play sound in website in both computer and other devices

I'd really love to know how to make a div play sound in an onclick event for the computer and other devices. And if there is a way to change an already existing piano script to work on other devices
The already existing code: jsfiddle.net/Nf68y
You can use a jQuery library like jPlayer for cross browser/device audio playback: http://jplayer.org/
But you might also just want to look in the html5 audio element, to see what that is all about :)

Why can't I play sounds more than once using HTML5 audio tag?

This is how the sound is "stored":
<audio id = "hammer" src="res/sounds/Building/hammer.wav"></audio>
In the actual game (which I use sounds for), I use this to play the sound:
function playSound(soundid)
{
document.getElementById(soundid).currentTime = 0;
document.getElementById(soundid).play();
}
But the sound plays only the first time, and never again!
I tried resetting the "currentTime" in the console to 0, but I literally get this:
>document.getElementById("hammer").currentTime = 0
0
>document.getElementById("hammer").currentTime
0.340...
Why is this happening, how do I fix it?
See this slide and the preceding three slides of Evan Wallace and Justin Ardini's presentation on html5 game dev.
For all the resources to make some awesome games, part of their talk: http://madebyevan.com/gamedevclass/
Audio still doesn't work consistently across all browsers, as of right now:
An element must be reloaded in Chrome or it will only play once
An element must not be reloaded in Firefox or there will be a delay
function playSoundEvent() {
if (window.chrome) elems[index].load()
elems[index].play()
index = (index + 1) % elems.length
}
I had this issue recently with an html5. Worked everywhere except safari.
Using load() before calling play() solved this problem. It also helps to make sure that sound effects do not overlap with heavy clickers when event-handlers trigger sounds.
Here what I used
<audio id="sound-one" preload="auto">
<source src="http://myurl/foo.mp3"></source>
<source src="http://myurl/foo.ogg"></source>
</audio>
click here
Jquery
$("#navigation-id") //this attached is to an element on the page
.mouseover(function() {
sound-one.load();
sound-one.play();
});
A few months before I faced the same issue while developing a Piano in HTML5. When a key was pressed again and again I had to stop, rewind and play the audio on each key press. I used the same code written in this question which worked in Firefox and Safari, but not in Chrome. In Chrome it didn't play again. Finally I had to modify the code to make it work. Added one listener for the event onseeked, then set currentTime = 0 and in the event handler invoked play. This worked for me. Similarly I had to wait for the event of one action before giving next action in many places. It was an old version of Chrome. Later I found out that even some versions of Browsers support Audio, the way each one supports is slightly different. This difference won't be visible if we simply put an audio tag and play the audio, but will experience when we try to control the audio using Javascript. Anyways its all about older versions of Browsers, its much much better in all latest versions. So please check in the latest version of Chrome ( Even my piano worked in Chrome 10 without the code modification ) and regarding the audio format, I would suggest you to keep mp3 and ogg files of your audio instead of single wav file.
For anyone stumbling across this post in the future, the audio tag is really not a great way to do game audio.
I'd highly recommend taking the time to learn the WebAudio API instead.

flash-free continuous audio player - is this possible?

edit: condensed question:
How can I create a flash-free continuous music player (one that is uninterrupted as the user navigates the site)
So I want to set up a website with an audio player that behaves in much the same way as that of many flash players on sites such as hypem.com and pitchfork.com, however I want to avoid Flash altogether if possible so I can retain compatibility with Apple mobile devices.
(edit: mind you i am not creating something mobile-specific! just a webpage with an audio-player feature that can be used on an Ipad/Iphone/Ipodtouch)
I've been looking everywhere for info and so far some people have thrown around that Javascript might provide a solution, but all the players I've found use Javascript AND Flash and do not address the continuous play issue.
Take a look at the html5 <audio> tag.
http://www.catswhocode.com/blog/mastering-the-html5-audio-property
Try and keep your SO questions specific. Ask your site layout question in another question.
https://stackoverflow.com/faq
Here is some code that should get you on the right track
First the html audio element supported by all the browsers but in the IE family only IE9
<audio id="test" controls="controls" type="audio/ogg">Your browser doesn't support the audio tag.</audio>
Then the javascript
window.onload=function(){
var pre='';
var arr=['songTitle1','songTitle2','songTitle3'];
var ind=0;
var ele=document.getElementById('test');
ele.src=(ind++)+'.ogg';
ele.play();
//when the song ends start a new one
ele.onended=function(){
ele.src=(ind++)+'.ogg';
//if you are done with all the songs loop back to the beginning.
//Or you could add some code to load more songs from the server
ind=ind==arr.length?0:ind;
ele.play();
}
}
This just takes an array of song titles and plays through them assuming that you have the ogg files in the same directory as the html file. Right now I think ogg is the only format that you can play on all browsers.

Is there a way to embed an mp3 player in a website that isn't flash based (so that the website is iPhone OS compatible)

I did a lot of searching for what I thought would be a pretty common question, but I came up with nothing. If there is another thread with a similar topic, please let me know.
Basically, I'm looking for a way to have an .mp3 file play in a website without relying on a flash-based player. I've searched w3 schools and every forum I can think of, but every media player I've found so far has been some sort of proprietary flash player.
Doesn't HTML support some sort of native player? I've found some that rely on Windows Media Player which is close, but I want the player to work on an iPhone and something tells me WMP won't get that done...
PS, as I'm thinking more about this this idea just popped into my head: a javascipt player and inside the <noscript> tag, put a flash player? I'm running a music blog (# http://www.freshoncampus.com) so the less code per post, the better...
Yes you can, with HTML 5.
This is a pretty good explanation of how you might go about doing this.
The caveat is that HTML5 support is not universal, but iOS devices (iphone) have a good start with supporting HTML5.
Edited to add:
From the question, it's hard to discern if you're looking for a way to play multiple mp3's with a nice gui interface, or just use audio as a background.
For the former, you will need to use Javascript to handle controls, and loading of the src element (I'd search for custom built javascript or jquery plugins to handle this).
For the latter, my solution above will work.
Also, background music in a webpage is highly annoying to most users, so caveat emptor.
You could go with something like http://www.schillmania.com/projects/soundmanager2/
which should autodetect the best option to play the sound.
jplayer? Not sure about MP3/OGG thing though...
First, HTML5's “audio” tag.
Second, you can use “embed” tag — it will play with whatever browser plugin is installed (not just WMP).
Not sure what would work in iPhone, though.
(and I might be wrong about exact tag names)

Categories

Resources