UPDATE: See also Simple Slot machine game using HTML5 Part 3: Loading.
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
Gambler's Oasis was founded on the principal of providing top quality casino slot machines and gaming devices to your home at the most reasonable price. Whether you want one slot machine or twenty slot machines, your home game room can become an oasis, a refuge, a haven for fun for you, your family and friends. HTML / JS Slot Machine Simulator. Ask Question Asked 6 years, 5 months ago. This code is a slot machine simulator that uses elements of both HTML and JavaScript. Yes Four Queens has 11 Silver Strike Machines in play and El Cortez has one. There is also a rumor that the Plaza will have a Machine in for the end of January. Note that the regular $10 clear capsule Strikes are now clad composition but During tournament week there is a red capsule Strike placed in Machines that has the.999 Silver insert,approx.6Troy oz.
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.
Slot Machine Javascript Code
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.
Vue Js Slots
- 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.
Js Machine Learning
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.
Slot Machine Javascript
Continue to Simple Slot machine game using HTML5 Part 3: Loading.