├── LICENSE
├── README.md
├── audio-fx.js
├── audio-fx.min.js
├── index.html
└── sounds
    ├── music.m4a
    ├── music.mp3
    ├── music.ogg
    ├── pool.m4a
    ├── pool.mp3
    ├── pool.ogg
    ├── single.m4a
    ├── single.mp3
    └── single.ogg


/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2011, 2012, 2013, 2014, 2015, 2016 Jake Gordon and contributors
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy
 4 | of this software and associated documentation files (the "Software"), to deal
 5 | in the Software without restriction, including without limitation the rights
 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 7 | copies of the Software, and to permit persons to whom the Software is
 8 | furnished to do so, subject to the following conditions:
 9 | 
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 | 
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
20 | 
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | Javascript AudioFX (v0.4.0)
  2 | ===========================
  3 | 
  4 | Simple HTML5 `<audio>` support.
  5 | 
  6 |  * Easily `play()` and `stop()` any audio track.
  7 |  * Add support for audio **pools** for short, repeating, overlapping sounds.
  8 |  * Add support for `loop` in browsers that don't natively support it.
  9 |  * Load appropriate audio format based on current browser support (ogg|mp3|m4a|wav)
 10 |  * Callback when audio has loaded and `canplay`
 11 | 
 12 | You can find an article about how the library works [here](https://jakesgordon.com/writing/revisiting-html5-audio/)
 13 | 
 14 | Download
 15 | ========
 16 | 
 17 | You can download [audio-fx.js](https://github.com/jakesgordon/javascript-audio-fx/raw/master/audio-fx.js), or
 18 | get the minified version [here](https://github.com/jakesgordon/javascript-audio-fx/raw/master/audio-fx.min.js)
 19 | 
 20 | Alternatively:
 21 | 
 22 |     git clone git@github.com:jakesgordon/javascript-audio-fx
 23 | 
 24 |  * All code is in audio-fx.js
 25 |  * Minified version available in audio-fx.min.js
 26 |  * Less than 1.2K (minified)
 27 |  * No 3rd party library is required
 28 |  * Demo can be found in /index.html
 29 | 
 30 | Usage
 31 | =====
 32 | 
 33 | Include `audio-fx.js` in your application.
 34 | 
 35 | In its simplest form, load music by constructing an `AudioFX` object:
 36 | 
 37 |     var music = AudioFX('sounds/music.mp3');
 38 | 
 39 | The `AudioFX` instance has the simplest possible API:
 40 | 
 41 |     music.play();     // play the audio
 42 |     music.stop();     // stop the audio
 43 |     music.audio;      // the underlying <audio> tag
 44 | 
 45 | **However**, different browsers support different formats so you should provide at
 46 | least `ogg` and `mp3` formats if you want to support a broad range of browsers:
 47 | 
 48 |     var music = AudioFX('sounds/music', { formats: ['ogg', 'mp3'] });
 49 | 
 50 | Other options include `volume`, `loop` and `autoplay`:
 51 | 
 52 |     var music = AudioFX('sounds/music', {
 53 |                           formats: ['ogg', 'mp3', 'm4a', 'wav'],
 54 |                           volume:   0.5,
 55 |                           loop:     true,
 56 |                           autoplay: true });
 57 | 
 58 | Audio Pools
 59 | ===========
 60 | 
 61 | If you want to play a short sound effect multiple overlapping times (e.g. game explosions and effects) then
 62 | you need multiple `<audio>` tags.
 63 | 
 64 | The AudioFX library provides this functionality by accepting a `pool` option:
 65 | 
 66 |     var shoot = AudioFX('sounds/shoot', { formats: ['ogg', 'mp3'], pool: 10 });
 67 | 
 68 | The `AudioFX` instance has the exact same API as above:
 69 | 
 70 |     music.play();     // play the first available audio
 71 |     music.stop();     // stop the audio
 72 |     music.audio;      // an ARRAY containing the pool of underlying <audio> tag
 73 | 
 74 | Waiting for Sounds to Load
 75 | ==========================
 76 | 
 77 | The `AudioFX` method accepts an optional 3rd parameter that can contain a function that will be
 78 | called when the `<audio>` tag has loaded:
 79 | 
 80 |     var name    = 'sounds/music';
 81 |     var options = { formats: ['ogg', 'mp3'] };
 82 |     var onload  = function() { alert('music is ready'); }
 83 | 
 84 |     var music = AudioFX(name, options, onload);
 85 | 
 86 | BrowserSupport
 87 | ==============
 88 | 
 89 | If necessary, you can examine the `AudioFX.supported` property to find out what kind of `<audio>` support
 90 | is provided by your browser.
 91 | 
 92 | It will be `false` if there is no support at all, otherwise it will contain:
 93 | 
 94 |     AudioFx.supported.ogg;  // (true|false)
 95 |     AudioFx.supported.mp3;  // (true|false)
 96 |     AudioFx.supported.m4a;  // (true|false)
 97 |     AudioFx.supported.wav;  // (true|false)
 98 |     AudioFx.supported.loop; // (true|false) - some browsers dont (yet) support the loop option
 99 | 
100 | 
101 | NOTES
102 | =====
103 | 
104 | After starting this project, I discovered the [buzz](http://buzz.jaysalvat.com/) library which also
105 | abstracts HTML5 audio functionality... and does it much more thoroughly than `audio-fx`
106 | but does not have support for creating an audio **pool**.
107 | 
108 | ... I should probably just be forking buzz and trying to add pooling support to it, but I haven't
109 | had the time yet. If you have any thoughts let me know ! 
110 | 
111 | Also note that browser support for HTML5 audio is still pretty messed up. This library works pretty
112 | well in most modern desktop browsers, IE9, Chrome13, FF5, Opera11, but Safari continues to have delays
113 | that make short sounds unusable. Also mobile browsers are very limited in their support for HTML5 Audio.
114 | 
115 | You can find an example rant [here](http://www.phoboslab.org/log/2011/03/the-state-of-html5-audio).
116 | 
117 | So... Very Early experimentation. YMMV
118 | 
119 | License
120 | =======
121 | 
122 | [MIT](http://en.wikipedia.org/wiki/MIT_License) license.
123 | 
124 | Sample Sounds
125 | =============
126 | 
127 | NOTE: the sample sounds included in this project are royalty free sounds licensed from
128 | [Lucky Lion Studios](http://luckylionstudios.com/) and [Premium Beat](http://www.premiumbeat.com/). They
129 | are licensed ONLY for use in this project. If you fork this code you must provide your own sample sounds.
130 | 
131 | Thanks for your honesty!
132 | 
133 | Contact
134 | =======
135 | 
136 | If you have any ideas, feedback, requests or bug reports, you can reach me at
137 | [jakesgordon@gmail.com](mailto:jakesgordon@gmail.com), or via
138 | my website: [jakesgordon.com](https://jakesgordon.com/)
139 | 
140 | 
141 | 
142 | 
143 | 
144 | 


--------------------------------------------------------------------------------
/audio-fx.js:
--------------------------------------------------------------------------------
  1 | AudioFX = function() {
  2 | 
  3 |   //---------------------------------------------------------------------------
  4 | 
  5 |   var VERSION = '0.4.0';
  6 | 
  7 |   //---------------------------------------------------------------------------
  8 | 
  9 |   var hasAudio = false, audio = document.createElement('audio'), audioSupported = function(type) { var s = audio.canPlayType(type); return (s === 'probably') || (s === 'maybe'); };
 10 |   if (audio && audio.canPlayType) {
 11 |     hasAudio = {
 12 |       ogg: audioSupported('audio/ogg; codecs="vorbis"'),
 13 |       mp3: audioSupported('audio/mpeg;'),
 14 |       m4a: audioSupported('audio/x-m4a;') || audioSupported('audio/aac;'),
 15 |       wav: audioSupported('audio/wav; codecs="1"'),
 16 |       loop: (typeof audio.loop === 'boolean') // some browsers (FF) dont support loop yet
 17 |     }
 18 |   }
 19 | 
 20 |   //---------------------------------------------------------------------------
 21 | 
 22 |   var create = function(src, options, onload) {
 23 | 
 24 |     var audio = document.createElement('audio');
 25 | 
 26 |     if (onload) {
 27 |       var ready = function() {
 28 |         audio.removeEventListener('canplay', ready, false);
 29 |         onload();
 30 |       }
 31 |       audio.addEventListener('canplay', ready, false);
 32 |     }
 33 | 
 34 |     if (options.loop && !hasAudio.loop)
 35 |       audio.addEventListener('ended', function() { audio.currentTime = 0; audio.play(); }, false);
 36 | 
 37 |     audio.volume   = options.volume || 0.1;
 38 |     audio.autoplay = options.autoplay;
 39 |     audio.loop     = options.loop;
 40 |     audio.src      = src;
 41 | 
 42 |     return audio;
 43 |   }
 44 | 
 45 |   //---------------------------------------------------------------------------
 46 | 
 47 |   var choose = function(formats) {
 48 |     for(var n = 0 ; n < formats.length ; n++)
 49 |       if (hasAudio && hasAudio[formats[n]])
 50 |         return formats[n];
 51 |   };
 52 | 
 53 |   //---------------------------------------------------------------------------
 54 | 
 55 |   var find = function(audios) {
 56 |     var n, audio;
 57 |     for(n = 0 ; n < audios.length ; n++) {
 58 |       audio = audios[n];
 59 |       if (audio.paused || audio.ended)
 60 |         return audio;
 61 |     }
 62 |   };
 63 | 
 64 |   //---------------------------------------------------------------------------
 65 | 
 66 |   var afx = function(src, options, onload) {
 67 | 
 68 |     options = options || {};
 69 | 
 70 |     var formats = options.formats || [],
 71 |         format  = choose(formats),
 72 |         pool    = [];
 73 | 
 74 |     src = src + (format ? '.' + format : '');
 75 | 
 76 |     if (hasAudio) {
 77 |       for(var n = 0 ; n < (options.pool || 1) ; n++)
 78 |         pool.push(create(src, options, n == 0 ? onload : null));
 79 |     }
 80 |     else {
 81 |       onload();
 82 |     }
 83 | 
 84 |     return {
 85 | 
 86 |       audio: (pool.length == 1 ? pool[0] : pool),
 87 | 
 88 |       play: function() {
 89 |         var audio = find(pool);
 90 |         if (audio)
 91 |           audio.play();
 92 |       },
 93 | 
 94 |       stop: function() {
 95 |         var n, audio;
 96 |         for(n = 0 ; n < pool.length ; n++) {
 97 |           audio = pool[n];
 98 |           audio.pause();
 99 |           audio.currentTime = 0;
100 |         }
101 |       }
102 |     };
103 | 
104 |   };
105 | 
106 |   //---------------------------------------------------------------------------
107 | 
108 |   afx.version   = VERSION;
109 |   afx.supported = hasAudio;
110 | 
111 |   return afx;
112 | 
113 |   //---------------------------------------------------------------------------
114 | 
115 | }();
116 | 
117 | 


--------------------------------------------------------------------------------
/audio-fx.min.js:
--------------------------------------------------------------------------------
1 | AudioFX=function(){var f="0.4.0";var c=false,e=document.createElement("audio"),a=function(j){var i=e.canPlayType(j);return(i==="probably")||(i==="maybe")};if(e&&e.canPlayType){c={ogg:a('audio/ogg; codecs="vorbis"'),mp3:a("audio/mpeg;"),m4a:a("audio/x-m4a;")||a("audio/aac;"),wav:a('audio/wav; codecs="1"'),loop:(typeof e.loop==="boolean")}}var d=function(m,i,l){var k=document.createElement("audio");if(l){var j=function(){k.removeEventListener("canplay",j,false);l()};k.addEventListener("canplay",j,false)}if(i.loop&&!c.loop){k.addEventListener("ended",function(){k.currentTime=0;k.play()},false)}k.volume=i.volume||0.1;k.autoplay=i.autoplay;k.loop=i.loop;k.src=m;return k};var h=function(i){for(var j=0;j<i.length;j++){if(c&&c[i[j]]){return i[j]}}};var g=function(i){var k,j;for(k=0;k<i.length;k++){j=i[k];if(j.paused||j.ended){return j}}};var b=function(o,j,m){j=j||{};var i=j.formats||[],l=h(i),k=[];o=o+(l?"."+l:"");if(c){for(var p=0;p<(j.pool||1);p++){k.push(d(o,j,p==0?m:null))}}else{m()}return{audio:(k.length==1?k[0]:k),play:function(){var n=g(k);if(n){n.play()}},stop:function(){var r,q;for(r=0;r<k.length;r++){q=k[r];q.pause();q.currentTime=0}}}};b.version=f;b.supported=c;return b}();


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html> 
 2 | <html>
 3 | <head>
 4 |   <title>HTML5 Audio</title>
 5 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 6 | </head> 
 7 |  
 8 | <body> 
 9 | 
10 |   <h1>Experimenting with HTML5 Audio</h1>
11 | 
12 |   <input type='button' value='POOL'   onclick="pool.play()"   />
13 |   <input type='button' value='SINGLE' onclick="single.play()" />
14 | 
15 |   <script src="audio-fx.js"></script>
16 |   <script>
17 | 
18 |     var music  = AudioFX('sounds/music',  { formats: ['ogg','mp3','m4a'], volume: 0.1, loop: true, autoplay: true });
19 |     var pool   = AudioFX('sounds/pool',   { formats: ['ogg','mp3','m4a'], volume: 0.1, pool: 20                   });
20 |     var single = AudioFX('sounds/single', { formats: ['ogg','mp3','m4a'], volume: 0.1                             });
21 | 
22 |   </script>
23 | 
24 | </body> 
25 | </html>
26 | 


--------------------------------------------------------------------------------
/sounds/music.m4a:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jakesgordon/javascript-audio-fx/786b25f2d74aade38cc6d3bfe7a03468dc467bb5/sounds/music.m4a


--------------------------------------------------------------------------------
/sounds/music.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jakesgordon/javascript-audio-fx/786b25f2d74aade38cc6d3bfe7a03468dc467bb5/sounds/music.mp3


--------------------------------------------------------------------------------
/sounds/music.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jakesgordon/javascript-audio-fx/786b25f2d74aade38cc6d3bfe7a03468dc467bb5/sounds/music.ogg


--------------------------------------------------------------------------------
/sounds/pool.m4a:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jakesgordon/javascript-audio-fx/786b25f2d74aade38cc6d3bfe7a03468dc467bb5/sounds/pool.m4a


--------------------------------------------------------------------------------
/sounds/pool.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jakesgordon/javascript-audio-fx/786b25f2d74aade38cc6d3bfe7a03468dc467bb5/sounds/pool.mp3


--------------------------------------------------------------------------------
/sounds/pool.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jakesgordon/javascript-audio-fx/786b25f2d74aade38cc6d3bfe7a03468dc467bb5/sounds/pool.ogg


--------------------------------------------------------------------------------
/sounds/single.m4a:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jakesgordon/javascript-audio-fx/786b25f2d74aade38cc6d3bfe7a03468dc467bb5/sounds/single.m4a


--------------------------------------------------------------------------------
/sounds/single.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jakesgordon/javascript-audio-fx/786b25f2d74aade38cc6d3bfe7a03468dc467bb5/sounds/single.mp3


--------------------------------------------------------------------------------
/sounds/single.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jakesgordon/javascript-audio-fx/786b25f2d74aade38cc6d3bfe7a03468dc467bb5/sounds/single.ogg


--------------------------------------------------------------------------------