├── .gitignore
├── LICENSE
├── Manifest
├── README.md
├── Rakefile
├── audiojs
    ├── audio.cmd.js
    ├── audio.js
    ├── audio.min.js
    ├── audiojs.as
    ├── audiojs.swf
    └── player-graphics.gif
├── demos
    ├── test1.html
    ├── test2.html
    ├── test3.html
    ├── test4.html
    ├── test5.html
    └── test6.html
├── includes
    ├── divider.png
    └── index.css
├── index.html
├── mp3
    ├── bensound-acousticbreeze.mp3
    ├── bensound-betterdays.mp3
    ├── bensound-buddy.mp3
    ├── bensound-cute.mp3
    ├── bensound-dubstep.mp3
    ├── bensound-dubstep.ogg
    ├── bensound-epic.mp3
    ├── bensound-funnysong.mp3
    └── bensound-littleidea.mp3
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .idea/
3 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2010 Anthony Kolber (http://aestheticallyloyal.com)
 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
11 | all 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
19 | THE SOFTWARE.


--------------------------------------------------------------------------------
/Manifest:
--------------------------------------------------------------------------------
1 | audiojs/audio.min.js
2 | audiojs/audiojs.swf
3 | audiojs/player-graphics.gif
4 | includes/index.css
5 | index.html


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # audio.js
 2 | 
 3 | audiojs is a drop-in javascript library that allows HTML5's `<audio>` tag to
 4 | be used anywhere. It uses native `<audio>` where available and falls back
 5 | to an invisible flash player to emulate it for other browsers. It also serves
 6 | a consistent html player UI to all browsers which can be styled used standard css.
 7 | 
 8 | It plays mp3s. **No ogg**. Because, lets be honest, in the real world, no one
 9 | really exports ogg files. Sadly, that means Opera and Firefox get flash audio.
10 | Hopefully they can add mp3 support soon.
11 | 
12 | ## Usage
13 | 
14 | 1. Put `audio.js`, `player-graphics.gif` & `audiojs.swf` in the same folder.
15 | 
16 | 2. Include `audio.js`:
17 | 
18 |         <script src="/audiojs/audio.js"></script>
19 | 
20 | 3. Initialise audiojs:
21 | 
22 |         <script>
23 |           audiojs.events.ready(function() {
24 |             var as = audiojs.createAll();
25 |           });
26 |         </script>
27 | 
28 | 4. Then you can use `<audio>` wherever you like in your HTML:
29 | 
30 |         <audio src="/mp3/juicy.mp3" preload="auto" />
31 | 
32 | ## Bugs / Contributions
33 | 
34 | - [Report a bug](https://github.com/kolber/audiojs/issues)
35 | - To contribute or send an idea, github message me or fork the project
36 | 
37 | ## Build
38 | 
39 | On OSX, you should install [closure compiler](http://closure-compiler.googlecode.com/files/compiler-latest.zip) following the instructions in
40 | [Ben's gist](https://gist.github.com/739724).
41 | 
42 | Then you can run `rake compile` from root directory and it will package `audio.js`
43 | into `audio.min.js`.
44 | 
45 | ## Compiling Flash from the command line
46 | 
47 | If you want to mess around with the flash-side of things, you will need to be
48 | able to compile the `.as` file into a `.swf`.
49 | 
50 | Using the Flex SDK (which is free), flash movies can be compiled
51 | directly from the command line. It makes life that little bit less painful.
52 | 
53 | ### Installing mxmlc
54 | 
55 | 1. Download and unzip the current 'Milestone Release' 'Open Source Flex SDK' from:
56 |    <http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4>
57 | 
58 | 2. Copy the `bin` folder to `/usr/local/bin/flex/bin/`
59 | 
60 | 3. Add `/usr/local/bin/flex/bin/` to your `PATH`
61 | 
62 | ### Compiling the SWF
63 | 
64 | Run the following command from within the `audiojs` folder.
65 | 
66 |     mxmlc audiojs.as
67 |     
68 | ### Bower package
69 | 
70 |     bower install audiojs
71 | 
72 | ### License
73 | 
74 | audio.js is released under the MIT license. Included MP3 and Ogg files are Creative Commons licensed tracks from [Bensound.com](http://www.bensound.com/)
75 | 


--------------------------------------------------------------------------------
/Rakefile:
--------------------------------------------------------------------------------
 1 | desc "Compile and commit new build to git"
 2 | task :build => [:compile, :commit_build]
 3 | 
 4 | desc "Build audio.js to audio.min.js"
 5 | task :compile do
 6 |   `closure --js=audiojs/audio.js --compilation_level=SIMPLE_OPTIMIZATIONS --js_output_file=audiojs/audio.min.js --warning_level=QUIET`
 7 | end
 8 | 
 9 | task :commit_build do
10 |   `git commit audiojs/audio.js -m "Closure compiled \`git rev-parse HEAD\`"`
11 | end
12 | 
13 | desc "Zip up a release"
14 | task :release => :compile do
15 |   `cat Manifest | zip -9 -@ audiojs.zip`
16 | end
17 | 
18 | #desc "Run the test suite"
19 | #task :test do
20 | #  `open -a Safari test/suite.html`
21 | #end


--------------------------------------------------------------------------------
/audiojs/audio.cmd.js:
--------------------------------------------------------------------------------
  1 | // A cross-browser javascript shim for html5 audio
  2 | (function(root, factory){
  3 | 	if (typeof define === 'function' && define.cmd) {
  4 | 		define(factory);
  5 | 	}
  6 | 	else {
  7 | 		root.audiojs = factory();
  8 | 	}
  9 | }(this, function(require, exports, module) {
 10 | 
 11 |   var container = {}, audiojsInstance = "audiojsInstance", audiojs = "audiojs";
 12 |   // Use the path to the audio.js file to create relative paths to the swf and player graphics
 13 |   // Remember that some systems (e.g. ruby on rails) append strings like '?1301478336' to asset paths
 14 |   var path = (function() {
 15 |     var re = new RegExp('audio(\.min)?\.js.*'),
 16 |         scripts = document.getElementsByTagName('script');
 17 |     for (var i = 0, ii = scripts.length; i < ii; i++) {
 18 |       var path = scripts[i].getAttribute('src');
 19 |       if(re.test(path)) return path.replace(re, '');
 20 |     }
 21 |   })();
 22 |   
 23 |   // ##The audiojs interface
 24 |   // This is the global object which provides an interface for creating new `audiojs` instances.
 25 |   // It also stores all of the construction helper methods and variables.
 26 |   container[audiojs] = {
 27 |     instanceCount: 0,
 28 |     instances: {},
 29 |     // The markup for the swf. It is injected into the page if there is not support for the `<audio>` element. The `$n`s are placeholders.  
 30 |     // `$1` The name of the flash movie  
 31 |     // `$2` The path to the swf  
 32 |     // `$3` Cache invalidation  
 33 |     flashSource: '\
 34 |       <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="$1" width="1" height="1" name="$1" style="position: absolute; left: -1px;"> \
 35 |         <param name="movie" value="$2?playerInstance='+audiojs+'.instances[\'$1\']&datetime=$3"> \
 36 |         <param name="allowscriptaccess" value="always"> \
 37 |         <embed name="$1" src="$2?playerInstance='+audiojs+'.instances[\'$1\']&datetime=$3" width="1" height="1" allowscriptaccess="always"> \
 38 |       </object>',
 39 | 
 40 |     // ### The main settings object
 41 |     // Where all the default settings are stored. Each of these variables and methods can be overwritten by the user-provided `options` object.
 42 |     settings: {
 43 |       autoplay: false,
 44 |       loop: false,
 45 |       preload: true,
 46 |       imageLocation: path + 'player-graphics.gif',
 47 |       swfLocation: path + 'audiojs.swf',
 48 |       useFlash: (function() {
 49 |         var a = document.createElement('audio');
 50 |         return !(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''));
 51 |       })(),
 52 |       hasFlash: (function() {
 53 |         if (navigator.plugins && navigator.plugins.length && navigator.plugins['Shockwave Flash']) {
 54 |           return true;
 55 |         } else if (navigator.mimeTypes && navigator.mimeTypes.length) {
 56 |           var mimeType = navigator.mimeTypes['application/x-shockwave-flash'];
 57 |           return mimeType && mimeType.enabledPlugin;
 58 |         } else {
 59 |           try {
 60 |             var ax = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
 61 |             return true;
 62 |           } catch (e) {}
 63 |         }
 64 |         return false;
 65 |       })(),
 66 |       // The default markup and classes for creating the player:
 67 |       createPlayer: {
 68 |         markup: '\
 69 |           <div class="play-pause"> \
 70 |             <p class="play"></p> \
 71 |             <p class="pause"></p> \
 72 |             <p class="loading"></p> \
 73 |             <p class="error"></p> \
 74 |           </div> \
 75 |           <div class="scrubber"> \
 76 |             <div class="progress"></div> \
 77 |             <div class="loaded"></div> \
 78 |           </div> \
 79 |           <div class="time"> \
 80 |             <em class="played">00:00</em>/<strong class="duration">00:00</strong> \
 81 |           </div> \
 82 |           <div class="error-message"></div>',
 83 |         playPauseClass: 'play-pause',
 84 |         scrubberClass: 'scrubber',
 85 |         progressClass: 'progress',
 86 |         loaderClass: 'loaded',
 87 |         timeClass: 'time',
 88 |         durationClass: 'duration',
 89 |         playedClass: 'played',
 90 |         errorMessageClass: 'error-message',
 91 |         playingClass: 'playing',
 92 |         loadingClass: 'loading',
 93 |         errorClass: 'error'
 94 |       },
 95 |       // The css used by the default player. This is is dynamically injected into a `<style>` tag in the top of the head.
 96 |       css: '\
 97 |         .audiojs audio { position: absolute; left: -1px; } \
 98 |         .audiojs { width: 460px; height: 36px; background: #404040; overflow: hidden; font-family: monospace; font-size: 12px; \
 99 |           background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444), color-stop(0.5, #555), color-stop(0.51, #444), color-stop(1, #444)); \
100 |           background-image: -moz-linear-gradient(center top, #444 0%, #555 50%, #444 51%, #444 100%); \
101 |           -webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); \
102 |           -o-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); } \
103 |         .audiojs .play-pause { width: 25px; height: 40px; padding: 4px 6px; margin: 0px; float: left; overflow: hidden; border-right: 1px solid #000; } \
104 |         .audiojs p { display: none; width: 25px; height: 40px; margin: 0px; cursor: pointer; } \
105 |         .audiojs .play { display: block; } \
106 |         .audiojs .scrubber { position: relative; float: left; width: 280px; background: #5a5a5a; height: 14px; margin: 10px; border-top: 1px solid #3f3f3f; border-left: 0px; border-bottom: 0px; overflow: hidden; } \
107 |         .audiojs .progress { position: absolute; top: 0px; left: 0px; height: 14px; width: 0px; background: #ccc; z-index: 1; \
108 |           background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ccc), color-stop(0.5, #ddd), color-stop(0.51, #ccc), color-stop(1, #ccc)); \
109 |           background-image: -moz-linear-gradient(center top, #ccc 0%, #ddd 50%, #ccc 51%, #ccc 100%); } \
110 |         .audiojs .loaded { position: absolute; top: 0px; left: 0px; height: 14px; width: 0px; background: #000; \
111 |           background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #222), color-stop(0.5, #333), color-stop(0.51, #222), color-stop(1, #222)); \
112 |           background-image: -moz-linear-gradient(center top, #222 0%, #333 50%, #222 51%, #222 100%); } \
113 |         .audiojs .time { float: left; height: 36px; line-height: 36px; margin: 0px 0px 0px 6px; padding: 0px 6px 0px 12px; border-left: 1px solid #000; color: #ddd; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5); } \
114 |         .audiojs .time em { padding: 0px 2px 0px 0px; color: #f9f9f9; font-style: normal; } \
115 |         .audiojs .time strong { padding: 0px 0px 0px 2px; font-weight: normal; } \
116 |         .audiojs .error-message { float: left; display: none; margin: 0px 10px; height: 36px; width: 400px; overflow: hidden; line-height: 36px; white-space: nowrap; color: #fff; \
117 |           text-overflow: ellipsis; -o-text-overflow: ellipsis; -icab-text-overflow: ellipsis; -khtml-text-overflow: ellipsis; -moz-text-overflow: ellipsis; -webkit-text-overflow: ellipsis; } \
118 |         .audiojs .error-message a { color: #eee; text-decoration: none; padding-bottom: 1px; border-bottom: 1px solid #999; white-space: wrap; } \
119 |         \
120 |         .audiojs .play { background: url("$1") -2px -1px no-repeat; } \
121 |         .audiojs .loading { background: url("$1") -2px -31px no-repeat; } \
122 |         .audiojs .error { background: url("$1") -2px -61px no-repeat; } \
123 |         .audiojs .pause { background: url("$1") -2px -91px no-repeat; } \
124 |         \
125 |         .playing .play, .playing .loading, .playing .error { display: none; } \
126 |         .playing .pause { display: block; } \
127 |         \
128 |         .loading .play, .loading .pause, .loading .error { display: none; } \
129 |         .loading .loading { display: block; } \
130 |         \
131 |         .error .time, .error .play, .error .pause, .error .scrubber, .error .loading { display: none; } \
132 |         .error .error { display: block; } \
133 |         .error .play-pause p { cursor: auto; } \
134 |         .error .error-message { display: block; }',
135 |       // The default event callbacks:
136 |       trackEnded: function(e) {},
137 |       flashError: function() {
138 |         var player = this.settings.createPlayer,
139 |             errorMessage = getByClass(player.errorMessageClass, this.wrapper),
140 |             html = 'Missing <a href="http://get.adobe.com/flashplayer/">flash player</a> plugin.';
141 |         if (this.mp3) html += ' <a href="'+this.mp3+'">Download audio file</a>.';
142 |         container[audiojs].helpers.removeClass(this.wrapper, player.loadingClass);
143 |         container[audiojs].helpers.addClass(this.wrapper, player.errorClass);
144 |         errorMessage.innerHTML = html;
145 |       },
146 |       loadError: function(e) {
147 |         var player = this.settings.createPlayer,
148 |             errorMessage = getByClass(player.errorMessageClass, this.wrapper);
149 |         container[audiojs].helpers.removeClass(this.wrapper, player.loadingClass);
150 |         container[audiojs].helpers.addClass(this.wrapper, player.errorClass);
151 |         errorMessage.innerHTML = 'Error loading: "'+this.mp3+'"';
152 |       },
153 |       init: function() {
154 |         var player = this.settings.createPlayer;
155 |         container[audiojs].helpers.addClass(this.wrapper, player.loadingClass);
156 |       },
157 |       loadStarted: function() {
158 |         var player = this.settings.createPlayer,
159 |             duration = getByClass(player.durationClass, this.wrapper),
160 |             m = Math.floor(this.duration / 60),
161 |             s = Math.floor(this.duration % 60);
162 |         container[audiojs].helpers.removeClass(this.wrapper, player.loadingClass);
163 |         duration.innerHTML = ((m<10?'0':'')+m+':'+(s<10?'0':'')+s);
164 |       },
165 |       loadProgress: function(percent) {
166 |         var player = this.settings.createPlayer,
167 |             loaded = getByClass(player.loaderClass, this.wrapper);
168 |         loaded.style.width = (100 * percent) + '%';
169 |       },
170 |       playPause: function() {
171 |         if (this.playing) this.settings.play();
172 |         else this.settings.pause();
173 |       },
174 |       play: function() {
175 |         var player = this.settings.createPlayer;
176 |         container[audiojs].helpers.addClass(this.wrapper, player.playingClass);
177 |       },
178 |       pause: function() {
179 |         var player = this.settings.createPlayer;
180 |         container[audiojs].helpers.removeClass(this.wrapper, player.playingClass);
181 |       },
182 |       updatePlayhead: function(percent) {
183 |         var player = this.settings.createPlayer,
184 |             progress = getByClass(player.progressClass, this.wrapper);
185 |         progress.style.width = (100 * percent) + '%';
186 | 
187 |         var played = getByClass(player.playedClass, this.wrapper),
188 |             p = this.duration * percent,
189 |             m = Math.floor(p / 60),
190 |             s = Math.floor(p % 60);
191 |         played.innerHTML = ((m<10?'0':'')+m+':'+(s<10?'0':'')+s);
192 |       }
193 |     },
194 | 
195 |     // ### Contructor functions
196 | 
197 |     // `create()`  
198 |     // Used to create a single `audiojs` instance.  
199 |     // If an array is passed then it calls back to `createAll()`.  
200 |     // Otherwise, it creates a single instance and returns it.  
201 |     create: function(element, options) {
202 |       var options = options || {}
203 |       if (element.length) {
204 |         return this.createAll(options, element);
205 |       } else {
206 |         return this.newInstance(element, options);
207 |       }
208 |     },
209 | 
210 |     // `createAll()`  
211 |     // Creates multiple `audiojs` instances.  
212 |     // If `elements` is `null`, then automatically find any `<audio>` tags on the page and create `audiojs` instances for them.
213 |     createAll: function(options, elements) {
214 |       var audioElements = elements || document.getElementsByTagName('audio'),
215 |           instances = []
216 |           options = options || {};
217 |       for (var i = 0, ii = audioElements.length; i < ii; i++) {
218 |         instances.push(this.newInstance(audioElements[i], options));
219 |       }
220 |       return instances;
221 |     },
222 | 
223 |     // ### Creating and returning a new instance
224 |     // This goes through all the steps required to build out a usable `audiojs` instance.
225 |     newInstance: function(element, options) {
226 |       var element = element,
227 |           s = this.helpers.clone(this.settings),
228 |           id = 'audiojs'+this.instanceCount,
229 |           wrapperId = 'audiojs_wrapper'+this.instanceCount,
230 |           instanceCount = this.instanceCount++;
231 | 
232 |       // Check for `autoplay`, `loop` and `preload` attributes and write them into the settings.
233 |       if (element.getAttribute('autoplay') != null) s.autoplay = true;
234 |       if (element.getAttribute('loop') != null) s.loop = true;
235 |       if (element.getAttribute('preload') == 'none') s.preload = false;
236 |       // Merge the default settings with the user-defined `options`.
237 |       if (options) this.helpers.merge(s, options);
238 | 
239 |       // Inject the player html if required.
240 |       if (s.createPlayer.markup) element = this.createPlayer(element, s.createPlayer, wrapperId);
241 |       else element.parentNode.setAttribute('id', wrapperId);
242 | 
243 |       // Return a new `audiojs` instance.
244 |       var audio = new container[audiojsInstance](element, s);
245 | 
246 |       // If css has been passed in, dynamically inject it into the `<head>`.
247 |       if (s.css) this.helpers.injectCss(audio, s.css);
248 | 
249 |       // If `<audio>` or mp3 playback isn't supported, insert the swf & attach the required events for it.
250 |       if (s.useFlash && s.hasFlash) {
251 |         this.injectFlash(audio, id);
252 |         this.attachFlashEvents(audio.wrapper, audio);
253 |       } else if (s.useFlash && !s.hasFlash) {
254 |         this.settings.flashError.apply(audio);
255 |       }
256 | 
257 |       // Attach event callbacks to the new audiojs instance.
258 |       if (!s.useFlash || (s.useFlash && s.hasFlash)) this.attachEvents(audio.wrapper, audio);
259 | 
260 |       // Store the newly-created `audiojs` instance.
261 |       this.instances[id] = audio;
262 |       return audio;
263 |     },
264 | 
265 |     // ### Helper methods for constructing a working player
266 |     // Inject a wrapping div and the markup for the html player.
267 |     createPlayer: function(element, player, id) {
268 |       var wrapper = document.createElement('div'),
269 |           newElement = element.cloneNode(true);
270 |       wrapper.setAttribute('class', 'audiojs');
271 |       wrapper.setAttribute('className', 'audiojs');
272 |       wrapper.setAttribute('id', id);
273 | 
274 |       // Fix IE's broken implementation of `innerHTML` & `cloneNode` for HTML5 elements.
275 |       if (newElement.outerHTML && !document.createElement('audio').canPlayType) {
276 |         newElement = this.helpers.cloneHtml5Node(element);
277 |         wrapper.innerHTML = player.markup;
278 |         wrapper.appendChild(newElement);
279 |         element.outerHTML = wrapper.outerHTML;
280 |         wrapper = document.getElementById(id);
281 |       } else {
282 |         wrapper.appendChild(newElement);
283 |         wrapper.innerHTML = wrapper.innerHTML + player.markup;
284 |         element.parentNode.replaceChild(wrapper, element);
285 |       }
286 |       return wrapper.getElementsByTagName('audio')[0];
287 |     },
288 | 
289 |     // Attaches useful event callbacks to an `audiojs` instance.
290 |     attachEvents: function(wrapper, audio) {
291 |       if (!audio.settings.createPlayer) return;
292 |       var player = audio.settings.createPlayer,
293 |           playPause = getByClass(player.playPauseClass, wrapper),
294 |           scrubber = getByClass(player.scrubberClass, wrapper),
295 |           leftPos = function(elem) {
296 |             var curleft = 0;
297 |             if (elem.offsetParent) {
298 |               do { curleft += elem.offsetLeft; } while (elem = elem.offsetParent);
299 |             }
300 |             return curleft;
301 |           };
302 | 
303 |       container[audiojs].events.addListener(playPause, 'click', function(e) {
304 |         audio.playPause.apply(audio);
305 |       });
306 | 
307 |       container[audiojs].events.addListener(scrubber, 'click', function(e) {
308 |         var relativeLeft = e.clientX - leftPos(this);
309 |         audio.skipTo(relativeLeft / scrubber.offsetWidth);
310 |       });
311 | 
312 |       // _If flash is being used, then the following handlers don't need to be registered._
313 |       if (audio.settings.useFlash) return;
314 | 
315 |       // Start tracking the load progress of the track.
316 |       container[audiojs].events.trackLoadProgress(audio);
317 | 
318 |       container[audiojs].events.addListener(audio.element, 'timeupdate', function(e) {
319 |         audio.updatePlayhead.apply(audio);
320 |       });
321 | 
322 |       container[audiojs].events.addListener(audio.element, 'ended', function(e) {
323 |         audio.trackEnded.apply(audio);
324 |       });
325 | 
326 |       container[audiojs].events.addListener(audio.source, 'error', function(e) {
327 |         // on error, cancel any load timers that are running.
328 |         clearInterval(audio.readyTimer);
329 |         clearInterval(audio.loadTimer);
330 |         audio.settings.loadError.apply(audio);
331 |       });
332 | 
333 |     },
334 | 
335 |     // Flash requires a slightly different API to the `<audio>` element, so this method is used to overwrite the standard event handlers.
336 |     attachFlashEvents: function(element, audio) {
337 |       audio['swfReady'] = false;
338 |       audio['load'] = function(mp3) {
339 |         // If the swf isn't ready yet then just set `audio.mp3`. `init()` will load it in once the swf is ready.
340 |         audio.mp3 = mp3;
341 |         if (audio.swfReady) audio.element.load(mp3);
342 |       }
343 |       audio['loadProgress'] = function(percent, duration) {
344 |         audio.loadedPercent = percent;
345 |         audio.duration = duration;
346 |         audio.settings.loadStarted.apply(audio);
347 |         audio.settings.loadProgress.apply(audio, [percent]);
348 |       }
349 |       audio['skipTo'] = function(percent) {
350 |         if (percent > audio.loadedPercent) return;
351 |         audio.updatePlayhead.call(audio, [percent])
352 |         audio.element.skipTo(percent);
353 |       }
354 |       audio['updatePlayhead'] = function(percent) {
355 |         audio.settings.updatePlayhead.apply(audio, [percent]);
356 |       }
357 |       audio['play'] = function() {
358 |         // If the audio hasn't started preloading, then start it now.  
359 |         // Then set `preload` to `true`, so that any tracks loaded in subsequently are loaded straight away.
360 |         if (!audio.settings.preload) {
361 |           audio.settings.preload = true;
362 |           audio.element.init(audio.mp3);
363 |         }
364 |         audio.playing = true;
365 |         // IE doesn't allow a method named `play()` to be exposed through `ExternalInterface`, so lets go with `pplay()`.  
366 |         // <http://dev.nuclearrooster.com/2008/07/27/externalinterfaceaddcallback-can-cause-ie-js-errors-with-certain-keyworkds/>
367 |         audio.element.pplay();
368 |         audio.settings.play.apply(audio);
369 |       }
370 |       audio['pause'] = function() {
371 |         audio.playing = false;
372 |         // Use `ppause()` for consistency with `pplay()`, even though it isn't really required.
373 |         audio.element.ppause();
374 |         audio.settings.pause.apply(audio);
375 |       }
376 |       audio['setVolume'] = function(v) {
377 |         audio.element.setVolume(v);
378 |       }
379 |       audio['loadStarted'] = function() {
380 |         // Load the mp3 specified by the audio element into the swf.
381 |         audio.swfReady = true;
382 |         if (audio.settings.preload) audio.element.init(audio.mp3);
383 |         if (audio.settings.autoplay) audio.play.apply(audio);
384 |       }
385 |     },
386 | 
387 |     // ### Injecting an swf from a string
388 |     // Build up the swf source by replacing the `$keys` and then inject the markup into the page.
389 |     injectFlash: function(audio, id) {
390 |       var flashSource = this.flashSource.replace(/\$1/g, id);
391 |       flashSource = flashSource.replace(/\$2/g, audio.settings.swfLocation);
392 |       // `(+new Date)` ensures the swf is not pulled out of cache. The fixes an issue with Firefox running multiple players on the same page.
393 |       flashSource = flashSource.replace(/\$3/g, (+new Date + Math.random()));
394 |       // Inject the player markup using a more verbose `innerHTML` insertion technique that works with IE.
395 |       var html = audio.wrapper.innerHTML,
396 |           div = document.createElement('div');
397 |       div.innerHTML = flashSource + html;
398 |       audio.wrapper.innerHTML = div.innerHTML;
399 |       audio.element = this.helpers.getSwf(id);
400 |     },
401 | 
402 |     // ## Helper functions
403 |     helpers: {
404 |       // **Merge two objects, with `obj2` overwriting `obj1`**  
405 |       // The merge is shallow, but that's all that is required for our purposes.
406 |       merge: function(obj1, obj2) {
407 |         for (attr in obj2) {
408 |           if (obj1.hasOwnProperty(attr) || obj2.hasOwnProperty(attr)) {
409 |             obj1[attr] = obj2[attr];
410 |           }
411 |         }
412 |       },
413 |       // **Clone a javascript object (recursively)**
414 |       clone: function(obj){
415 |         if (obj == null || typeof(obj) !== 'object') return obj;
416 |         var temp = new obj.constructor();
417 |         for (var key in obj) temp[key] = arguments.callee(obj[key]);
418 |         return temp;
419 |       },
420 |       // **Adding/removing classnames from elements**
421 |       addClass: function(element, className) {
422 |         var re = new RegExp('(\\s|^)'+className+'(\\s|$)');
423 |         if (re.test(element.className)) return;
424 |         element.className += ' ' + className;
425 |       },
426 |       removeClass: function(element, className) {
427 |         var re = new RegExp('(\\s|^)'+className+'(\\s|$)');
428 |         element.className = element.className.replace(re,' ');
429 |       },
430 |       // **Dynamic CSS injection**  
431 |       // Takes a string of css, inserts it into a `<style>`, then injects it in at the very top of the `<head>`. This ensures any user-defined styles will take precedence.
432 |       injectCss: function(audio, string) {
433 | 
434 |         // If an `audiojs` `<style>` tag already exists, then append to it rather than creating a whole new `<style>`.
435 |         var prepend = '',
436 |             styles = document.getElementsByTagName('style'),
437 |             css = string.replace(/\$1/g, audio.settings.imageLocation);
438 | 
439 |         for (var i = 0, ii = styles.length; i < ii; i++) {
440 |           var title = styles[i].getAttribute('title');
441 |           if (title && ~title.indexOf('audiojs')) {
442 |             style = styles[i];
443 |             if (style.innerHTML === css) return;
444 |             prepend = style.innerHTML;
445 |             break;
446 |           }
447 |         };
448 | 
449 |         var head = document.getElementsByTagName('head')[0],
450 |             firstchild = head.firstChild,
451 |             style = document.createElement('style');
452 | 
453 |         if (!head) return;
454 | 
455 |         style.setAttribute('type', 'text/css');
456 |         style.setAttribute('title', 'audiojs');
457 | 
458 |         if (style.styleSheet) style.styleSheet.cssText = prepend + css;
459 |         else style.appendChild(document.createTextNode(prepend + css));
460 | 
461 |         if (firstchild) head.insertBefore(style, firstchild);
462 |         else head.appendChild(styleElement);
463 |       },
464 |       // **Handle all the IE6+7 requirements for cloning `<audio>` nodes**  
465 |       // Create a html5-safe document fragment by injecting an `<audio>` element into the document fragment.
466 |       cloneHtml5Node: function(audioTag) {
467 |         var fragment = document.createDocumentFragment(),
468 |             doc = fragment.createElement ? fragment : document;
469 |         doc.createElement('audio');
470 |         var div = doc.createElement('div');
471 |         fragment.appendChild(div);
472 |         div.innerHTML = audioTag.outerHTML;
473 |         return div.firstChild;
474 |       },
475 |       // **Cross-browser `<object>` / `<embed>` element selection**
476 |       getSwf: function(name) {
477 |         var swf = document[name] || window[name];
478 |         return swf.length > 1 ? swf[swf.length - 1] : swf;
479 |       }
480 |     },
481 |     // ## Event-handling
482 |     events: {
483 |       memoryLeaking: false,
484 |       listeners: [],
485 |       // **A simple cross-browser event handler abstraction**
486 |       addListener: function(element, eventName, func) {
487 |         // For modern browsers use the standard DOM-compliant `addEventListener`.
488 |         if (element.addEventListener) {
489 |           element.addEventListener(eventName, func, false);
490 |           // For older versions of Internet Explorer, use `attachEvent`.  
491 |           // Also provide a fix for scoping `this` to the calling element and register each listener so the containing elements can be purged on page unload.
492 |         } else if (element.attachEvent) {
493 |           this.listeners.push(element);
494 |           if (!this.memoryLeaking) {
495 |             window.attachEvent('onunload', function() {
496 |               if(this.listeners) {
497 |                 for (var i = 0, ii = this.listeners.length; i < ii; i++) {
498 |                   container[audiojs].events.purge(this.listeners[i]);
499 |                 }
500 |               }
501 |             });
502 |             this.memoryLeaking = true;
503 |           }
504 |           element.attachEvent('on' + eventName, function() {
505 |             func.call(element, window.event);
506 |           });
507 |         }
508 |       },
509 | 
510 |       trackLoadProgress: function(audio) {
511 |         // If `preload` has been set to `none`, then we don't want to start loading the track yet.
512 |         if (!audio.settings.preload) return;
513 | 
514 |         var readyTimer,
515 |             loadTimer,
516 |             audio = audio,
517 |             ios = (/(ipod|iphone|ipad)/i).test(navigator.userAgent);
518 | 
519 |         // Use timers here rather than the official `progress` event, as Chrome has issues calling `progress` when loading mp3 files from cache.
520 |         readyTimer = setInterval(function() {
521 |           if (audio.element.readyState > -1) {
522 |             // iOS doesn't start preloading the mp3 until the user interacts manually, so this stops the loader being displayed prematurely.
523 |             if (!ios) audio.init.apply(audio);
524 |           }
525 |           if (audio.element.readyState > 1) {
526 |             if (audio.settings.autoplay) audio.play.apply(audio);
527 |             clearInterval(readyTimer);
528 |             // Once we have data, start tracking the load progress.
529 |             loadTimer = setInterval(function() {
530 |               audio.loadProgress.apply(audio);
531 |               if (audio.loadedPercent >= 1) clearInterval(loadTimer);
532 |             }, 200);
533 |           }
534 |         }, 200);
535 |         audio.readyTimer = readyTimer;
536 |         audio.loadTimer = loadTimer;
537 |       },
538 | 
539 |       // **Douglas Crockford's IE6 memory leak fix**  
540 |       // <http://javascript.crockford.com/memory/leak.html>  
541 |       // This is used to release the memory leak created by the circular references created when fixing `this` scoping for IE. It is called on page unload.
542 |       purge: function(d) {
543 |         var a = d.attributes, i;
544 |         if (a) {
545 |           for (i = 0; i < a.length; i += 1) {
546 |             if (typeof d[a[i].name] === 'function') d[a[i].name] = null;
547 |           }
548 |         }
549 |         a = d.childNodes;
550 |         if (a) {
551 |           for (i = 0; i < a.length; i += 1) purge(d.childNodes[i]);
552 |         }
553 |       },
554 | 
555 |       // **DOMready function**  
556 |       // As seen here: <https://github.com/dperini/ContentLoaded/>.
557 |       ready: (function() { return function(fn) {
558 |         var win = window, done = false, top = true,
559 |         doc = win.document, root = doc.documentElement,
560 |         add = doc.addEventListener ? 'addEventListener' : 'attachEvent',
561 |         rem = doc.addEventListener ? 'removeEventListener' : 'detachEvent',
562 |         pre = doc.addEventListener ? '' : 'on',
563 |         init = function(e) {
564 |           if (e.type == 'readystatechange' && doc.readyState != 'complete') return;
565 |           (e.type == 'load' ? win : doc)[rem](pre + e.type, init, false);
566 |           if (!done && (done = true)) fn.call(win, e.type || e);
567 |         },
568 |         poll = function() {
569 |           try { root.doScroll('left'); } catch(e) { setTimeout(poll, 50); return; }
570 |           init('poll');
571 |         };
572 |         if (doc.readyState == 'complete') fn.call(win, 'lazy');
573 |         else {
574 |           if (doc.createEventObject && root.doScroll) {
575 |             try { top = !win.frameElement; } catch(e) { }
576 |             if (top) poll();
577 |           }
578 |           doc[add](pre + 'DOMContentLoaded', init, false);
579 |           doc[add](pre + 'readystatechange', init, false);
580 |           win[add](pre + 'load', init, false);
581 |         }
582 |       }
583 |       })()
584 | 
585 |     }
586 |   }
587 | 
588 |   // ## The audiojs class
589 |   // We create one of these per `<audio>` and then push them into `audiojs['instances']`.
590 |   container[audiojsInstance] = function(element, settings) {
591 |     // Each audio instance returns an object which contains an API back into the `<audio>` element.
592 |     this.element = element;
593 |     this.wrapper = element.parentNode;
594 |     this.source = element.getElementsByTagName('source')[0] || element;
595 |     // First check the `<audio>` element directly for a src and if one is not found, look for a `<source>` element.
596 |     this.mp3 = (function(element) {
597 |       var source = element.getElementsByTagName('source')[0];
598 |       return element.getAttribute('src') || (source ? source.getAttribute('src') : null);
599 |     })(element);
600 |     this.settings = settings;
601 |     this.loadStartedCalled = false;
602 |     this.loadedPercent = 0;
603 |     this.duration = 1;
604 |     this.playing = false;
605 |   }
606 | 
607 |   container[audiojsInstance].prototype = {
608 |     // API access events:
609 |     // Each of these do what they need do and then call the matching methods defined in the settings object.
610 |     updatePlayhead: function() {
611 |       var percent = this.element.currentTime / this.duration;
612 |       this.settings.updatePlayhead.apply(this, [percent]);
613 |     },
614 |     skipTo: function(percent) {
615 |       if (percent > this.loadedPercent) return;
616 |       this.element.currentTime = this.duration * percent;
617 |       this.updatePlayhead();
618 |     },
619 |     load: function(mp3) {
620 |       this.loadStartedCalled = false;
621 |       this.source.setAttribute('src', mp3);
622 |       // The now outdated `load()` method is required for Safari 4
623 |       this.element.load();
624 |       this.mp3 = mp3;
625 |       container[audiojs].events.trackLoadProgress(this);
626 |     },
627 |     loadError: function() {
628 |       this.settings.loadError.apply(this);
629 |     },
630 |     init: function() {
631 |       this.settings.init.apply(this);
632 |     },
633 |     loadStarted: function() {
634 |       // Wait until `element.duration` exists before setting up the audio player.
635 |       if (!this.element.duration) return false;
636 | 
637 |       this.duration = this.element.duration;
638 |       this.updatePlayhead();
639 |       this.settings.loadStarted.apply(this);
640 |     },
641 |     loadProgress: function() {
642 |       if (this.element.buffered != null && this.element.buffered.length) {
643 |         // Ensure `loadStarted()` is only called once.
644 |         if (!this.loadStartedCalled) {
645 |           this.loadStartedCalled = this.loadStarted();
646 |         }
647 |         var durationLoaded = this.element.buffered.end(this.element.buffered.length - 1);
648 |         this.loadedPercent = durationLoaded / this.duration;
649 | 
650 |         this.settings.loadProgress.apply(this, [this.loadedPercent]);
651 |       }
652 |     },
653 |     playPause: function() {
654 |       if (this.playing) this.pause();
655 |       else this.play();
656 |     },
657 |     play: function() {
658 |       var ios = (/(ipod|iphone|ipad)/i).test(navigator.userAgent);
659 |       // On iOS this interaction will trigger loading the mp3, so run `init()`.
660 |       if (ios && this.element.readyState == 0) this.init.apply(this);
661 |       // If the audio hasn't started preloading, then start it now.  
662 |       // Then set `preload` to `true`, so that any tracks loaded in subsequently are loaded straight away.
663 |       if (!this.settings.preload) {
664 |         this.settings.preload = true;
665 |         this.element.setAttribute('preload', 'auto');
666 |         container[audiojs].events.trackLoadProgress(this);
667 |       }
668 |       this.playing = true;
669 |       this.element.play();
670 |       this.settings.play.apply(this);
671 |     },
672 |     pause: function() {
673 |       this.playing = false;
674 |       this.element.pause();
675 |       this.settings.pause.apply(this);
676 |     },
677 |     setVolume: function(v) {
678 |       this.element.volume = v;
679 |     },
680 |     trackEnded: function(e) {
681 |       this.skipTo.apply(this, [0]);
682 |       if (!this.settings.loop) this.pause.apply(this);
683 |       this.settings.trackEnded.apply(this);
684 |     }
685 |   }
686 | 
687 |   // **getElementsByClassName**  
688 |   // Having to rely on `getElementsByTagName` is pretty inflexible internally, so a modified version of Dustin Diaz's `getElementsByClassName` has been included.
689 |   // This version cleans things up and prefers the native DOM method if it's available.
690 |   var getByClass = function(searchClass, node) {
691 |     var matches = [];
692 |     node = node || document;
693 | 
694 |     if (node.getElementsByClassName) {
695 |       matches = node.getElementsByClassName(searchClass);
696 |     } else {
697 |       var i, l, 
698 |           els = node.getElementsByTagName("*"),
699 |           pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
700 | 
701 |       for (i = 0, l = els.length; i < l; i++) {
702 |         if (pattern.test(els[i].className)) {
703 |           matches.push(els[i]);
704 |         }
705 |       }
706 |     }
707 |     return matches.length > 1 ? matches : matches[0];
708 |   };
709 | // The global variable names are passed in here and can be changed if they conflict with anything else.
710 |   return container[audiojs];
711 | }));


--------------------------------------------------------------------------------
/audiojs/audio.js:
--------------------------------------------------------------------------------
  1 | // A cross-browser javascript shim for html5 audio
  2 | (function(audiojs, audiojsInstance, container) {
  3 |   // Use the path to the audio.js file to create relative paths to the swf and player graphics
  4 |   // Remember that some systems (e.g. ruby on rails) append strings like '?1301478336' to asset paths
  5 |   var path = (function() {
  6 |     var re = new RegExp('audio(\.min)?\.js.*'),
  7 |         scripts = document.getElementsByTagName('script');
  8 |     for (var i = 0, ii = scripts.length; i < ii; i++) {
  9 |       var path = scripts[i].getAttribute('src');
 10 |       if(re.test(path))
 11 |       {
 12 |         var f = path.split ( '/' );
 13 |         f.pop ();
 14 |         return f.join ( '/' ) + '/';
 15 |       }
 16 |     }
 17 |     // when no script found, an empty string causes the least confusion.
 18 |     return '';
 19 |   })();
 20 | 
 21 |   // ##The audiojs interface
 22 |   // This is the global object which provides an interface for creating new `audiojs` instances.
 23 |   // It also stores all of the construction helper methods and variables.
 24 |   container[audiojs] = {
 25 |     instanceCount: 0,
 26 |     instances: {},
 27 |     // The markup for the swf. It is injected into the page if there is not support for the `<audio>` element. The `$n`s are placeholders.
 28 |     // `$1` The name of the flash movie
 29 |     // `$2` The path to the swf
 30 |     // `$3` Cache invalidation
 31 |     flashSource: '\
 32 |       <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="$1" width="1" height="1" name="$1" style="position: absolute; left: -1px;"> \
 33 |         <param name="movie" value="$2?playerInstance='+audiojs+'.instances[\'$1\']&datetime=$3"> \
 34 |         <param name="allowscriptaccess" value="always"> \
 35 |         <embed name="$1" src="$2?playerInstance='+audiojs+'.instances[\'$1\']&datetime=$3" width="1" height="1" allowscriptaccess="always"> \
 36 |       </object>',
 37 | 
 38 |     // ### The main settings object
 39 |     // Where all the default settings are stored. Each of these variables and methods can be overwritten by the user-provided `options` object.
 40 |     settings: {
 41 |       autoplay: false,
 42 |       loop: false,
 43 |       preload: true,
 44 |       imageLocation: path + 'player-graphics.gif',
 45 |       retinaImageLocation: path + 'player-graphics@2x.gif',
 46 |       swfLocation: path + 'audiojs.swf',
 47 |       useFlash: (function() {
 48 |         var a = document.createElement('audio');
 49 |         return !(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''));
 50 |       })(),
 51 |       hasFlash: (function() {
 52 |         if (navigator.plugins && navigator.plugins.length && navigator.plugins['Shockwave Flash']) {
 53 |           return true;
 54 |         } else if (navigator.mimeTypes && navigator.mimeTypes.length) {
 55 |           var mimeType = navigator.mimeTypes['application/x-shockwave-flash'];
 56 |           return mimeType && mimeType.enabledPlugin;
 57 |         } else {
 58 |           try {
 59 |             var ax = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
 60 |             return true;
 61 |           } catch (e) {}
 62 |         }
 63 |         return false;
 64 |       })(),
 65 |       // The default markup and classes for creating the player:
 66 |       createPlayer: {
 67 |         markup: '\
 68 |           <div class="play-pause"> \
 69 |             <p class="play"></p> \
 70 |             <p class="pause"></p> \
 71 |             <p class="loading"></p> \
 72 |             <p class="error"></p> \
 73 |           </div> \
 74 |           <div class="scrubber"> \
 75 |             <div class="progress"></div> \
 76 |             <div class="loaded"></div> \
 77 |           </div> \
 78 |           <div class="time"> \
 79 |             <em class="played">00:00</em>/<strong class="duration">00:00</strong> \
 80 |           </div> \
 81 |           <div class="error-message"></div>',
 82 |         playPauseClass: 'play-pause',
 83 |         scrubberClass: 'scrubber',
 84 |         progressClass: 'progress',
 85 |         loaderClass: 'loaded',
 86 |         timeClass: 'time',
 87 |         durationClass: 'duration',
 88 |         playedClass: 'played',
 89 |         errorMessageClass: 'error-message',
 90 |         playingClass: 'playing',
 91 |         loadingClass: 'loading',
 92 |         errorClass: 'error'
 93 |       },
 94 |       // The css used by the default player. This is is dynamically injected into a `<style>` tag in the top of the head.
 95 |       css: '\
 96 |         .audiojs audio { position: absolute; left: -1px; } \
 97 |         .audiojs { width: 460px; height: 36px; background: #404040; overflow: hidden; font-family: monospace; font-size: 12px; \
 98 |           background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444), color-stop(0.5, #555), color-stop(0.51, #444), color-stop(1, #444)); \
 99 |           background-image: -moz-linear-gradient(center top, #444 0%, #555 50%, #444 51%, #444 100%); \
100 |           -webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); \
101 |           -o-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); } \
102 |         .audiojs .play-pause { width: 25px; height: 40px; padding: 4px 6px; margin: 0px; float: left; overflow: hidden; border-right: 1px solid #000; } \
103 |         .audiojs p { display: none; width: 25px; height: 40px; margin: 0px; cursor: pointer; } \
104 |         .audiojs .play { display: block; } \
105 |         .audiojs .scrubber { position: relative; float: left; width: 280px; background: #5a5a5a; height: 14px; margin: 10px; border-top: 1px solid #3f3f3f; border-left: 0px; border-bottom: 0px; overflow: hidden; } \
106 |         .audiojs .progress { position: absolute; top: 0px; left: 0px; height: 14px; width: 0px; background: #ccc; z-index: 1; \
107 |           background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ccc), color-stop(0.5, #ddd), color-stop(0.51, #ccc), color-stop(1, #ccc)); \
108 |           background-image: -moz-linear-gradient(center top, #ccc 0%, #ddd 50%, #ccc 51%, #ccc 100%); } \
109 |         .audiojs .loaded { position: absolute; top: 0px; left: 0px; height: 14px; width: 0px; background: #000; \
110 |           background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #222), color-stop(0.5, #333), color-stop(0.51, #222), color-stop(1, #222)); \
111 |           background-image: -moz-linear-gradient(center top, #222 0%, #333 50%, #222 51%, #222 100%); } \
112 |         .audiojs .time { float: left; height: 36px; line-height: 36px; margin: 0px 0px 0px 6px; padding: 0px 6px 0px 12px; border-left: 1px solid #000; color: #ddd; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5); } \
113 |         .audiojs .time em { padding: 0px 2px 0px 0px; color: #f9f9f9; font-style: normal; } \
114 |         .audiojs .time strong { padding: 0px 0px 0px 2px; font-weight: normal; } \
115 |         .audiojs .error-message { float: left; display: none; margin: 0px 10px; height: 36px; width: 400px; overflow: hidden; line-height: 36px; white-space: nowrap; color: #fff; \
116 |           text-overflow: ellipsis; -o-text-overflow: ellipsis; -icab-text-overflow: ellipsis; -khtml-text-overflow: ellipsis; -moz-text-overflow: ellipsis; -webkit-text-overflow: ellipsis; } \
117 |         .audiojs .error-message a { color: #eee; text-decoration: none; padding-bottom: 1px; border-bottom: 1px solid #999; white-space: wrap; } \
118 |         \
119 |         .audiojs .play { background: url("$1") -2px -1px no-repeat; } \
120 |         .audiojs .loading { background: url("$1") -2px -31px no-repeat; } \
121 |         .audiojs .error { background: url("$1") -2px -61px no-repeat; } \
122 |         .audiojs .pause { background: url("$1") -2px -91px no-repeat; } \
123 |         \
124 |         @media only screen and (-webkit-min-device-pixel-ratio: 2), \
125 |           only screen and (min--moz-device-pixel-ratio: 2), \
126 |           only screen and (min-moz-device-pixel-ratio: 2), \
127 |           only screen and (-o-min-device-pixel-ratio: 2/1), \
128 |           only screen and (min-device-pixel-ratio: 2) { \
129 |             .audiojs .play, .audiojs .loading, .audiojs .error, .audiojs .pause { \
130 |               background-image: url("$2"); \
131 |               -webkit-background-size: 30px 120px; \
132 |               -moz-background-size: 30px 120px; \
133 |               -o-background-size: 30px 120px; \
134 |               background-size: 30px 120px; \
135 |             } \
136 |         } \
137 |         \
138 |         .playing .play, .playing .loading, .playing .error { display: none; } \
139 |         .playing .pause { display: block; } \
140 |         \
141 |         .loading .play, .loading .pause, .loading .error { display: none; } \
142 |         .loading .loading { display: block; } \
143 |         \
144 |         .error .time, .error .play, .error .pause, .error .scrubber, .error .loading { display: none; } \
145 |         .error .error { display: block; } \
146 |         .error .play-pause p { cursor: auto; } \
147 |         .error .error-message { display: block; }',
148 |       // The default event callbacks:
149 |       trackEnded: function(e) {},
150 |       flashError: function() {
151 |         var player = this.settings.createPlayer,
152 |             errorMessage = getByClass(player.errorMessageClass, this.wrapper),
153 |             html = 'Missing <a href="http://get.adobe.com/flashplayer/">flash player</a> plugin.';
154 |         if (this.mp3) html += ' <a href="'+this.mp3+'">Download audio file</a>.';
155 |         container[audiojs].helpers.removeClass(this.wrapper, player.loadingClass);
156 |         container[audiojs].helpers.addClass(this.wrapper, player.errorClass);
157 |         errorMessage.innerHTML = html;
158 |       },
159 |       loadError: function(e) {
160 |         var player = this.settings.createPlayer,
161 |             errorMessage = getByClass(player.errorMessageClass, this.wrapper);
162 |         container[audiojs].helpers.removeClass(this.wrapper, player.loadingClass);
163 |         container[audiojs].helpers.addClass(this.wrapper, player.errorClass);
164 |         errorMessage.innerHTML = 'Error loading: "'+this.mp3+'"';
165 |       },
166 |       init: function() {
167 |         var player = this.settings.createPlayer;
168 |         container[audiojs].helpers.addClass(this.wrapper, player.loadingClass);
169 |       },
170 |       loadStarted: function() {
171 |         var player = this.settings.createPlayer,
172 |             duration = getByClass(player.durationClass, this.wrapper),
173 |             m = Math.floor(this.duration / 60),
174 |             s = Math.floor(this.duration % 60);
175 |         container[audiojs].helpers.removeClass(this.wrapper, player.loadingClass);
176 |         duration.innerHTML = ((m<10?'0':'')+m+':'+(s<10?'0':'')+s);
177 |       },
178 |       loadProgress: function(percent) {
179 |         var player = this.settings.createPlayer,
180 |             loaded = getByClass(player.loaderClass, this.wrapper);
181 |         loaded.style.width = Math.round(100 * percent) + '%';
182 |       },
183 |       playPause: function() {
184 |         if (this.playing) this.settings.play();
185 |         else this.settings.pause();
186 |       },
187 |       play: function() {
188 |         var player = this.settings.createPlayer;
189 |         container[audiojs].helpers.removeClass(this.wrapper, player.errorClass);
190 |         container[audiojs].helpers.addClass(this.wrapper, player.playingClass);
191 |       },
192 |       pause: function() {
193 |         var player = this.settings.createPlayer;
194 |         container[audiojs].helpers.removeClass(this.wrapper, player.playingClass);
195 |       },
196 |       updatePlayhead: function(percent) {
197 |         var player = this.settings.createPlayer,
198 |             progress = getByClass(player.progressClass, this.wrapper);
199 |         progress.style.width = Math.round(100 * percent) + '%';
200 | 
201 |         var played = getByClass(player.playedClass, this.wrapper),
202 |             p = this.duration * percent,
203 |             m = Math.floor(p / 60),
204 |             s = Math.floor(p % 60);
205 |         played.innerHTML = ((m<10?'0':'')+m+':'+(s<10?'0':'')+s);
206 |       }
207 |     },
208 | 
209 |     // ### Contructor functions
210 | 
211 |     // `create()`
212 |     // Used to create a single `audiojs` instance.
213 |     // If an array is passed then it calls back to `createAll()`.
214 |     // Otherwise, it creates a single instance and returns it.
215 |     create: function(element, options) {
216 |       var options = options || {}
217 |       if (element.length) {
218 |         return this.createAll(options, element);
219 |       } else {
220 |         return this.newInstance(element, options);
221 |       }
222 |     },
223 | 
224 |     // `createAll()`
225 |     // Creates multiple `audiojs` instances.
226 |     // If `elements` is `null`, then automatically find any `<audio>` tags on the page and create `audiojs` instances for them.
227 |     createAll: function(options, elements) {
228 |       var audioElements = elements || document.getElementsByTagName('audio'),
229 |           instances = []
230 |           options = options || {};
231 |       for (var i = 0, ii = audioElements.length; i < ii; i++) {
232 |         
233 |         if ((" " + audioElements[i].parentNode.className + " ").replace(/[\n\t]/g, " ").indexOf(" audiojs ") > -1)
234 |           continue;
235 |           
236 |         instances.push(this.newInstance(audioElements[i], options));
237 |       }
238 |       return instances;
239 |     },
240 | 
241 |     // ### Creating and returning a new instance
242 |     // This goes through all the steps required to build out a usable `audiojs` instance.
243 |     newInstance: function(element, options) {
244 |       var element = element,
245 |           s = this.helpers.clone(this.settings),
246 |           id = 'audiojs'+this.instanceCount,
247 |           wrapperId = 'audiojs_wrapper'+this.instanceCount,
248 |           instanceCount = this.instanceCount++;
249 | 
250 |       // Check for `autoplay`, `loop` and `preload` attributes and write them into the settings.
251 |       if (element.getAttribute('autoplay') != null) s.autoplay = true;
252 |       if (element.getAttribute('loop') != null) s.loop = true;
253 |       if (element.getAttribute('preload') == 'none') s.preload = false;
254 |       // Merge the default settings with the user-defined `options`.
255 |       if (options) this.helpers.merge(s, options);
256 | 
257 |       // Inject the player html if required.
258 |       if (s.createPlayer.markup) element = this.createPlayer(element, s.createPlayer, wrapperId);
259 |       else element.parentNode.setAttribute('id', wrapperId);
260 | 
261 |       // Return a new `audiojs` instance.
262 |       var audio = new container[audiojsInstance](element, s);
263 | 
264 |       // If css has been passed in, dynamically inject it into the `<head>`.
265 |       if (s.css) this.helpers.injectCss(audio, s.css);
266 | 
267 |       // If `<audio>` or mp3 playback isn't supported, insert the swf & attach the required events for it.
268 |       if (s.useFlash && s.hasFlash) {
269 |         this.injectFlash(audio, id);
270 |         this.attachFlashEvents(audio.wrapper, audio);
271 |       } else if (s.useFlash && !s.hasFlash) {
272 |         s.flashError.apply(audio);
273 |       }
274 | 
275 |       // Attach event callbacks to the new audiojs instance.
276 |       if (!s.useFlash || (s.useFlash && s.hasFlash)) this.attachEvents(audio.wrapper, audio);
277 | 
278 |       // Store the newly-created `audiojs` instance.
279 |       this.instances[id] = audio;
280 |       return audio;
281 |     },
282 | 
283 |     // ### Helper methods for constructing a working player
284 |     // Inject a wrapping div and the markup for the html player.
285 |     createPlayer: function(element, player, id) {
286 |       var wrapper = document.createElement('div'),
287 |           newElement = element.cloneNode(true);
288 |       wrapper.setAttribute('class', 'audiojs');
289 |       wrapper.setAttribute('className', 'audiojs');
290 |       wrapper.setAttribute('id', id);
291 | 
292 |       // Fix IE's broken implementation of `innerHTML` & `cloneNode` for HTML5 elements.
293 |       if (newElement.outerHTML && !document.createElement('audio').canPlayType) {
294 |         newElement = this.helpers.cloneHtml5Node(element);
295 |         wrapper.innerHTML = player.markup;
296 |         wrapper.appendChild(newElement);
297 |         element.outerHTML = wrapper.outerHTML;
298 |         wrapper = document.getElementById(id);
299 |       } else {
300 |         wrapper.appendChild(newElement);
301 |         wrapper.innerHTML = wrapper.innerHTML + player.markup;
302 |         element.parentNode.replaceChild(wrapper, element);
303 |       }
304 |       return wrapper.getElementsByTagName('audio')[0];
305 |     },
306 | 
307 |     // Attaches useful event callbacks to an `audiojs` instance.
308 |     attachEvents: function(wrapper, audio) {
309 |       if (!audio.settings.createPlayer) return;
310 |       var player = audio.settings.createPlayer,
311 |           playPause = getByClass(player.playPauseClass, wrapper),
312 |           scrubber = getByClass(player.scrubberClass, wrapper);
313 | 
314 |       container[audiojs].events.addListener(playPause, 'click', function(e) {
315 |         audio.playPause.apply(audio);
316 |       });
317 | 
318 |       container[audiojs].events.addListener(scrubber, 'click', function(e) {
319 |         var relativeLeft = e.clientX - this.getBoundingClientRect().left;
320 |         audio.skipTo(relativeLeft / scrubber.offsetWidth);
321 |       });
322 | 
323 |       // _If flash is being used, then the following handlers don't need to be registered._
324 |       if (audio.settings.useFlash) return;
325 | 
326 |       // Start tracking the load progress of the track.
327 |       container[audiojs].events.trackLoadProgress(audio);
328 | 
329 |       container[audiojs].events.addListener(audio.element, 'timeupdate', function(e) {
330 |         audio.updatePlayhead.apply(audio);
331 |       });
332 | 
333 |       container[audiojs].events.addListener(audio.element, 'ended', function(e) {
334 |         audio.trackEnded.apply(audio);
335 |       });
336 | 
337 |       container[audiojs].events.addListener(audio.source, 'error', function(e) {
338 |         // on error, cancel any load timers that are running.
339 |         clearInterval(audio.readyTimer);
340 |         clearInterval(audio.loadTimer);
341 |         audio.settings.loadError.apply(audio);
342 |       });
343 | 
344 |     },
345 | 
346 |     // Flash requires a slightly different API to the `<audio>` element, so this method is used to overwrite the standard event handlers.
347 |     attachFlashEvents: function(element, audio) {
348 |       audio['swfReady'] = false;
349 |       audio['load'] = function(mp3) {
350 |         // If the swf isn't ready yet then just set `audio.mp3`. `init()` will load it in once the swf is ready.
351 |         audio.mp3 = mp3;
352 |         if (audio.swfReady) audio.element.load(mp3);
353 |       }
354 |       audio['loadProgress'] = function(percent, duration) {
355 |         audio.loadedPercent = percent;
356 |         audio.duration = duration;
357 |         audio.settings.loadStarted.apply(audio);
358 |         audio.settings.loadProgress.apply(audio, [percent]);
359 |       }
360 |       audio['skipTo'] = function(percent) {
361 |         if (percent > audio.loadedPercent) return;
362 |         audio.updatePlayhead.call(audio, [percent])
363 |         audio.element.skipTo(percent);
364 |       }
365 |       audio['updatePlayhead'] = function(percent) {
366 |         audio.settings.updatePlayhead.apply(audio, [percent]);
367 |       }
368 |       audio['play'] = function() {
369 |         // If the audio hasn't started preloading, then start it now.
370 |         // Then set `preload` to `true`, so that any tracks loaded in subsequently are loaded straight away.
371 |         if (!audio.settings.preload) {
372 |           audio.settings.preload = true;
373 |           audio.element.init(audio.mp3);
374 |         }
375 |         audio.playing = true;
376 |         // IE doesn't allow a method named `play()` to be exposed through `ExternalInterface`, so lets go with `pplay()`.
377 |         // <http://dev.nuclearrooster.com/2008/07/27/externalinterfaceaddcallback-can-cause-ie-js-errors-with-certain-keyworkds/>
378 |         audio.element.pplay();
379 |         audio.settings.play.apply(audio);
380 |       }
381 |       audio['pause'] = function() {
382 |         audio.playing = false;
383 |         // Use `ppause()` for consistency with `pplay()`, even though it isn't really required.
384 |         audio.element.ppause();
385 |         audio.settings.pause.apply(audio);
386 |       }
387 |       audio['setVolume'] = function(v) {
388 |         audio.element.setVolume(v);
389 |       }
390 |       audio['loadStarted'] = function() {
391 |         // Load the mp3 specified by the audio element into the swf.
392 |         audio.swfReady = true;
393 |         if (audio.settings.preload) audio.element.init(audio.mp3);
394 |         if (audio.settings.autoplay) audio.play.apply(audio);
395 |       }
396 |     },
397 | 
398 |     // ### Injecting an swf from a string
399 |     // Build up the swf source by replacing the `$keys` and then inject the markup into the page.
400 |     injectFlash: function(audio, id) {
401 |       var flashSource = this.flashSource.replace(/\$1/g, id);
402 |       flashSource = flashSource.replace(/\$2/g, audio.settings.swfLocation);
403 |       // `(+new Date)` ensures the swf is not pulled out of cache. The fixes an issue with Firefox running multiple players on the same page.
404 |       flashSource = flashSource.replace(/\$3/g, (+new Date + Math.random()));
405 |       // Inject the player markup using a more verbose `innerHTML` insertion technique that works with IE.
406 |       var html = audio.wrapper.innerHTML,
407 |           div = document.createElement('div');
408 |       div.innerHTML = flashSource + html;
409 |       audio.wrapper.innerHTML = div.innerHTML;
410 |       audio.element = this.helpers.getSwf(id);
411 |     },
412 | 
413 |     // ## Helper functions
414 |     helpers: {
415 |       // **Merge two objects, with `obj2` overwriting `obj1`**
416 |       // The merge is shallow, but that's all that is required for our purposes.
417 |       merge: function(obj1, obj2) {
418 |         for (attr in obj2) {
419 |           if (obj1.hasOwnProperty(attr) || obj2.hasOwnProperty(attr)) {
420 |             obj1[attr] = obj2[attr];
421 |           }
422 |         }
423 |       },
424 |       // **Clone a javascript object (recursively)**
425 |       clone: function(obj){
426 |         if (obj == null || typeof(obj) !== 'object') return obj;
427 |         var temp = new obj.constructor();
428 |         for (var key in obj) temp[key] = arguments.callee(obj[key]);
429 |         return temp;
430 |       },
431 |       // **Adding/removing classnames from elements**
432 |       addClass: function(element, className) {
433 |         var re = new RegExp('(\\s|^)'+className+'(\\s|$)');
434 |         if (re.test(element.className)) return;
435 |         element.className += ' ' + className;
436 |       },
437 |       removeClass: function(element, className) {
438 |         var re = new RegExp('(\\s|^)'+className+'(\\s|$)');
439 |         element.className = element.className.replace(re,' ');
440 |       },
441 |       // **Dynamic CSS injection**
442 |       // Takes a string of css, inserts it into a `<style>`, then injects it in at the very top of the `<head>`. This ensures any user-defined styles will take precedence.
443 |       injectCss: function(audio, string) {
444 | 
445 |         // If an `audiojs` `<style>` tag already exists, then append to it rather than creating a whole new `<style>`.
446 |         var prepend = '',
447 |             styles = document.getElementsByTagName('style'),
448 |             css = string.replace(/\$1/g, audio.settings.imageLocation);
449 |             css = css.replace(/\$2/g, audio.settings.retinaImageLocation);
450 | 
451 |         for (var i = 0, ii = styles.length; i < ii; i++) {
452 |           var title = styles[i].getAttribute('title');
453 |           if (title && ~title.indexOf('audiojs')) {
454 |             style = styles[i];
455 |             if (style.innerHTML === css) return;
456 |             prepend = style.innerHTML;
457 |             break;
458 |           }
459 |         };
460 | 
461 |         var head = document.getElementsByTagName('head')[0],
462 |             firstchild = head.firstChild,
463 |             style = document.createElement('style');
464 | 
465 |         if (!head) return;
466 | 
467 |         style.setAttribute('type', 'text/css');
468 |         style.setAttribute('title', 'audiojs');
469 | 
470 |         if (style.styleSheet) style.styleSheet.cssText = prepend + css;
471 |         else style.appendChild(document.createTextNode(prepend + css));
472 | 
473 |         if (firstchild) head.insertBefore(style, firstchild);
474 |         else head.appendChild(style);
475 |       },
476 |       // **Handle all the IE6+7 requirements for cloning `<audio>` nodes**
477 |       // Create a html5-safe document fragment by injecting an `<audio>` element into the document fragment.
478 |       cloneHtml5Node: function(audioTag) {
479 |         var fragment = document.createDocumentFragment(),
480 |             doc = fragment.createElement ? fragment : document;
481 |         doc.createElement('audio');
482 |         var div = doc.createElement('div');
483 |         fragment.appendChild(div);
484 |         div.innerHTML = audioTag.outerHTML;
485 |         return div.firstChild;
486 |       },
487 |       // **Cross-browser `<object>` / `<embed>` element selection**
488 |       getSwf: function(name) {
489 |         var swf = document[name] || window[name];
490 |         return swf.length > 1 ? swf[swf.length - 1] : swf;
491 |       }
492 |     },
493 |     // ## Event-handling
494 |     events: {
495 |       memoryLeaking: false,
496 |       listeners: [],
497 |       // **A simple cross-browser event handler abstraction**
498 |       addListener: function(element, eventName, func) {
499 |         // For modern browsers use the standard DOM-compliant `addEventListener`.
500 |         if (element.addEventListener) {
501 |           element.addEventListener(eventName, func, false);
502 |           // For older versions of Internet Explorer, use `attachEvent`.
503 |           // Also provide a fix for scoping `this` to the calling element and register each listener so the containing elements can be purged on page unload.
504 |         } else if (element.attachEvent) {
505 |           this.listeners.push(element);
506 |           if (!this.memoryLeaking) {
507 |             window.attachEvent('onunload', function() {
508 |               if(this.listeners) {
509 |                 for (var i = 0, ii = this.listeners.length; i < ii; i++) {
510 |                   container[audiojs].events.purge(this.listeners[i]);
511 |                 }
512 |               }
513 |             });
514 |             this.memoryLeaking = true;
515 |           }
516 |           element.attachEvent('on' + eventName, function() {
517 |             func.call(element, window.event);
518 |           });
519 |         }
520 |       },
521 | 
522 |       trackLoadProgress: function(audio) {
523 |         // If `preload` has been set to `none`, then we don't want to start loading the track yet.
524 |         if (!audio.settings.preload) return;
525 | 
526 |         var readyTimer,
527 |             loadTimer,
528 |             audio = audio,
529 |             ios = (/(ipod|iphone|ipad)/i).test(navigator.userAgent);
530 | 
531 |         // Use timers here rather than the official `progress` event, as Chrome has issues calling `progress` when loading mp3 files from cache.
532 |         readyTimer = setInterval(function() {
533 |           if (audio.element.readyState > -1) {
534 |             // iOS doesn't start preloading the mp3 until the user interacts manually, so this stops the loader being displayed prematurely.
535 |             if (!ios) audio.init.apply(audio);
536 |           }
537 |           if (audio.element.readyState > 1) {
538 |             if (audio.settings.autoplay) audio.play.apply(audio);
539 |             clearInterval(readyTimer);
540 |             // Once we have data, start tracking the load progress.
541 |             loadTimer = setInterval(function() {
542 |               audio.loadProgress.apply(audio);
543 |               if (audio.loadedPercent >= 1) clearInterval(loadTimer);
544 |             }, 200);
545 |           }
546 |         }, 200);
547 |         audio.readyTimer = readyTimer;
548 |         audio.loadTimer = loadTimer;
549 |       },
550 | 
551 |       // **Douglas Crockford's IE6 memory leak fix**
552 |       // <http://javascript.crockford.com/memory/leak.html>
553 |       // This is used to release the memory leak created by the circular references created when fixing `this` scoping for IE. It is called on page unload.
554 |       purge: function(d) {
555 |         var a = d.attributes, i;
556 |         if (a) {
557 |           for (i = 0; i < a.length; i += 1) {
558 |             if (typeof d[a[i].name] === 'function') d[a[i].name] = null;
559 |           }
560 |         }
561 |         a = d.childNodes;
562 |         if (a) {
563 |           for (i = 0; i < a.length; i += 1) purge(d.childNodes[i]);
564 |         }
565 |       },
566 | 
567 |       // **DOMready function**
568 |       // As seen here: <https://github.com/dperini/ContentLoaded/>.
569 |       ready: (function() { return function(fn) {
570 |         var win = window, done = false, top = true,
571 |         doc = win.document, root = doc.documentElement,
572 |         add = doc.addEventListener ? 'addEventListener' : 'attachEvent',
573 |         rem = doc.addEventListener ? 'removeEventListener' : 'detachEvent',
574 |         pre = doc.addEventListener ? '' : 'on',
575 |         init = function(e) {
576 |           if (e.type == 'readystatechange' && doc.readyState != 'complete') return;
577 |           (e.type == 'load' ? win : doc)[rem](pre + e.type, init, false);
578 |           if (!done && (done = true)) fn.call(win, e.type || e);
579 |         },
580 |         poll = function() {
581 |           try { root.doScroll('left'); } catch(e) { setTimeout(poll, 50); return; }
582 |           init('poll');
583 |         };
584 |         if (doc.readyState == 'complete') fn.call(win, 'lazy');
585 |         else {
586 |           if (doc.createEventObject && root.doScroll) {
587 |             try { top = !win.frameElement; } catch(e) { }
588 |             if (top) poll();
589 |           }
590 |           doc[add](pre + 'DOMContentLoaded', init, false);
591 |           doc[add](pre + 'readystatechange', init, false);
592 |           win[add](pre + 'load', init, false);
593 |         }
594 |       }
595 |       })()
596 | 
597 |     }
598 |   }
599 | 
600 |   // ## The audiojs class
601 |   // We create one of these per `<audio>` and then push them into `audiojs['instances']`.
602 |   container[audiojsInstance] = function(element, settings) {
603 |     // Each audio instance returns an object which contains an API back into the `<audio>` element.
604 |     this.element = element;
605 |     this.wrapper = element.parentNode;
606 |     this.source = element.getElementsByTagName('source')[0] || element;
607 |     // First check the `<audio>` element directly for a src and if one is not found, look for a `<source>` element.
608 |     this.mp3 = (function(element) {
609 |       var source = element.getElementsByTagName('source')[0];
610 |       return element.getAttribute('src') || (source ? source.getAttribute('src') : null);
611 |     })(element);
612 |     this.settings = settings;
613 |     this.loadStartedCalled = false;
614 |     this.loadedPercent = 0;
615 |     this.duration = 1;
616 |     this.playing = false;
617 |   }
618 | 
619 |   container[audiojsInstance].prototype = {
620 |     // API access events:
621 |     // Each of these do what they need do and then call the matching methods defined in the settings object.
622 |     updatePlayhead: function() {
623 |       var percent = this.element.currentTime / this.duration;
624 |       this.settings.updatePlayhead.apply(this, [percent]);
625 |     },
626 |     skipTo: function(percent) {
627 |       if (percent > this.loadedPercent) return;
628 |       this.element.currentTime = this.duration * percent;
629 |       this.updatePlayhead();
630 |     },
631 |     load: function(mp3) {
632 |       this.loadStartedCalled = false;
633 |       this.source.setAttribute('src', mp3);
634 |       // The now outdated `load()` method is required for Safari 4
635 |       this.element.load();
636 |       this.mp3 = mp3;
637 |       container[audiojs].events.trackLoadProgress(this);
638 |     },
639 |     loadError: function() {
640 |       this.settings.loadError.apply(this);
641 |     },
642 |     init: function() {
643 |       this.settings.init.apply(this);
644 |     },
645 |     loadStarted: function() {
646 |       // Wait until `element.duration` exists before setting up the audio player.
647 |       if (!this.element.duration) return false;
648 | 
649 |       this.duration = this.element.duration;
650 |       this.updatePlayhead();
651 |       this.settings.loadStarted.apply(this);
652 |     },
653 |     loadProgress: function() {
654 |       if (this.element.buffered != null && this.element.buffered.length) {
655 |         // Ensure `loadStarted()` is only called once.
656 |         if (!this.loadStartedCalled) {
657 |           this.loadStartedCalled = this.loadStarted();
658 |         }
659 |         var durationLoaded = this.element.buffered.end(this.element.buffered.length - 1);
660 |         this.loadedPercent = durationLoaded / this.duration;
661 | 
662 |         this.settings.loadProgress.apply(this, [this.loadedPercent]);
663 |       }
664 |     },
665 |     playPause: function() {
666 |       if (this.playing) this.pause();
667 |       else this.play();
668 |     },
669 |     play: function() {
670 |       var ios = (/(ipod|iphone|ipad)/i).test(navigator.userAgent);
671 |       // On iOS this interaction will trigger loading the mp3, so run `init()`.
672 |       if (ios && this.element.readyState == 0) this.init.apply(this);
673 |       // If the audio hasn't started preloading, then start it now.
674 |       // Then set `preload` to `true`, so that any tracks loaded in subsequently are loaded straight away.
675 |       if (!this.settings.preload) {
676 |         this.settings.preload = true;
677 |         this.element.setAttribute('preload', 'auto');
678 |         container[audiojs].events.trackLoadProgress(this);
679 |       }
680 |       this.playing = true;
681 |       this.element.play();
682 |       this.settings.play.apply(this);
683 |     },
684 |     pause: function() {
685 |       this.playing = false;
686 |       this.element.pause();
687 |       this.settings.pause.apply(this);
688 |     },
689 |     setVolume: function(v) {
690 |       this.element.volume = v;
691 |     },
692 |     trackEnded: function(e) {
693 |       this.skipTo.apply(this, [0]);
694 |       if (!this.settings.loop) this.pause.apply(this);
695 |       this.settings.trackEnded.apply(this);
696 |     }
697 |   }
698 | 
699 |   // **getElementsByClassName**
700 |   // Having to rely on `getElementsByTagName` is pretty inflexible internally, so a modified version of Dustin Diaz's `getElementsByClassName` has been included.
701 |   // This version cleans things up and prefers the native DOM method if it's available.
702 |   var getByClass = function(searchClass, node) {
703 |     var matches = [];
704 |     node = node || document;
705 | 
706 |     if (node.getElementsByClassName) {
707 |       matches = node.getElementsByClassName(searchClass);
708 |     } else {
709 |       var i, l,
710 |           els = node.getElementsByTagName("*"),
711 |           pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
712 | 
713 |       for (i = 0, l = els.length; i < l; i++) {
714 |         if (pattern.test(els[i].className)) {
715 |           matches.push(els[i]);
716 |         }
717 |       }
718 |     }
719 |     return matches.length > 1 ? matches : matches[0];
720 |   };
721 | // The global variable names are passed in here and can be changed if they conflict with anything else.
722 | })('audiojs', 'audiojsInstance', this);
723 | 


--------------------------------------------------------------------------------
/audiojs/audio.min.js:
--------------------------------------------------------------------------------
 1 | (function(f,k,g){var n=function(){for(var a=/audio(.min)?.js.*/,b=document.getElementsByTagName("script"),c=0,d=b.length;c<d;c++){var e=b[c].getAttribute("src");if(a.test(e))return a=e.split("/"),a.pop(),a.join("/")+"/"}return""}();g[f]={instanceCount:0,instances:{},flashSource:'      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="$1" width="1" height="1" name="$1" style="position: absolute; left: -1px;">         <param name="movie" value="$2?playerInstance='+f+'.instances[\'$1\']&datetime=$3">         <param name="allowscriptaccess" value="always">         <embed name="$1" src="$2?playerInstance='+
 2 | f+'.instances[\'$1\']&datetime=$3" width="1" height="1" allowscriptaccess="always">       </object>',settings:{autoplay:!1,loop:!1,preload:!0,imageLocation:n+"player-graphics.gif",retinaImageLocation:n+"player-graphics@2x.gif",swfLocation:n+"audiojs.swf",useFlash:function(){var a=document.createElement("audio");return!(a.canPlayType&&a.canPlayType("audio/mpeg;").replace(/no/,""))}(),hasFlash:function(){if(navigator.plugins&&navigator.plugins.length&&navigator.plugins["Shockwave Flash"])return!0;if(navigator.mimeTypes&&
 3 | navigator.mimeTypes.length){var a=navigator.mimeTypes["application/x-shockwave-flash"];return a&&a.enabledPlugin}try{return new ActiveXObject("ShockwaveFlash.ShockwaveFlash"),!0}catch(b){}return!1}(),createPlayer:{markup:'          <div class="play-pause">             <p class="play"></p>             <p class="pause"></p>             <p class="loading"></p>             <p class="error"></p>           </div>           <div class="scrubber">             <div class="progress"></div>             <div class="loaded"></div>           </div>           <div class="time">             <em class="played">00:00</em>/<strong class="duration">00:00</strong>           </div>           <div class="error-message"></div>',
 4 | playPauseClass:"play-pause",scrubberClass:"scrubber",progressClass:"progress",loaderClass:"loaded",timeClass:"time",durationClass:"duration",playedClass:"played",errorMessageClass:"error-message",playingClass:"playing",loadingClass:"loading",errorClass:"error"},css:'        .audiojs audio { position: absolute; left: -1px; }         .audiojs { width: 460px; height: 36px; background: #404040; overflow: hidden; font-family: monospace; font-size: 12px;           background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444), color-stop(0.5, #555), color-stop(0.51, #444), color-stop(1, #444));           background-image: -moz-linear-gradient(center top, #444 0%, #555 50%, #444 51%, #444 100%);           -webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);           -o-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); }         .audiojs .play-pause { width: 25px; height: 40px; padding: 4px 6px; margin: 0px; float: left; overflow: hidden; border-right: 1px solid #000; }         .audiojs p { display: none; width: 25px; height: 40px; margin: 0px; cursor: pointer; }         .audiojs .play { display: block; }         .audiojs .scrubber { position: relative; float: left; width: 280px; background: #5a5a5a; height: 14px; margin: 10px; border-top: 1px solid #3f3f3f; border-left: 0px; border-bottom: 0px; overflow: hidden; }         .audiojs .progress { position: absolute; top: 0px; left: 0px; height: 14px; width: 0px; background: #ccc; z-index: 1;           background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ccc), color-stop(0.5, #ddd), color-stop(0.51, #ccc), color-stop(1, #ccc));           background-image: -moz-linear-gradient(center top, #ccc 0%, #ddd 50%, #ccc 51%, #ccc 100%); }         .audiojs .loaded { position: absolute; top: 0px; left: 0px; height: 14px; width: 0px; background: #000;           background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #222), color-stop(0.5, #333), color-stop(0.51, #222), color-stop(1, #222));           background-image: -moz-linear-gradient(center top, #222 0%, #333 50%, #222 51%, #222 100%); }         .audiojs .time { float: left; height: 36px; line-height: 36px; margin: 0px 0px 0px 6px; padding: 0px 6px 0px 12px; border-left: 1px solid #000; color: #ddd; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5); }         .audiojs .time em { padding: 0px 2px 0px 0px; color: #f9f9f9; font-style: normal; }         .audiojs .time strong { padding: 0px 0px 0px 2px; font-weight: normal; }         .audiojs .error-message { float: left; display: none; margin: 0px 10px; height: 36px; width: 400px; overflow: hidden; line-height: 36px; white-space: nowrap; color: #fff;           text-overflow: ellipsis; -o-text-overflow: ellipsis; -icab-text-overflow: ellipsis; -khtml-text-overflow: ellipsis; -moz-text-overflow: ellipsis; -webkit-text-overflow: ellipsis; }         .audiojs .error-message a { color: #eee; text-decoration: none; padding-bottom: 1px; border-bottom: 1px solid #999; white-space: wrap; }                 .audiojs .play { background: url("$1") -2px -1px no-repeat; }         .audiojs .loading { background: url("$1") -2px -31px no-repeat; }         .audiojs .error { background: url("$1") -2px -61px no-repeat; }         .audiojs .pause { background: url("$1") -2px -91px no-repeat; }                 @media only screen and (-webkit-min-device-pixel-ratio: 2),           only screen and (min--moz-device-pixel-ratio: 2),           only screen and (min-moz-device-pixel-ratio: 2),           only screen and (-o-min-device-pixel-ratio: 2/1),           only screen and (min-device-pixel-ratio: 2) {             .audiojs .play, .audiojs .loading, .audiojs .error, .audiojs .pause {               background-image: url("$2");               -webkit-background-size: 30px 120px;               -moz-background-size: 30px 120px;               -o-background-size: 30px 120px;               background-size: 30px 120px;             }         }                 .playing .play, .playing .loading, .playing .error { display: none; }         .playing .pause { display: block; }                 .loading .play, .loading .pause, .loading .error { display: none; }         .loading .loading { display: block; }                 .error .time, .error .play, .error .pause, .error .scrubber, .error .loading { display: none; }         .error .error { display: block; }         .error .play-pause p { cursor: auto; }         .error .error-message { display: block; }',
 5 | trackEnded:function(a){},flashError:function(){var a=this.settings.createPlayer,b=h(a.errorMessageClass,this.wrapper),c='Missing <a href="http://get.adobe.com/flashplayer/">flash player</a> plugin.';this.mp3&&(c+=' <a href="'+this.mp3+'">Download audio file</a>.');g[f].helpers.removeClass(this.wrapper,a.loadingClass);g[f].helpers.addClass(this.wrapper,a.errorClass);b.innerHTML=c},loadError:function(a){a=this.settings.createPlayer;var b=h(a.errorMessageClass,this.wrapper);g[f].helpers.removeClass(this.wrapper,
 6 | a.loadingClass);g[f].helpers.addClass(this.wrapper,a.errorClass);b.innerHTML='Error loading: "'+this.mp3+'"'},init:function(){g[f].helpers.addClass(this.wrapper,this.settings.createPlayer.loadingClass)},loadStarted:function(){var a=this.settings.createPlayer,b=h(a.durationClass,this.wrapper),c=Math.floor(this.duration/60),d=Math.floor(this.duration%60);g[f].helpers.removeClass(this.wrapper,a.loadingClass);b.innerHTML=(10>c?"0":"")+c+":"+(10>d?"0":"")+d},loadProgress:function(a){h(this.settings.createPlayer.loaderClass,
 7 | this.wrapper).style.width=Math.round(100*a)+"%"},playPause:function(){this.playing?this.settings.play():this.settings.pause()},play:function(){var a=this.settings.createPlayer;g[f].helpers.removeClass(this.wrapper,a.errorClass);g[f].helpers.addClass(this.wrapper,a.playingClass)},pause:function(){g[f].helpers.removeClass(this.wrapper,this.settings.createPlayer.playingClass)},updatePlayhead:function(a){var b=this.settings.createPlayer;h(b.progressClass,this.wrapper).style.width=Math.round(100*a)+"%";
 8 | var b=h(b.playedClass,this.wrapper),c=this.duration*a;a=Math.floor(c/60);c=Math.floor(c%60);b.innerHTML=(10>a?"0":"")+a+":"+(10>c?"0":"")+c}},create:function(a,b){b=b||{};return a.length?this.createAll(b,a):this.newInstance(a,b)},createAll:function(a,b){var c=b||document.getElementsByTagName("audio"),d=[];a=a||{};for(var e=0,p=c.length;e<p;e++)-1<(" "+c[e].parentNode.className+" ").replace(/[\n\t]/g," ").indexOf(" audiojs ")||d.push(this.newInstance(c[e],a));return d},newInstance:function(a,b){var c=
 9 | this.helpers.clone(this.settings),d="audiojs"+this.instanceCount,e="audiojs_wrapper"+this.instanceCount;this.instanceCount++;null!=a.getAttribute("autoplay")&&(c.autoplay=!0);null!=a.getAttribute("loop")&&(c.loop=!0);"none"==a.getAttribute("preload")&&(c.preload=!1);b&&this.helpers.merge(c,b);c.createPlayer.markup?a=this.createPlayer(a,c.createPlayer,e):a.parentNode.setAttribute("id",e);e=new g[k](a,c);c.css&&this.helpers.injectCss(e,c.css);c.useFlash&&c.hasFlash?(this.injectFlash(e,d),this.attachFlashEvents(e.wrapper,
10 | e)):c.useFlash&&!c.hasFlash&&c.flashError.apply(e);(!c.useFlash||c.useFlash&&c.hasFlash)&&this.attachEvents(e.wrapper,e);return this.instances[d]=e},createPlayer:function(a,b,c){var d=document.createElement("div"),e=a.cloneNode(!0);d.setAttribute("class","audiojs");d.setAttribute("className","audiojs");d.setAttribute("id",c);e.outerHTML&&!document.createElement("audio").canPlayType?(e=this.helpers.cloneHtml5Node(a),d.innerHTML=b.markup,d.appendChild(e),a.outerHTML=d.outerHTML,d=document.getElementById(c)):
11 | (d.appendChild(e),d.innerHTML+=b.markup,a.parentNode.replaceChild(d,a));return d.getElementsByTagName("audio")[0]},attachEvents:function(a,b){if(b.settings.createPlayer){var c=b.settings.createPlayer,d=h(c.playPauseClass,a),e=h(c.scrubberClass,a);g[f].events.addListener(d,"click",function(a){b.playPause.apply(b)});g[f].events.addListener(e,"click",function(a){a=a.clientX-this.getBoundingClientRect().left;b.skipTo(a/e.offsetWidth)});b.settings.useFlash||(g[f].events.trackLoadProgress(b),g[f].events.addListener(b.element,
12 | "timeupdate",function(a){b.updatePlayhead.apply(b)}),g[f].events.addListener(b.element,"ended",function(a){b.trackEnded.apply(b)}),g[f].events.addListener(b.source,"error",function(a){clearInterval(b.readyTimer);clearInterval(b.loadTimer);b.settings.loadError.apply(b)}))}},attachFlashEvents:function(a,b){b.swfReady=!1;b.load=function(a){b.mp3=a;b.swfReady&&b.element.load(a)};b.loadProgress=function(a,d){b.loadedPercent=a;b.duration=d;b.settings.loadStarted.apply(b);b.settings.loadProgress.apply(b,
13 | [a])};b.skipTo=function(a){a>b.loadedPercent||(b.updatePlayhead.call(b,[a]),b.element.skipTo(a))};b.updatePlayhead=function(a){b.settings.updatePlayhead.apply(b,[a])};b.play=function(){b.settings.preload||(b.settings.preload=!0,b.element.init(b.mp3));b.playing=!0;b.element.pplay();b.settings.play.apply(b)};b.pause=function(){b.playing=!1;b.element.ppause();b.settings.pause.apply(b)};b.setVolume=function(a){b.element.setVolume(a)};b.loadStarted=function(){b.swfReady=!0;b.settings.preload&&b.element.init(b.mp3);
14 | b.settings.autoplay&&b.play.apply(b)}},injectFlash:function(a,b){var c=this.flashSource.replace(/\$1/g,b),c=c.replace(/\$2/g,a.settings.swfLocation),c=c.replace(/\$3/g,+new Date+Math.random()),d=a.wrapper.innerHTML,e=document.createElement("div");e.innerHTML=c+d;a.wrapper.innerHTML=e.innerHTML;a.element=this.helpers.getSwf(b)},helpers:{merge:function(a,b){for(attr in b)if(a.hasOwnProperty(attr)||b.hasOwnProperty(attr))a[attr]=b[attr]},clone:function(a){if(null==a||"object"!==typeof a)return a;var b=
15 | new a.constructor,c;for(c in a)b[c]=arguments.callee(a[c]);return b},addClass:function(a,b){(new RegExp("(\\s|^)"+b+"(\\s|$)")).test(a.className)||(a.className+=" "+b)},removeClass:function(a,b){a.className=a.className.replace(new RegExp("(\\s|^)"+b+"(\\s|$)")," ")},injectCss:function(a,b){for(var c="",d=document.getElementsByTagName("style"),e=b.replace(/\$1/g,a.settings.imageLocation),e=e.replace(/\$2/g,a.settings.retinaImageLocation),g=0,f=d.length;g<f;g++){var h=d[g].getAttribute("title");if(h&&
16 | ~h.indexOf("audiojs")){f=d[g];if(f.innerHTML===e)return;c=f.innerHTML;break}}d=document.getElementsByTagName("head")[0];g=d.firstChild;f=document.createElement("style");d&&(f.setAttribute("type","text/css"),f.setAttribute("title","audiojs"),f.styleSheet?f.styleSheet.cssText=c+e:f.appendChild(document.createTextNode(c+e)),g?d.insertBefore(f,g):d.appendChild(f))},cloneHtml5Node:function(a){var b=document.createDocumentFragment(),c=b.createElement?b:document;c.createElement("audio");c=c.createElement("div");
17 | b.appendChild(c);c.innerHTML=a.outerHTML;return c.firstChild},getSwf:function(a){a=document[a]||window[a];return 1<a.length?a[a.length-1]:a}},events:{memoryLeaking:!1,listeners:[],addListener:function(a,b,c){a.addEventListener?a.addEventListener(b,c,!1):a.attachEvent&&(this.listeners.push(a),this.memoryLeaking||(window.attachEvent("onunload",function(){if(this.listeners)for(var a=0,b=this.listeners.length;a<b;a++)g[f].events.purge(this.listeners[a])}),this.memoryLeaking=!0),a.attachEvent("on"+b,function(){c.call(a,
18 | window.event)}))},trackLoadProgress:function(a){if(a.settings.preload){var b,c,d=/(ipod|iphone|ipad)/i.test(navigator.userAgent);b=setInterval(function(){-1<a.element.readyState&&(d||a.init.apply(a));1<a.element.readyState&&(a.settings.autoplay&&a.play.apply(a),clearInterval(b),c=setInterval(function(){a.loadProgress.apply(a);1<=a.loadedPercent&&clearInterval(c)},200))},200);a.readyTimer=b;a.loadTimer=c}},purge:function(a){var b=a.attributes,c;if(b)for(c=0;c<b.length;c+=1)"function"===typeof a[b[c].name]&&
19 | (a[b[c].name]=null);if(b=a.childNodes)for(c=0;c<b.length;c+=1)purge(a.childNodes[c])},ready:function(){return function(a){var b=window,c=!1,d=!0,e=b.document,f=e.documentElement,g=e.addEventListener?"addEventListener":"attachEvent",h=e.addEventListener?"removeEventListener":"detachEvent",m=e.addEventListener?"":"on",l=function(d){if("readystatechange"!=d.type||"complete"==e.readyState)("load"==d.type?b:e)[h](m+d.type,l,!1),!c&&(c=!0)&&a.call(b,d.type||d)},k=function(){try{f.doScroll("left")}catch(q){setTimeout(k,
20 | 50);return}l("poll")};if("complete"==e.readyState)a.call(b,"lazy");else{if(e.createEventObject&&f.doScroll){try{d=!b.frameElement}catch(q){}d&&k()}e[g](m+"DOMContentLoaded",l,!1);e[g](m+"readystatechange",l,!1);b[g](m+"load",l,!1)}}}()}};g[k]=function(a,b){this.element=a;this.wrapper=a.parentNode;this.source=a.getElementsByTagName("source")[0]||a;var c=a.getElementsByTagName("source")[0];this.mp3=a.getAttribute("src")||(c?c.getAttribute("src"):null);this.settings=b;this.loadStartedCalled=!1;this.loadedPercent=
21 | 0;this.duration=1;this.playing=!1};g[k].prototype={updatePlayhead:function(){this.settings.updatePlayhead.apply(this,[this.element.currentTime/this.duration])},skipTo:function(a){a>this.loadedPercent||(this.element.currentTime=this.duration*a,this.updatePlayhead())},load:function(a){this.loadStartedCalled=!1;this.source.setAttribute("src",a);this.element.load();this.mp3=a;g[f].events.trackLoadProgress(this)},loadError:function(){this.settings.loadError.apply(this)},init:function(){this.settings.init.apply(this)},
22 | loadStarted:function(){if(!this.element.duration)return!1;this.duration=this.element.duration;this.updatePlayhead();this.settings.loadStarted.apply(this)},loadProgress:function(){null!=this.element.buffered&&this.element.buffered.length&&(this.loadStartedCalled||(this.loadStartedCalled=this.loadStarted()),this.loadedPercent=this.element.buffered.end(this.element.buffered.length-1)/this.duration,this.settings.loadProgress.apply(this,[this.loadedPercent]))},playPause:function(){this.playing?this.pause():
23 | this.play()},play:function(){/(ipod|iphone|ipad)/i.test(navigator.userAgent)&&0==this.element.readyState&&this.init.apply(this);this.settings.preload||(this.settings.preload=!0,this.element.setAttribute("preload","auto"),g[f].events.trackLoadProgress(this));this.playing=!0;this.element.play();this.settings.play.apply(this)},pause:function(){this.playing=!1;this.element.pause();this.settings.pause.apply(this)},setVolume:function(a){this.element.volume=a},trackEnded:function(a){this.skipTo.apply(this,
24 | [0]);this.settings.loop||this.pause.apply(this);this.settings.trackEnded.apply(this)}};var h=function(a,b){var c=[];b=b||document;if(b.getElementsByClassName)c=b.getElementsByClassName(a);else{var d,e,f=b.getElementsByTagName("*"),g=new RegExp("(^|\\s)"+a+"(\\s|$)");d=0;for(e=f.length;d<e;d++)g.test(f[d].className)&&c.push(f[d])}return 1<c.length?c:c[0]}})("audiojs","audiojsInstance",this);
25 | 


--------------------------------------------------------------------------------
/audiojs/audiojs.as:
--------------------------------------------------------------------------------
  1 | package {
  2 | 
  3 | import flash.display.Sprite;
  4 | import flash.external.ExternalInterface;
  5 | import flash.net.URLRequest;
  6 | import flash.media.Sound;
  7 | import flash.media.SoundChannel;
  8 | import flash.media.SoundTransform;
  9 | import flash.events.Event;
 10 | import flash.errors.IOError;
 11 | import flash.events.IOErrorEvent;
 12 | import flash.events.ProgressEvent;
 13 | import flash.events.TimerEvent;
 14 | import flash.utils.Timer;
 15 | import flash.system.Security;
 16 | 
 17 | public class audiojs extends Sprite {
 18 | 
 19 |   private var _channel:SoundChannel;
 20 |   private var sound:Sound;
 21 |   private var duration:Number;
 22 |   private var playerInstance:String;
 23 | 
 24 |   private var pausePoint:Number = 0;
 25 |   private var playing:Boolean = false;
 26 |   private var volume:Number = 1;
 27 |   private var timer:Timer = new Timer(250, 0);
 28 | 
 29 | 
 30 |   private function get channel():SoundChannel {
 31 |     return this._channel;
 32 |   }
 33 | 
 34 |   private function set channel(channel:SoundChannel):void {
 35 |     this._channel = channel;
 36 |     this._channel.addEventListener(Event.SOUND_COMPLETE, this.soundEnded);
 37 |   }
 38 | 
 39 |   public function audiojs():void {
 40 |     Security.allowDomain("*");
 41 | 
 42 |     this.playerInstance = root.loaderInfo.parameters.playerInstance+'.';
 43 | 
 44 |     ExternalInterface.addCallback('init', init);
 45 |     ExternalInterface.addCallback('load', load);
 46 |     ExternalInterface.addCallback('playPause', playPause);
 47 |     ExternalInterface.addCallback('pplay', play);
 48 |     ExternalInterface.addCallback('ppause', pause);
 49 |     ExternalInterface.addCallback('skipTo', skipTo);
 50 |     ExternalInterface.addCallback('setVolume', setVolume);
 51 | 
 52 |     ExternalInterface.call(this.playerInstance+'loadStarted');
 53 |   }
 54 | 
 55 |   private function updatePlayhead(e:TimerEvent = null):void {
 56 |     var targetPosition:Number = e ? this.channel.position : this.pausePoint;
 57 |     var playProgress:Number = targetPosition / this.duration;
 58 | 
 59 |     if (playProgress > 1) playProgress = 1;
 60 |     if (playProgress > 0) {
 61 |       ExternalInterface.call(this.playerInstance+'updatePlayhead', playProgress);
 62 |     }
 63 |   }
 64 | 
 65 |   private function loadProgress(e:ProgressEvent):void {
 66 |     this.duration = (e.bytesTotal / (e.bytesLoaded / this.sound.length))
 67 |     var loadPercent:Number = e.bytesLoaded / e.bytesTotal;
 68 | 
 69 |     if (loadPercent > 1) loadPercent = 1;
 70 |     if (loadPercent > 0) {
 71 |       ExternalInterface.call(this.playerInstance+'loadProgress', loadPercent, (this.duration/1000));
 72 |     }
 73 |   }
 74 |   
 75 |   private function init(mp3:String):void {
 76 |     this.load(mp3);
 77 |   }
 78 | 
 79 |   private function load(mp3:String):void {
 80 |     if (this.channel) this.channel.stop();
 81 |     if (this.sound) this.sound.removeEventListener(ProgressEvent.PROGRESS, this.loadProgress);
 82 |     
 83 |     this.channel = new SoundChannel();
 84 |     this.sound = new Sound(new URLRequest(mp3));
 85 |     
 86 |     this.pausePoint = 0;
 87 |     this.sound.addEventListener(IOErrorEvent.IO_ERROR, this.loadError);
 88 |     this.sound.addEventListener(ProgressEvent.PROGRESS, this.loadProgress);
 89 | 
 90 |     this.timer.addEventListener(TimerEvent.TIMER, this.updatePlayhead);
 91 |     this.timer.start();
 92 |   }
 93 | 
 94 |   private function loadError(e:IOErrorEvent):void {
 95 |     ExternalInterface.call(this.playerInstance+'loadError');
 96 |   }
 97 | 
 98 |   private function play():void {
 99 |     this.channel = this.sound.play(this.pausePoint);
100 |     this.setVolume(this.volume);
101 |     this.playing = true;
102 |     this.timer.start();
103 |   }
104 | 
105 |   private function pause():void {
106 |     this.pausePoint = this.channel.position;
107 |     this.channel.stop();
108 |     this.playing = false;
109 |     this.timer.stop();
110 |   }
111 | 
112 |   private function playPause():void {
113 |     if (this.playing) {
114 |       this.pause();
115 |     } else {
116 |       this.play();
117 |     }
118 |   }
119 | 
120 |   private function skipTo(percent:Number):void {
121 |     this.channel.stop();
122 |     this.pausePoint = this.duration * percent;
123 |     if (this.playing) {
124 |       this.channel = this.sound.play(this.pausePoint);
125 |       this.setVolume(this.volume);
126 |     } else {
127 |       this.updatePlayhead();
128 |     }
129 |   }
130 | 
131 |   private function setVolume(vol:Number):void {
132 |     this.volume = vol;
133 |     var transform:SoundTransform = this.channel.soundTransform;
134 |     if (vol < 0) vol = 0;
135 |     if (vol > 1) vol = 1;
136 |     transform.volume = vol;
137 |     channel.soundTransform = transform;
138 |   }
139 | 
140 |   private function soundEnded(e:Event):void {
141 |     ExternalInterface.call(this.playerInstance+'trackEnded');
142 |   }
143 | 
144 | }
145 | 
146 | }


--------------------------------------------------------------------------------
/audiojs/audiojs.swf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kolber/audiojs/8d6d583284653dca1f331150f08493fb65a5cfb2/audiojs/audiojs.swf


--------------------------------------------------------------------------------
/audiojs/player-graphics.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kolber/audiojs/8d6d583284653dca1f331150f08493fb65a5cfb2/audiojs/player-graphics.gif


--------------------------------------------------------------------------------
/demos/test1.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE html>
 3 | <html lang="en">
 4 | <head>
 5 |     <meta charset="utf-8">
 6 |     <title>Test 1 - audio.js</title>
 7 |     <style>
 8 |         p { clear: both; }
 9 |     </style>
10 |     <script src="../audiojs/audio.js"></script>
11 |     <script>
12 |         audiojs.events.ready(function() {
13 |             var as = audiojs.createAll();
14 |         });
15 |     </script>
16 | </head>
17 | <body>
18 | <h1>audiojs.createAll()</h1>
19 | <p>Load from remote URL</p>
20 | <audio preload="auto">
21 |     <source src="https://raw.githubusercontent.com/kolber/audiojs/master/mp3/bensound-dubstep.mp3">
22 | </audio>
23 | 
24 | <p>Load local file</p>
25 | <audio preload="auto">
26 |     <source src="../mp3/bensound-dubstep.mp3">
27 | </audio>
28 | 
29 | <p>Load failure (from source)</p>
30 | <audio preload="auto">
31 |     <source src="./mp3/invalid.mp3">
32 | </audio>
33 | 
34 | <p><a href="http://www.bensound.com/royalty-free-music/track/dubstep">Royalty Free Music from Bensound</a></p>
35 | </body>
36 | </html>


--------------------------------------------------------------------------------
/demos/test2.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html lang="en">
  4 | <head>
  5 |     <meta charset="utf-8">
  6 |     <title>Test 2 - audio.js</title>
  7 |     <style>
  8 |         p { clear: both; }
  9 |     </style>
 10 |     <script src="../audiojs/audio.js"></script>
 11 |     <script>
 12 |         audiojs.events.ready(function() {
 13 |             var audios = document.getElementsByTagName('audio');
 14 | 
 15 |             var a1 = audiojs.create(audios[0], {
 16 |                 css: false,
 17 |                 createPlayer: {
 18 |                     markup: false,
 19 |                     playPauseClass: 'play-pauseZ',
 20 |                     scrubberClass: 'scrubberZ',
 21 |                     progressClass: 'progressZ',
 22 |                     loaderClass: 'loadedZ',
 23 |                     timeClass: 'timeZ',
 24 |                     durationClass: 'durationZ',
 25 |                     playedClass: 'playedZ',
 26 |                     errorMessageClass: 'error-messageZ',
 27 |                     playingClass: 'playingZ',
 28 |                     loadingClass: 'loadingZ',
 29 |                     errorClass: 'errorZ'
 30 |                 }
 31 |             });
 32 | 
 33 |             var a2 = audiojs.create(audios[1]);
 34 |             /*
 35 |              var a3 = audiojs.create(audios[2], {
 36 |              createPlayer: {
 37 |              markup: '\
 38 |              <div class="play-pause"> \
 39 |              <p class="play"></p> \
 40 |              <p class="pause"></p> \
 41 |              <p class="loading"></p> \
 42 |              <p class="error"></p> \
 43 |              </div> \
 44 |              <div class="scrubber"> \
 45 |              <div class="progress"></div> \
 46 |              <div class="loaded"></div> \
 47 |              </div> \
 48 |              <div class="time"> \
 49 |              <em class="played">00:00</em>/<strong class="duration">00:00</strong> \
 50 |              </div> \
 51 |              <div class="error-message"></div>',
 52 |              playPauseClass: 'play-pause',
 53 |              scrubberClass: 'scrubber',
 54 |              progressClass: 'progress',
 55 |              loaderClass: 'loaded',
 56 |              timeClass: 'time',
 57 |              durationClass: 'duration',
 58 |              playedClass: 'played',
 59 |              errorMessageClass: 'error-message',
 60 |              playingClass: 'playing',
 61 |              loadingClass: 'loading',
 62 |              errorClass: 'error'
 63 |              });
 64 |              */
 65 |         });
 66 |     </script>
 67 | </head>
 68 | <body>
 69 | <h1>audiojs.create(element, settings)</h1>
 70 | <p>Manual player markup & css</p>
 71 | <style>
 72 |     .audiojsZ audio { position: absolute; left: -1px; }
 73 |     .audiojsZ { width: 460px; height: 36px; background: #f00; overflow: hidden; font-family: monospace; font-size: 12px;
 74 |         -webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
 75 |         -o-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); }
 76 |     .audiojsZ .play-pauseZ { width: 25px; height: 40px; padding: 4px 6px; margin: 0px; float: left; overflow: hidden; border-right: 1px solid #c00; }
 77 |     .audiojsZ p { display: none; width: 25px; height: 40px; margin: 0px; cursor: pointer; }
 78 |     .audiojsZ .playZ { display: block; }
 79 |     .audiojsZ .scrubberZ { position: relative; float: left; width: 280px; background: #fcc; height: 14px; margin: 10px; border-left: 0px; border-bottom: 0px; overflow: hidden; }
 80 |     .audiojsZ .progressZ { position: absolute; top: 0px; left: 0px; height: 14px; width: 0px; background: #600; z-index: 1; }
 81 |     .audiojsZ .loadedZ { position: absolute; top: 0px; left: 0px; height: 14px; width: 0px; background: #c00; }
 82 |     .audiojsZ .timeZ { float: left; height: 36px; line-height: 36px; margin: 0px 0px 0px 6px; padding: 0px 6px 0px 12px; border-left: 1px solid #c00; color: #600; text-shadow: 1px 1px 0px rgba(125, 0, 0, 0.5); }
 83 |     .audiojsZ .timeZ em { padding: 0px 2px 0px 0px; color: #fcc; font-style: normal; }
 84 |     .audiojsZ .timeZ strong { padding: 0px 0px 0px 2px; font-weight: normal; }
 85 |     .audiojsZ .error-messageZ { float: left; display: none; margin: 0px 10px; height: 36px; width: 400px; overflow: hidden; line-height: 36px; white-space: nowrap; color: #fff;
 86 |         text-overflow: ellipsis; -o-text-overflow: ellipsis; -icab-text-overflow: ellipsis; -khtml-text-overflow: ellipsis; -moz-text-overflow: ellipsis; -webkit-text-overflow: ellipsis; }
 87 |     .audiojsZ .error-messageZ a { color: #eee; text-decoration: none; padding-bottom: 1px; border-bottom: 1px solid #999; white-space: wrap; }
 88 | 
 89 |     .audiojsZ .playZ { background: url('../audiojs/player-graphics.gif') -2px -1px no-repeat; }
 90 |     .audiojsZ .loadingZ { background: url('../audiojs/player-graphics.gif') -2px -31px no-repeat; }
 91 |     .audiojsZ .errorZ { background: url('../audiojs/player-graphics.gif') -2px -61px no-repeat; }
 92 |     .audiojsZ .pauseZ { background: url('../audiojs/player-graphics.gif') -2px -91px no-repeat; }
 93 | 
 94 |     .playingZ .playZ, .playingZ .loadingZ, .playingZ .errorZ { display: none; }
 95 |     .playingZ .pauseZ { display: block; }
 96 | 
 97 |     .loadingZ .playZ, .loadingZ .pauseZ, .loadingZ .errorZ { display: none; }
 98 |     .loadingZ .loadingZ { display: block; }
 99 | 
100 |     .errorZ .timeZ, .errorZ .playZ, .errorZ .pauseZ, .errorZ .scrubberZ, .errorZ .loadingZ { display: none; }
101 |     .errorZ .errorZ { display: block; }
102 |     .errorZ .play-pauseZ p { cursor: auto; }
103 |     .errorZ .error-messageZ { display: block; }
104 | </style>
105 | <div class="audiojsZ">
106 |     <audio src="https://raw.githubusercontent.com/kolber/audiojs/master/mp3/bensound-dubstep.mp3" preload="auto"></audio>
107 |     <div class="play-pauseZ">
108 |         <p class="playZ"></p>
109 |         <p class="pauseZ"></p>
110 |         <p class="loadingZ"></p>
111 |         <p class="errorZ"></p>
112 |     </div>
113 |     <div class="scrubberZ">
114 |         <div class="progressZ"></div>
115 |         <div class="loadedZ"></div>
116 |     </div>
117 |     <div class="timeZ">
118 |         <em class="playedZ">00:00</em>/<strong class="durationZ">00:00</strong>
119 |     </div>
120 |     <div class="error-messageZ"></div>
121 | </div>
122 | 
123 | <p>Automatic player markup</p>
124 | <audio preload="auto" src="https://raw.githubusercontent.com/kolber/audiojs/master/mp3/bensound-dubstep.mp3"></audio>
125 | <!--
126 |     <p>Manual player markup (passed into the option object)</p>
127 |     <audio src="http://s3.amazonaws.com/audiojs/04-islands-is-the-limit.mp3" preload="auto"></audio>
128 | -->
129 | 
130 | </body>
131 | </html>
132 | 


--------------------------------------------------------------------------------
/demos/test3.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE html>
 3 | <html lang="en">
 4 | <head>
 5 |     <meta charset="utf-8">
 6 |     <title>Test 3 - audio.js</title>
 7 |     <style>
 8 |         p { clear: both; }
 9 |     </style>
10 |     <script src="../audiojs/audio.js"></script>
11 |     <script>
12 |         audiojs.events.ready(function() {
13 |             audiojs.createAll();
14 |         });
15 |     </script>
16 | </head>
17 | <body>
18 | <h1>audiojs.create(element, settings)</h1>
19 | <p>preload="none"</p>
20 | <audio src="https://raw.githubusercontent.com/kolber/audiojs/master/mp3/bensound-dubstep.mp3" preload="none"></audio>
21 | <p>autoplay="autoplay"</p>
22 | <audio src="https://raw.githubusercontent.com/kolber/audiojs/master/mp3/bensound-dubstep.mp3" autoplay></audio>
23 | <p>loop="loop"</p>
24 | <audio src="https://raw.githubusercontent.com/kolber/audiojs/master/mp3/bensound-dubstep.mp3" loop></audio>
25 | <p><a href="http://www.bensound.com/royalty-free-music/track/dubstep">Royalty Free Music from Bensound</a></p>
26 | </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/demos/test4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Test 4 - audio.js</title>
 6 |     <style>
 7 |       p { clear: both; }
 8 |     </style>
 9 |     <script src="../audiojs/audio.js"></script>
10 |     <script>
11 |       audiojs.events.ready(function() {
12 |         var as = audiojs.createAll();
13 |         as[1].load({
14 |           mp3: "https://raw.githubusercontent.com/kolber/audiojs/master/mp3/bensound-dubstep.mp3",
15 |           ogg: "https://raw.githubusercontent.com/kolber/audiojs/master/mp3/bensound-dubstep.ogg"
16 |         });
17 |       });
18 |     </script>
19 |   </head>
20 |   <body>
21 |     <h1>audiojs.create(element, settings)</h1>
22 |     <p>.ogg fallback</p>
23 |     <audio src="http://s3.amazonaws.com/audiojs/02-juicy-r.mp3" preload>
24 |       <source src="http://s3.amazonaws.com/audiojs/02-juicy-r.ogg">
25 |     </audio>
26 |     <p>Dynamically-loaded audio file with .ogg fallback</p>
27 |     <audio preload="none"></audio>
28 |     <p><a href="http://www.bensound.com/royalty-free-music/track/dubstep">Royalty Free Music from Bensound</a></p>
29 |   </body>
30 | </html>


--------------------------------------------------------------------------------
/demos/test5.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html lang="en">
  4 | <head>
  5 |     <meta charset="utf-8">
  6 |     <title>audio.js</title>
  7 |     <meta content="width=device-width, initial-scale=0.6" name="viewport">
  8 |     <style>
  9 |         body { color: #666; font-family: sans-serif; line-height: 1.4; }
 10 |         h1 { color: #444; font-size: 1.2em; padding: 14px 2px 12px; margin: 0px; }
 11 |         h1 em { font-style: normal; color: #999; }
 12 |         a { color: #888; text-decoration: none; }
 13 |         #wrapper { width: 400px; margin: 40px auto; }
 14 | 
 15 |         ol { padding: 0px; margin: 0px; list-style: decimal-leading-zero inside; color: #ccc; width: 460px; border-top: 1px solid #ccc; font-size: 0.9em; }
 16 |         ol li { position: relative; margin: 0px; padding: 9px 2px 10px; border-bottom: 1px solid #ccc; cursor: pointer; }
 17 |         ol li a { display: block; text-indent: -3.3ex; padding: 0px 0px 0px 20px; }
 18 |         li.playing { color: #aaa; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3); }
 19 |         li.playing a { color: #000; }
 20 |         li.playing:before { content: '♬'; width: 14px; height: 14px; padding: 3px; line-height: 14px; margin: 0px; position: absolute; left: -24px; top: 9px; color: #000; font-size: 13px; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2); }
 21 | 
 22 |         #shortcuts { position: fixed; bottom: 0px; width: 100%; color: #666; font-size: 0.9em; margin: 60px 0px 0px; padding: 20px 20px 15px; background: #f3f3f3; background: rgba(240, 240, 240, 0.7); }
 23 |         #shortcuts div { width: 460px; margin: 0px auto; }
 24 |         #shortcuts h1 { margin: 0px 0px 6px; }
 25 |         #shortcuts p { margin: 0px 0px 18px; }
 26 |         #shortcuts em { font-style: normal; background: #d3d3d3; padding: 3px 9px; position: relative; left: -3px;
 27 |             -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px;
 28 |             -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); -o-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); }
 29 | 
 30 |         @media screen and (max-device-width: 480px) {
 31 |             #wrapper { position: relative; left: -3%; }
 32 |             #shortcuts { display: none; }
 33 |         }
 34 | 
 35 |         .credit {
 36 |             text-align: center;
 37 |         }
 38 |     </style>
 39 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
 40 |     <script src="../audiojs/audio.js"></script>
 41 |     <script>
 42 |         $(function() {
 43 |             // Setup the player to autoplay the next track
 44 |             var a = audiojs.createAll({
 45 |                 trackEnded: function() {
 46 |                     var next = $('ol li.playing').next();
 47 |                     if (!next.length) next = $('ol li').first();
 48 |                     next.addClass('playing').siblings().removeClass('playing');
 49 |                     audio.load($('a', next).attr('data-src'));
 50 |                     audio.play();
 51 |                 }
 52 |             });
 53 | 
 54 |             // Load in the first track
 55 |             var audio = a[0];
 56 |             first = $('ol a').attr('data-src');
 57 |             $('ol li').first().addClass('playing');
 58 |             audio.load(first);
 59 | 
 60 |             // Load in a track on click
 61 |             $('ol li').click(function(e) {
 62 |                 e.preventDefault();
 63 |                 $(this).addClass('playing').siblings().removeClass('playing');
 64 |                 audio.load($('a', this).attr('data-src'));
 65 |                 audio.play();
 66 |             });
 67 |             // Keyboard shortcuts
 68 |             $(document).keydown(function(e) {
 69 |                 var unicode = e.charCode ? e.charCode : e.keyCode;
 70 |                 // right arrow
 71 |                 if (unicode == 39) {
 72 |                     var next = $('li.playing').next();
 73 |                     if (!next.length) next = $('ol li').first();
 74 |                     next.click();
 75 |                     // back arrow
 76 |                 } else if (unicode == 37) {
 77 |                     var prev = $('li.playing').prev();
 78 |                     if (!prev.length) prev = $('ol li').last();
 79 |                     prev.click();
 80 |                     // spacebar
 81 |                 } else if (unicode == 32) {
 82 |                     audio.playPause();
 83 |                 }
 84 |             })
 85 |         });
 86 |     </script>
 87 | </head>
 88 | <body>
 89 | <div id="wrapper">
 90 |     <h1>Bensound Royalty Free Tracks</h1>
 91 |     <audio preload></audio>
 92 |     <ol>
 93 |         <li><a href="#" data-src="../mp3/bensound-dubstep.mp3">Dubstep</a></li>
 94 |         <li><a href="#" data-src="../mp3/bensound-cute.mp3">Cute</a></li>
 95 |         <li><a href="#" data-src="../mp3/bensound-buddy.mp3">Buddy</a></li>
 96 |         <li><a href="#" data-src="../mp3/bensound-acousticbreeze.mp3">Acoustic Breeze</a></li>
 97 |         <li><a href="#" data-src="../mp3/bensound-epic.mp3">Epic</a></li>
 98 |         <li><a href="#" data-src="../mp3/bensound-funnysong.mp3">Funny Song</a></li>
 99 |         <li><a href="#" data-src="../mp3/bensound-littleidea.mp3">Little Idea</a></li>
100 |         <li><a href="#" data-src="../mp3/bensound-betterdays.mp3">Better Days</a></li>
101 |     </ol>
102 | </div>
103 | <div id="shortcuts">
104 |     <div>
105 |         <h1>Keyboard shortcuts:</h1>
106 |         <p><em>&rarr;</em> Next track</p>
107 |         <p><em>&larr;</em> Previous track</p>
108 |         <p><em>Space</em> Play/pause</p>
109 |     </div>
110 | </div>
111 | 
112 | <p class="credit"><a href="http://www.bensound.com/royalty-free-music/">Royalty Free Music from Bensound</a></p>
113 | </body>
114 | </html>
115 | 


--------------------------------------------------------------------------------
/demos/test6.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Test 6 - audio.js</title>
 6 |     <style>
 7 |       p { clear: both; }
 8 |     </style>
 9 |     <script src="../audiojs/audio.js"></script>
10 |     <script>
11 |       audiojs.events.ready(function() {
12 |         var as = audiojs.createAll(),
13 |             audio = as[0],
14 |             ids = ['vol-0', 'vol-10', 'vol-40', 'vol-70', 'vol-100'];
15 |         for (var i = 0, ii = ids.length; i < ii; i++) {
16 |           var elem = document.getElementById(ids[i]),
17 |               volume = ids[i].split('-')[1];
18 |           elem.setAttribute('data-volume', volume / 100)
19 |           elem.onclick = function(e) {
20 |             audio.setVolume(this.getAttribute('data-volume'));
21 |             e.preventDefault();
22 |             return false;
23 |           }
24 |         }
25 |         
26 |       });
27 |     </script>
28 |   </head>
29 |   <body>
30 |     <h1>audiojs.create(element, settings)</h1>
31 |     <p>Volume</p>
32 |     <audio src="https://raw.githubusercontent.com/kolber/audiojs/master/mp3/bensound-dubstep.mp3"></audio>
33 |     <p><a href="#" id="vol-0">Volume: 0.0</a></p>
34 |     <p><a href="#" id="vol-10">Volume: 0.1</a></p>
35 |     <p><a href="#" id="vol-40">Volume: 0.4</a></p>
36 |     <p><a href="#" id="vol-70">Volume: 0.7</a></p>
37 |     <p><a href="#" id="vol-100">Volume: 1.0</a></p>
38 |     <br />
39 |     <p><a href="http://www.bensound.com/royalty-free-music/track/dubstep">Royalty Free Music from Bensound</a></p>
40 |   </body>
41 | </html>


--------------------------------------------------------------------------------
/includes/divider.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kolber/audiojs/8d6d583284653dca1f331150f08493fb65a5cfb2/includes/divider.png


--------------------------------------------------------------------------------
/includes/index.css:
--------------------------------------------------------------------------------
 1 | @font-face { font-family: 'bpreplay'; font-weight: normal; font-style: normal; src: url('BPreplay-webfont.eot'); src: local('☺'), url('BPreplay-webfont.woff') format('woff'), url('BPreplay-webfont.ttf') format('truetype'), url('BPreplay-webfont.svg#webfontgzJ8Cr4g') format('svg'); }
 2 | 
 3 | body { width: 480px; margin: 40px auto; font-family: sans-serif; background: #f6f6f0; color: #330; line-height: 1.5; }
 4 | header { display: block; background: url('./divider.png') bottom center no-repeat; padding: 10px 0px; margin: 0px 0px 20px; text-align: center; }
 5 | h1 { display: inline; position: relative; margin: 0ex 0ex 1ex 1.2ex; font-family: 'bpreplay', sans-serif; font-weight: normal; font-size: 42px; letter-spacing: 1px; }
 6 | h1:before { content: '♬ '; position: absolute; top: 16px; left: -3.1ex; color: #da1c5c; font-size: 0.4em; }
 7 | 
 8 | .audiojs { margin: 15px 0px 20px; }
 9 | h2 { font-family: 'bpreplay', sans-serif; font-weight: normal; font-size: 24px; margin-bottom: 10px; line-height: 1.6; }
10 | 
11 | .download { background: url('./divider.png') top center no-repeat, url('./divider.png') bottom center no-repeat; margin: 30px 0px; padding: 20px 0px; text-align: center; }
12 | .download a em { color: rgba(255, 255, 255, 0.8); font-style: normal; }
13 | .download a em:before { content: '⬇ '; font-size: 0.8em; padding: 0px 4px 0px 0px; }
14 | .download a { display: block; color: #f6f6f0; width: 190px; margin: 5px auto; padding: 8px 2px 8px 0px; font-size: 14px; border-bottom: 0px;
15 |   border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px;
16 |   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.2, #da1c5c), color-stop(0.5, #C81C5C), color-stop(0.51, #da1c5c), color-stop(1, #da1c5c));
17 |   background-image: -moz-linear-gradient(center top, #da1c5c 0%, #C81C5C 50%, #da1c5c 51%, #da1c5c 100%); }
18 |   
19 | h3 { margin: 30px 0px 8px; }
20 | 
21 | p { font-size: 13px; margin: 0px 0px 5px; padding: 0px 0px 1px; }
22 | em { font-style: normal; color: #b1aca0; padding-right: 3px; }
23 | a { color: #330; text-decoration: none; border-bottom: 1px solid; }
24 | 
25 | ol { padding: 0px; font-size: 11px; color: #C5C1B3; }
26 | ol li p { color: #330; }
27 | 
28 | pre,
29 | code { background: #EFEEE6; color: #552; font-family: Monaco, Consolas, 'Lucida Console', monospace; font-size: 12px; padding: 0px 3px; }
30 | pre { padding: 4px 8px; }
31 | 
32 | footer { display: block; margin: 30px 0px 0px; color: #C1BDB0; text-align: center; }
33 | footer a { color: #C1BDB0; border-bottom: 1px solid; margin: 0px 3px; }
34 | footer em { display: block; font-size: 1.2em; font-style: normal; }
35 | footer .ab-c { font-family: 'Andale Mono', 'Courier New', courier; font-size: 0.75em; margin: 50px 0px 0px; padding: 20px 0px; border-top: 1px solid #EFEEE6; }
36 | footer .ab-c a { padding: 0px; }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>audio.js</title>
 6 |     <script src="./audiojs/audio.min.js"></script>
 7 |     <link rel="stylesheet" href="./includes/index.css" media="screen">
 8 |     <script>
 9 |       audiojs.events.ready(function() { 
10 |         audiojs.createAll();
11 |       });
12 |     </script>
13 |   </head>
14 |   <body>
15 |     <header>
16 |       <h1>audio.js</h1>
17 |     </header>
18 | 
19 |     <audio src="http://kolber.github.io/audiojs/demos/mp3/juicy.mp3" preload="auto"></audio>
20 | 
21 |     <h3>Installation</h3>
22 |     <ol>
23 |       <li>
24 |         <p>Put <code>audio.js</code>, <code>player-graphics.gif</code> & <code>audiojs.swf</code> in the same folder.</p>
25 |       </li>
26 |       <li>
27 |         <p>Include audio.js:</p>
28 |         <pre><code>&lt;script src="/audiojs/audio.js"&gt;&lt;/script&gt;</code></pre>
29 |       </li>
30 |       <li>
31 |         <p>Initialise audio.js:</p>
32 |         <pre><code>&lt;script&gt;
33 |   audiojs.events.ready(function() {
34 |     var as = audiojs.createAll();
35 |   });
36 | &lt;/script&gt;</code></pre>
37 |       </li>
38 |       <li>
39 |         <p>Then you can use <code>&lt;audio&gt;</code> wherever you like in your HTML:</p>
40 |         <pre><code>&lt;audio src="/mp3/juicy.mp3" preload="auto" /&gt;</code></pre>
41 |       </li>
42 |     </ol>
43 | 
44 |     <h3>Examples</h3>
45 |     <p>A series of API tests & examples for using and extending audio.js</p>
46 |     <p><em>Example 1</em> <a href="http://kolber.github.com/audiojs/demos/test1.html">Test multiple load types</a></p>
47 |     <p><em>Example 2</em> <a href="http://kolber.github.com/audiojs/demos/test2.html">Custom markup/css</a></p>
48 |     <p><em>Example 3</em> <a href="http://kolber.github.com/audiojs/demos/test3.html">Multiple players, testing <code>preload</code>, <code>loop</code> & <code>autoplay</code> attributes</a></p>
49 |     <p><em>Example 4</em> <a href="http://kolber.github.com/audiojs/demos/test5.html">Customised player</a></p>
50 |     <p><em>Example 5</em> <a href="http://kolber.github.com/audiojs/demos/test6.html">Customised playlist player</a></p>
51 |     <p><em>Example 5</em> <a href="http://kolber.github.com/audiojs/demos/test6.html">Volume Control</a></p>
52 | 
53 |     <h3>Source code</h3>
54 |     <p>All efforts have been made to keep the source as clean and readable as possible. Until we release more detailed documentation, the annotated source is the best reference for usage.</p>
55 |     <p><a href="http://kolber.github.com/audiojs/docs/">Annotated source</a> / <a href="http://github.com/kolber/audiojs">Source on Github</a></p>
56 | 
57 |     <footer>
58 |       <p class="ab-c"><em>&real;</em> Another <a href='http://ab-c.com.au'>ab+c</a> joint</p>
59 |     </footer>
60 |   </body>
61 | </html>
62 | 


--------------------------------------------------------------------------------
/mp3/bensound-acousticbreeze.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kolber/audiojs/8d6d583284653dca1f331150f08493fb65a5cfb2/mp3/bensound-acousticbreeze.mp3


--------------------------------------------------------------------------------
/mp3/bensound-betterdays.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kolber/audiojs/8d6d583284653dca1f331150f08493fb65a5cfb2/mp3/bensound-betterdays.mp3


--------------------------------------------------------------------------------
/mp3/bensound-buddy.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kolber/audiojs/8d6d583284653dca1f331150f08493fb65a5cfb2/mp3/bensound-buddy.mp3


--------------------------------------------------------------------------------
/mp3/bensound-cute.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kolber/audiojs/8d6d583284653dca1f331150f08493fb65a5cfb2/mp3/bensound-cute.mp3


--------------------------------------------------------------------------------
/mp3/bensound-dubstep.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kolber/audiojs/8d6d583284653dca1f331150f08493fb65a5cfb2/mp3/bensound-dubstep.mp3


--------------------------------------------------------------------------------
/mp3/bensound-dubstep.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kolber/audiojs/8d6d583284653dca1f331150f08493fb65a5cfb2/mp3/bensound-dubstep.ogg


--------------------------------------------------------------------------------
/mp3/bensound-epic.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kolber/audiojs/8d6d583284653dca1f331150f08493fb65a5cfb2/mp3/bensound-epic.mp3


--------------------------------------------------------------------------------
/mp3/bensound-funnysong.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kolber/audiojs/8d6d583284653dca1f331150f08493fb65a5cfb2/mp3/bensound-funnysong.mp3


--------------------------------------------------------------------------------
/mp3/bensound-littleidea.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kolber/audiojs/8d6d583284653dca1f331150f08493fb65a5cfb2/mp3/bensound-littleidea.mp3


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "audiojs",
 3 |   "version": "1.0.0",
 4 |   "description": "A cross-browser javascript wrapper for the html5 audio tag",
 5 |   "main": "audiojs/audio.js",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "git+https://github.com/kolber/audiojs.git"
 9 |   },
10 |   "keywords": [
11 |     "audiojs",
12 |     "audio.js",
13 |     "html5",
14 |     "audio",
15 |     "fallback",
16 |     "flash"
17 |   ],
18 |   "author": "Anthony Kolber",
19 |   "license": "MIT",
20 |   "bugs": {
21 |     "url": "https://github.com/kolber/audiojs/issues"
22 |   },
23 |   "homepage": "https://github.com/kolber/audiojs#readme"
24 | }
25 | 


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