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();
JS Tutorial
