Html5 Slot Machine
- Once players are ready to play for real money, we provide recommendations of trusted and secure online Html5 Css3 Slot Machine casinos to join, risk-free. Play for fun without risking any money. Win rate 97.93%. Payout/Total Bonus.
- This is a slot machine game made with html5, css3 and javascript. The link to the game (Regular Version).
- 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.
- Welcome to the best place to play FREE online slots and video poker. Choose from 30+ totally FREE 3-reel and 5-reel slots. No installation or download needed, just.
UPDATE: See also Simple Slot machine game using HTML5 Part 3: Loading.
Imagination really is the only limit! Have your own HTML5, pure Javascript slot machine on your site! In a recent survey, 74% of users said the well finished game contributed “moderately or significantly” to the fun of the site. Packages provide a license for you to use this slot machine on all your sites.
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.
- 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.
Cached
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.
Best Time To Play Slot Machines
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.
Play Free Real Slot Machines
Continue to Simple Slot machine game using HTML5 Part 3: Loading.