UPDATE: See also Simple Slot machine game using HTML5 Part 3: Loading.
The HTML slot element—part of the Web Components technology suite—is a placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together. JackpotCity is an online casino that was launched Slot Html5 in 1998, is licensed by the Malta Gaming Authority and is eCOGRA-certified. This casino offers Slot Html5 players more than 500 casino games, to be played online with safe and secure banking options and 24/7 support via Slot Html5 email and live chat.
In part 1 I presented simple slots machine purely in HTML5. This part extends the basic implementation with audio support. The game itself is simple slot machine that has only one winning line and we add effects for roll start, reel stop and win/loss.
Try audio enabled game here. Note that loading time is significantly longer in audio enabled version. Debug text under button tells what audio system game uses for your browser.
Original non audio version from part 1 is here.
How to support Audio
Web game can implement audio in 3 main ways.
1. Flash player audio. (e.g. use SoundManager2 library)
2. HTML5 Audio (Buzz is easy way to use it)
3. Web Audio API. (See HTML5 Rocks for tutorial)
Flash audio is pretty much deprecated now, as only older browsers will still need it that most of don’t support HTML5 canvas anyway.
HTML5 Audio works very well for desktop browsers, but has only nominal support for mobile (Android & iOS). It’s generally too moody for tablets or mobile.
Web Audio API is supported only by latest browsers, but it works reliably e.g. in Safari iOS 6.0.
Web Audio API has two implementations in wild, the WebKit (iOS, Safari, Chrome) and the Standard (latest Firefox). Fortunately differences are small.
The libraries listed above simplify implementation a lot, but it’s easier to understand how these technologies work with simple examples. So I implemented both methods 2 and 3 from scratch.
Some caveats with audio.
Css Slot Machine
- Game initial loading time will increase. Audio files can be pretty large and they must be usually preloaded so they can be played on game start
- iOS (iPad/iPhone) does not allow autoplay for audio. Audio must be enabled by playing some sound in click event handler.
Implementation
Initialization function accepts array of objects that have required audio file name in id property and callback that is called after audio has been initialized and loaded.
First code checks if mp3 or ogg is supported. Firefox requires .ogg and it’s easy to convert at least in OS/X or Linux with ffmpeg. Exact command line depends little on ffmpeg version.
$ ffmpeg -i win.mp3 -strict experimental -acodec vorbis -ac 2 win.ogg
When format is known, the code checks wether to use Web Audio API or normal HTML5 Audio.
Both initialization functions attempt to load the desired format of needed audio files and sets play function in objects that is used to play the effect. If audio initialization fails, this play function is set to dummy empty function.
HTML5 Audio initialization function creates Audio objects and sets src to point to the audio file. Downloading is handled automagically by the browser.
Web Audio initialization is bit more complicated, it needs to download the audio with XHR requests.
NOTE: Chrome supports XMLHttpRequest only when loading pages over HTTP. If you load the HTML file locally you’ll see erros like this in the error console:XMLHttpRequest cannot load file:///Users/teemuikonen/work/blog/slot2/audio/roll.mp3. Cross origin requests are only supported for HTTP.
After audio has initialized, the game can play any effect simply by calling play function for the effect. If audio initialization or loading failed, the play is simply a dummy function.
Code is available in Github.
Free Html5 Slot Machine Source Code
Continue to Simple Slot machine game using HTML5 Part 3: Loading.