ionden/ion.sound

JavaScript plugin for playing sounds and music in browsers

JavaScript plugin for playing sounds on user actions and page events.

---

• Version: 3.0.7
• Project page and demos
• Download ZIP
• Support the plugin on GitHub sponsors

Description

• Ion.Sound — JavaScript-plugin for playing sounds based on Web Audio API.
• Plugin is working on most popular desktop and mobile browsers and can be used everywhere, from common web sites to browser games.
• For not so modern browsers plugin falls back to HTML5 audio.
• Audio-sprites support included.
• Ion.Sound freely distributed under terms of MIT licence.
• 25 free sounds included

Today websites are full of events (new mail, new chat-message, content update etc.). Often it is not enough to indicate this events only visually to get user attention. You need sounds! This library, made for playing small sounds, will help you with this task. Also, new version of Ion.Sound is capable to handle browser games audio. It has full control of loading, playing and removing audio files. And audio-sprites support of course.

Supported browsers

Desktop Windows, OS X, Linux:

• Google Chrome
• Mozilla Firefox
• Microsoft Internet Explorer 9.0+
• Opera 12.16+
• Safari 5.1+ (Safari on Windows requires QuickTime to play sounds)

Mobile:

• iOS Safari and others (with some restrictions)
• Android Google Chrome and others (with some restrictions also)
• WP8 Internet Explorer

Can i use Web Audio API and HTML5 Audio?

Demos

• Basic demo
• Advanced demo

Dependencies

• None

Usage

Import this library:

• 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
• my_cool_sound.aac

It is not enough to have only MP3-file, you should make OGG and AAC-file too, because not all browsers support MP3.
You can easily convert you MP3-s to OGG-s and AAC-s at Media.io or at CloudConvert.org.
AAC support was added to improve cross browser support of iOS 8.x devices (iPhone, iPad)

Install with npm

Use NPM to download latest version of a plugin and install it directly in to your project.

• npm install ion-sound

Install with Yarn

Use Yarn to download latest version of a plugin and install it directly in to your project.

• yarn add ion-sound

Initialisation

To initialise plugin call this method:

ion.sound({
    sounds: [
        {
            name: "my_cool_sound"
        },
        {
            name: "notify_sound",
            volume: 0.2
        },
        {
            name: "alert_sound",
            volume: 0.3,
            preload: false
        }
    ],
    volume: 0.5,
    path: "sounds/",
    preload: true
});

And play sound!

// Simple
ion.sound.play("my_cool_sound");

General settings

Option	Defaults	Type	Description
sounds	-	array	Collection of sound objects. Each object contains information about sound file and (optional) individual settings
path	-	string	Path to file
preload	false	boolean	Preloading sounds
multiplay	false	boolean	Sound multi play. If set, will allow to play multiple instances of one sound at once
loop	false	boolean/number	If set to true will enable infinite loop. Or paste a number to set loop limit
volume	1.0	number	Playback volume from 0 to 1
scope	null	object	Callbacks will be called in that object's scope
ready_callback	null	function	Called after sound file is fully uploaded (or ready to play for HTML5 audio)
ended_callback	null	function``	Called each time then sound file will reach it's end

Sound object

Option	Defaults	Type	Description
name	-	string	File name. Plugin will choose file extension automatically (.mp3, .ogg, .aac, .mp4 and etc.)
alias	-	string	Alias for sound call, optional. Normally is used to shorten ion.sound calls
sprite	-	object	Mark that sound is audio-sprite. This is an object. Example: {"part_name_1": [0, 2], "part_name_2": [2, 2]} Part_name is a name of sprite piece (it is used instead of name to play a sound). And array with time marks: [start, duration] in seconds.

And also individual: path, preload, multiplay, loop, volume, scope and callbacks

Plugin can be launched in jQuery namespace

• Use aliases to call any plugin methods: ion.sound(); -> $.ionSound();
• ion.sound.play("sound_name"); -> $.ionSound.play("sound_name");
• Etc.

Update history

---

Support Ion-series plugins development:

• Support the plugin on GitHub sponsors

• Donate direct to my Paypal account: https://www.paypal.me/IonDen

ion.sound's Issues

Add volume parameter when clicking for button sound

Does ion.sound currently have the ability to pass a volume value on a clicked event, say for example:

$("#myButton").on("click", function(){
    $.ionSound.play("button_tiny:0.5");
});

The more a user clicks the higher the volume value goes until final value of 1 as per your plugin(start from 0.3-1).

Safari sound lag

I love this plugin but it has lag issues with Safari. See how this was implemented: http://lowlag.alienbill.com/

Feature: Disable/Enable sound

Can you make feature like $.fx.off in jQuery (disable/enable all animations)?
It will be nice for game's setting like "sound on/off".

File name with reserved URL characters is not supported (FF 40 only)

I got this bug when had tried to use a file with name test#.mp3.
Symbol # should be replaced by %23 to make a request to the server.

IDM (and other download managers) issue

when i use ion.sound, or use jquery(document.createElement), download manager(default set download mp3), try to download all sound when page loading.

how can i prevent this issue? is it possible to rename sound to unknown extension?

preload sounds question

How can we prelaod sounds that we need to use in page ?

Feature: Set master volume

I can set master volume from start:
ion.sound({volume: 0.9});
but second call:
ion.sound({volume: 0.5});
doesn't work.
If i need change volume for all sounds, i have to use ion.sound.play(SoundName, { volume: Volume });
I have to make additional variables and functions for master volume configuring.

No sounds on Firefox 40 (Ubuntu)

Hi, I've tried your demo page, but no sound were played on Firefox 40.
In Chromium 44 it's perfect!

my O.S. is Ubuntu 14.04 with kernel 4.1.6.

I hope you can fix soon this issue, thanks.

iOS delays and caching - base64 pure text sounds support

As described here http://html5doctor.com/taking-web-audio-offline-in-ios-6-safari/
It would be great to support this functionality
smth like ion.sound.base64.js

Looping doesn't work on Chrome&Android

I have a problem with looping the sound on mobile device (Samsung Galaxy Tab 3, the latest Chrome version, Android 4.2). The sound plays only once. On desktop browsers everything works fine.
Does ion.sound support looping in mobile browsers?

Regards
Kuba

Sound plays on mobile app muted

Hello guys as the title says im having issued, i added this library for a mobile web app that im working on, it works well but turns out that the sound is beign played even when the mobile is muted, or in vibartinon mode, im calling the sound via onclick event. How can i fix this? is there any way?

Sound plays not suport cross domain

• I use version 1.3, thank you all for the great job;

• this version was possible to upload the files using a path 'cross domain';

  $(sounds[name]).prop("src", url);
  sounds[name].load();
  sounds[name].preload = "auto";
  sounds[name].volume = volume || settings.volume;

• in the current version does not load files using a path 'cross domain' (XMLHttpRequest );

• I tried to modify the current version to allow to call 'cross domain', modifying XMLHttpRequest will be possible? Algume have any suggestions?

• I could not update the version for that reason.

• Sorry for English, sorry for not knowing how to program, sorry for not knowing where to seek help ..

iceweasel 31.5.0 not sound

В браузере iceweasel 31.5.0 под debian 7 звуки не воспроизводятся.

Stop music if window or tab looses focus

1. It should be optional
2. It should have fork: stop at all, or lower down volume.

Can I use as a sound source of native app?

Great, Thank you for the sound source library.
As a sound source of native app, what may be used sound files?

Path problem in IE11

Hi

I have a problem in IE11. It looks like it can't load the file because it is looking at another path than the one I have defined.

I have defined a path for this specific alias because i need more files from different locations.

The code looks like this

ion.sound({
    sounds: [
        {
            alias: "test-speak",
            name: "speak_da",
            path: "http://jamvoices.dk.server1.eksakte-test.dk/wp-content/uploads/test/"
        },
    ],
    volume: 0.9,
    preload: true
});

jQuery( document ).ready(function() {
    jQuery("#player").click(function() {
        ion.sound.play("test-speak");
    });
});

When I check the developer console in IE11 it loads the file from a different path. It looks like the path is the URL of the current page, and not the one i defined:

Here is a link to the site: http://bit.ly/1IYPNgt

Stop loop

There's no way to stop the loop on a sound after you've played it as one. After you've tried to play it again...

For example:

ion.sound.play(snd, {loop: true});
ion.sound.stop(snd);
ion.sound.play(snd, {loop: false});

snd will continue to loop.

Safari bails out on the script when calling .stop() on a sound that isn't playing

Hi, and thanks for your great plugin, which I'm using in my typewriter simulator, OverType: http://uniqcode.com/typewriter

I was having an issue with my application that uses it in Safari (8.0.7/Mac), that didn't happen in Firefox or Chrome. The root cause was that I was calling $.ionSound.stop('soundname') with the name of a sound that wasn't playing (had played before but already had .stop() called on it). But Firefox and Chrome don't complain about this, whereas in Safari it is treated as a fatal error and causes the script to stop altogether:

[Error] InvalidStateError: DOM Exception 11: An attempt was made to use an object that is not, or is no longer, usable.
    stop (ion.sound.min.js, line 14)
    stop (ion.sound.min.js, line 14)
    stop (ion.sound.min.js, line 11)
    _method (ion.sound.min.js, line 4)
    stop (ion.sound.min.js, line 5)
    (anonymous function) (typewriter, line 259)
    complete (jquery.min.js, line 3)
    j (jquery.min.js, line 2)
    add (jquery.min.js, line 2)
    Xb (jquery.min.js, line 3)
    g (jquery.min.js, line 3)
    dequeue (jquery.min.js, line 3)
    complete (jquery.min.js, line 3)
    j (jquery.min.js, line 2)
    fireWith (jquery.min.js, line 2)
    i (jquery.min.js, line 3)
    tick (jquery.min.js, line 3)

Although the fault was sloppiness on my part, it would be great if ion.sound could, for the sake of Safari, handle and ignore (maybe with a console warning) any attempt to stop an already-stopped sound :)

Cheers
Ben

Alias overwrites Name?

Hi.
Is it intended for alias to overwrite name when playing?

From my tests, if an alias is set, trying to run that sound using the name fails.

sounds: [{
  alias: 'b',
  name: 'beer_can_opening'
}],

ion.sound.play('b');  // OK
ion.sound.play('beer_can_opening');  // FAIL!

Shouldn't both trigger the same?

can't play within ready_callback

Hi,

I made a small change within the setBuffer to call ready_callback after the creation of the stream.
Also added an autoplay option.

thanks for the awesome plugin =]

Sound not working on IE or Firefox

Hi there,

I'm using your plugin for a clock time project and I think it's great! Only trouble is that I'm testing it in IE and Firefox and no sounds are playing. I know this has been logged already but just thought that I'd make you aware.

Many thanks!

sounds not playing in safari 5.1.7

Hello
This plugin works in all browsers but when I used safari 5.1.7 on windows xp., I got no
sounds. Please fix this safari issue. I really like this plugin.

IOS 6.x safari doesn't play

Hi,
Safari on my iPhone 4 running IOS 6.1.3, doesn't sound neither basic nor advanced demo webpage sounds. Safari on mac does.
Any hints?

中文浏览器(chinese brower qq)

是否支持中文浏览器，qq浏览器和微信打开呢？

http://test.lckun.com/ion.soundjs.bug/bug.html

我的测试机是**魅族android 4.4.4
测试的浏览器有 chrome, qq, uc,

测试bug：在qq浏览器和微信中浏览，播放一部分就停止了，如果设置了循环播放，则只循环开始一段。

No cache should be optional

Background repeat

how to make the audio sound constantly?

No sound on iOS 8.1 Safari

Sound isn't working. I know it isn't my code because the demo site does not work.

AJAX GET errors for missing sound files.

Hi.
In dev console an error is thrown for each missing extension whenever I play a file.

// include 2 formats only.
A.mp3
A.wav

GET file:///path/to/A.ogg?1444081896506 net::ERR_FILE_NOT_FOUND
GET file:///path/to/A.mp4?1444081896508 net::ERR_FILE_NOT_FOUND
GET file:///path/to/A.aac?1444081896510 net::ERR_FILE_NOT_FOUND
 - p.load    ion.sound.min.js:7
 - p.reload    ion.sound.min.js:8
 - p.error    ion.sound.min.js:10

Isn't this essentially forcing users to include all file formats of each sound? The documentation implies adding more versions is recommended but optional.

Is there a way to suppress these errors/skip checks? I would prefer to skip unnecessary checks/errors and including files when I do not need wide-browser support.

Support multiple sound

After trying many sound library in js, finally your lib can help me play some sound(aac - iphone). It is really good, but I want to play multiple sound in the same time. Can your lib do that?

For detail: I am making a game and it require to play multiple sound effect. Every time I try to call ion.sound.play("beer_can_opening"); it cancel the previous sound and play again. It is not good in a game scene.

I hope this feature exist and if yes, please tell me or show me document about that

Thank in advance !

Change volume of playing sound

Hi,

Not really an issue but more a question - is it possible to change the volume of an already playing sound ?

Thx

No sound in chrome

I have sound working in firefox and ie yet no sound is working in Chrome. There is an XMLHTTPREQUEST failed to load error for the sounds to be loaded. Yet as stated I have sound in Firefox and ie. The plugin website works in these browsers and in chrome as well. The file path has not changed for any on the sounds. This issue is on the desktop version of Chrome.

Bower пакет

Было бы здорово оформить bower пакет, чтобы можно было легко устанавливать и следить за обновлениями :)

Sound playing in mobile Safari but not in fullscreen mode from the home screen (iPad)

I'm using jQuery.ionSound version 1.3.0 on iOS 8.1.1, but the issue already existed in iOS 7.

When I visit my site using mobile Safari, everything is fine and sounds play normally. However, when I add my site to the home screen and visit it from there, sounds don't play.

This might be a hard restriction imposed by iOS (which I'd like to know for sure), but if it isn't, I hope you can fix it.

Stop playback

Hi,

It would be nice if you can stop the playback.

I added:
var stopSound = function (name) {
var $sound = sounds[name];
$sound.pause();
$sound.currentTime = 0;
};

and

$.ionSound.stop = function (name) {
stopSound(name);
};

This seems to work however I don't know if it stays in memory of the browser like this and takes unnecessary memory, you probably know better... :)

It would also be nice to add the stop fade-out-over-time (linear, ease, etc...)

It works with zepto!

I substituted zepto for jquerry in a node.js application because I want A+ compliant promises. All of the $'s work fine just as they were except zepto ignores chains of fadeIn() and fadeOut(). ion.sound functioned flawlessly after I changed "(JQuery));" at the very end of the ion.sound file to "($));". I suspect that ion.sound with the dollar sign at the end works in both JQuery and zepto. In any case, I want to pass along this happy news, so here it is. -- David

A couple features don't work

On this page , the playback example at the bottom does not work (Mac OS 10.9.5, Firefox 35.0.1, also Chrome didn't work either).

And on this page, audio sprites do not work.

bower ion-sound not found

bower ENOTFOUND Package ion-sound not found

Stop all sounds ?

Hello,

First, thanks for ion.sound, it's great !
However, is it possible to stop all sounds ?

I tried ion.sound.stop(); but i don't know if it's still working, because i have this error :
TypeError: undefined is not an object (evaluating 'this.streams[0].stop')

Any help ?

some sounds doesn't load

Hi,

please check this simple project: https://dl.dropboxusercontent.com/u/6974/ion.soundsbug.zip
Strangely, sounds 1, 3 and 5 plays; sounds 2, 4 and 6 doesn't.
What's wrong?

volume:0 not working

Hi,
I was hoping that sound should play based on user pref stored , so when i play sound like

ion.sound.play("pop_cork", {
      volume: 0
});

Sound is still audible with intensity set at base ? is this required behavior ?

NS_ERROR_DOM_BAD_URI exception in firefox

when I test ion.sound file in local firefox browser,the browser happend exception ,NS_ERROR_DOM_BAD_URI: Access to restricted URI denied?How can i solve the problem?

Feature: prev() next() methods

Would this be possible? I need it very badly! ;)

Like:
ion.sound.next(); for next song in queue
ion.sound.prev(); for previous song
ion.sound.next('track'); for next trackname

Add script as package in NPM

We are using npm for building of assets on one project and we load all required scripts through NPM. Can you add the plugin into NPM?

Pause and Resume

Hi, how can I pause sound and then resume it.

Regards

No sounds on iOS

Hi,
I have no sounds when playing on iOS (iPhone and iPad) whereas it works perfectly on Mac and PC. I just try to play one .mp3 file and make it loop.

Any idea why ?

trigger click to play sound

Hi,

I tried using jquery trigger click event to play the sound. The function is triggered but the sound doesn't play. Wonder whether you can help me with this?

Thanks.
ian

[Question/Suggestion] Sound src as attribute, not based on key-name.

Would be possible to do something like:

ion.sound({
    sounds: [
        {name: "beer_can_opening", src:"sounds/4ULMLGD.mp3" },
        {name: "bell_ring", src:"sounds/8YYV3S98.mp3"}
    ],
    preload: true
});

Its also possible to disable the nocache param suffix?

IndexSizeError in IE11

The problem accures just before any content is rendered on the page.

The problem was caught in ion.sound ver. 3.0.0 and in the last ver. (3.0.6) it's stil here.

Any ideas?

Not run in firefox

The plugin not run in firefox

No sound on chrome on android

I get sounds on chrome on my mac.

No sounds on chrome on my android.

Anyone seen this?