Download
Demo
- Overview
- Documents
User Rating: 4.5/5 ( 1 votes)
Your Rating:
- Ion.Sound - Plugin for playing sounds on events
- Crossbrowser support: Google Chrome, Mozilla Firefox, Opera, Safari, IE(9.0+) and mobile browsers
- GitHub Page.
- Ion.Sound freely distributed under terms of MIT licence.
- Ion.Sound includes 25 free sounds
Usage
Add the following libraries to the page:
- jQuery
- ion.sound.min.js
Prepare sound-files (25 sounds are included) and put them in some folder (eg. "sounds"):
- my_cool_sound.mp3
- my_cool_sound.ogg
It is not enough to have only Mp3-file, you should make Ogg-file too, because not all browsers support Mp3.
You can easily convert you Mp3-s to Ogg-s at Media.io or at CloudConvert.org.
Initialisation
To initialise plugin call this method.
$.ionSound({ sounds: [ "my_cool_sound" ] });
And play sound!
$.ionSound.play("my_cool_sound");
If your are new person in web development
and you are not sure how to correctly install the plugin to your web-page, please download
this demo example
Settings
Settings | Default | Description |
---|---|---|
sounds | ["water_droplet:0.5"] |
Optional property, you can set your own sounds collection here. It is array. :0.5 - optional individual volume. Example: sound_name:0.2 |
path | "static/sounds/" | Optional property, set path to folder with sounds. |
multiPlay | true | Optional property, if set to false, will allow plugin to play only 1 sound at once. |
volume | 0.5 | Optional property, will set base volume from 0.0 to 1.0 |
An example of a customised plugin:
$.ionSound({ sounds: [ // set needed sounds names "beer_can_opening", "bell_ring:0.3", // :0.3 - individual volume "branch_break", "metal_plate", "pop_cork:0.8", // :0.8 - individual volume "staple_gun", "water_droplet:0.4" // :0.4 - individual volume ], path: "sounds/", // set path to sounds multiPlay: false, // playing only 1 sound at once volume: "0.3" // not so loud please });
Methods
Playing sound:
$.ionSound.play("button_tiny"); // For example playing sound on button click $("#myButton").on("click", function(){ $.ionSound.play("button_tiny"); }); // or reset the sound volume $("#myButton").on("click", function(){ $.ionSound.play("button_tiny:0.5"); });
Stop sound playback:
$.ionSound.stop("button_tiny");
Remove sound from memory:
$.ionSound.kill("button_tiny");
Destroying the plugin:
$.ionSound.destroy();