Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: kolber/audiojs
base: master
...
head fork: edinella/audiojs
compare: master
Checking mergeability… Don't worry, you can still create the pull request.
  • 5 commits
  • 7 files changed
  • 0 commit comments
  • 1 contributor
View
28 README.md
@@ -11,27 +11,33 @@ Hopefully they can add mp3 support soon.
## Usage
-1. Put `audio.js`, `player-graphics.gif` & `audiojs.swf` in the same folder.
+1. Put `audio.js`, `audio.css`, `player-graphics.gif` & `audiojs.swf` in the same folder.
-2. Include `audio.js`:
+2. Include `audio.js` and `audio.css`:
- <script src="/audiojs/audio.js"></script>
+ ``` html
+ <link type="text/css" href="/audiojs/audio.css" rel="stylesheet" />
+ <script type="text/javascript" src="/audiojs/audio.js"></script>
+ ```
3. Initialise audiojs:
- <script>
- audiojs.events.ready(function() {
- var as = audiojs.createAll();
- });
- </script>
-
+ ```html
+ <script>
+ audiojs.events.ready(function() {
+ var as = audiojs.createAll();
+ });
+ </script>
+ ```
4. Then you can use `<audio>` wherever you like in your HTML:
- <audio src="/mp3/juicy.mp3" preload="auto" />
+ ```html
+ <audio src="/mp3/juicy.mp3" preload="auto" />
+ ```
## Bugs / Contributions
-- [Report a bug](https://github.com/kolber/audiojs/issues)
+- [Report a bug](https://github.com/edinella/audiojs/issues)
- To contribute or send an idea, github message me or fork the project
## Build
View
37 audiojs/audio.css
@@ -0,0 +1,37 @@
+.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,
+.audiojs .loading,
+.audiojs .error,
+.audiojs .pause{background-image:url("./player-graphics.gif");background-repeat:no-repeat;}
+.audiojs .play{background-position:-2px -1px;}
+.audiojs .loading{background-position:-2px -31px;}
+.audiojs .error{background-position:-2px -61px;}
+.audiojs .pause{background-position:-2px -91px;}
+.audiojs.playing .play,
+.audiojs.playing .loading,
+.audiojs.playing .error{display:none;}
+.audiojs.playing .pause{display:block;}
+.audiojs.loading .play,
+.audiojs.loading .pause,
+.audiojs.loading .error{display:none;}
+.audiojs.loading .loading{display:block;}
+.audiojs.error .time,
+.audiojs.error .play,
+.audiojs.error .pause,
+.audiojs.error .scrubber,
+.audiojs.error .loading{display:none;}
+.audiojs.error .error{display:block;}
+.audiojs.error .play-pause p{cursor:auto;}
+.audiojs.error .error-message{display:block;}
View
77 audiojs/audio.js
@@ -83,46 +83,6 @@
loadingClass: 'loading',
errorClass: 'error'
},
- // The css used by the default player. This is is dynamically injected into a `<style>` tag in the top of the head.
- 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; } \
- \
- .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; }',
// The default event callbacks:
trackEnded: function(e) {},
flashError: function() {
@@ -236,9 +196,6 @@
// Return a new `audiojs` instance.
var audio = new container[audiojsInstance](element, s);
- // If css has been passed in, dynamically inject it into the `<head>`.
- if (s.css) this.helpers.injectCss(audio, s.css);
-
// If `<audio>` or mp3 playback isn't supported, insert the swf & attach the required events for it.
if (s.useFlash && s.hasFlash) {
this.injectFlash(audio, id);
@@ -420,40 +377,6 @@
var re = new RegExp('(\\s|^)'+className+'(\\s|$)');
element.className = element.className.replace(re,' ');
},
- // **Dynamic CSS injection**
- // 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.
- injectCss: function(audio, string) {
-
- // If an `audiojs` `<style>` tag already exists, then append to it rather than creating a whole new `<style>`.
- var prepend = '',
- styles = document.getElementsByTagName('style'),
- css = string.replace(/\$1/g, audio.settings.imageLocation);
-
- for (var i = 0, ii = styles.length; i < ii; i++) {
- var title = styles[i].getAttribute('title');
- if (title && ~title.indexOf('audiojs')) {
- style = styles[i];
- if (style.innerHTML === css) return;
- prepend = style.innerHTML;
- break;
- }
- };
-
- var head = document.getElementsByTagName('head')[0],
- firstchild = head.firstChild,
- style = document.createElement('style');
-
- if (!head) return;
-
- style.setAttribute('type', 'text/css');
- style.setAttribute('title', 'audiojs');
-
- if (style.styleSheet) style.styleSheet.cssText = prepend + css;
- else style.appendChild(document.createTextNode(prepend + css));
-
- if (firstchild) head.insertBefore(style, firstchild);
- else head.appendChild(styleElement);
- },
// **Handle all the IE6+7 requirements for cloning `<audio>` nodes**
// Create a html5-safe document fragment by injecting an `<audio>` element into the document fragment.
cloneHtml5Node: function(audioTag) {
View
25 audiojs/audio.min.js
@@ -1,24 +1 @@
-(function(h,o,g){var p=function(){for(var b=/audio(.min)?.js.*/,a=document.getElementsByTagName("script"),c=0,d=a.length;c<d;c++){var e=a[c].getAttribute("src");if(b.test(e))return e.replace(b,"")}}();g[h]={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='+h+'.instances[\'$1\']&datetime=$3"> <param name="allowscriptaccess" value="always"> <embed name="$1" src="$2?playerInstance='+
-h+'.instances[\'$1\']&datetime=$3" width="1" height="1" allowscriptaccess="always"> </object>',settings:{autoplay:false,loop:false,preload:true,imageLocation:p+"player-graphics.gif",swfLocation:p+"audiojs.swf",useFlash:function(){var b=document.createElement("audio");return!(b.canPlayType&&b.canPlayType("audio/mpeg;").replace(/no/,""))}(),hasFlash:function(){if(navigator.plugins&&navigator.plugins.length&&navigator.plugins["Shockwave Flash"])return true;else if(navigator.mimeTypes&&navigator.mimeTypes.length){var b=
-navigator.mimeTypes["application/x-shockwave-flash"];return b&&b.enabledPlugin}else try{new ActiveXObject("ShockwaveFlash.ShockwaveFlash");return true}catch(a){}return false}(),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>',
-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; } .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; }',
-trackEnded:function(){},flashError:function(){var b=this.settings.createPlayer,a=j(b.errorMessageClass,this.wrapper),c='Missing <a href="http://get.adobe.com/flashplayer/">flash player</a> plugin.';if(this.mp3)c+=' <a href="'+this.mp3+'">Download audio file</a>.';g[h].helpers.removeClass(this.wrapper,b.loadingClass);g[h].helpers.addClass(this.wrapper,b.errorClass);a.innerHTML=c},loadError:function(){var b=this.settings.createPlayer,a=j(b.errorMessageClass,this.wrapper);g[h].helpers.removeClass(this.wrapper,
-b.loadingClass);g[h].helpers.addClass(this.wrapper,b.errorClass);a.innerHTML='Error loading: "'+this.mp3+'"'},init:function(){g[h].helpers.addClass(this.wrapper,this.settings.createPlayer.loadingClass)},loadStarted:function(){var b=this.settings.createPlayer,a=j(b.durationClass,this.wrapper),c=Math.floor(this.duration/60),d=Math.floor(this.duration%60);g[h].helpers.removeClass(this.wrapper,b.loadingClass);a.innerHTML=(c<10?"0":"")+c+":"+(d<10?"0":"")+d},loadProgress:function(b){var a=this.settings.createPlayer,
-c=j(a.scrubberClass,this.wrapper);j(a.loaderClass,this.wrapper).style.width=c.offsetWidth*b+"px"},playPause:function(){this.playing?this.settings.play():this.settings.pause()},play:function(){g[h].helpers.addClass(this.wrapper,this.settings.createPlayer.playingClass)},pause:function(){g[h].helpers.removeClass(this.wrapper,this.settings.createPlayer.playingClass)},updatePlayhead:function(b){var a=this.settings.createPlayer,c=j(a.scrubberClass,this.wrapper);j(a.progressClass,this.wrapper).style.width=
-c.offsetWidth*b+"px";a=j(a.playedClass,this.wrapper);c=this.duration*b;b=Math.floor(c/60);c=Math.floor(c%60);a.innerHTML=(b<10?"0":"")+b+":"+(c<10?"0":"")+c}},create:function(b,a){a=a||{};return b.length?this.createAll(a,b):this.newInstance(b,a)},createAll:function(b,a){var c=a||document.getElementsByTagName("audio"),d=[];b=b||{};for(var e=0,i=c.length;e<i;e++)d.push(this.newInstance(c[e],b));return d},newInstance:function(b,a){var c=this.helpers.clone(this.settings),d="audiojs"+this.instanceCount,
-e="audiojs_wrapper"+this.instanceCount;this.instanceCount++;if(b.getAttribute("autoplay")!=null)c.autoplay=true;if(b.getAttribute("loop")!=null)c.loop=true;if(b.getAttribute("preload")=="none")c.preload=false;a&&this.helpers.merge(c,a);if(c.createPlayer.markup)b=this.createPlayer(b,c.createPlayer,e);else b.parentNode.setAttribute("id",e);e=new g[o](b,c);c.css&&this.helpers.injectCss(e,c.css);if(c.useFlash&&c.hasFlash){this.injectFlash(e,d);this.attachFlashEvents(e.wrapper,e)}else c.useFlash&&!c.hasFlash&&
-this.settings.flashError.apply(e);if(!c.useFlash||c.useFlash&&c.hasFlash)this.attachEvents(e.wrapper,e);return this.instances[d]=e},createPlayer:function(b,a,c){var d=document.createElement("div"),e=b.cloneNode(true);d.setAttribute("class","audiojs");d.setAttribute("className","audiojs");d.setAttribute("id",c);if(e.outerHTML&&!document.createElement("audio").canPlayType){e=this.helpers.cloneHtml5Node(b);d.innerHTML=a.markup;d.appendChild(e);b.outerHTML=d.outerHTML;d=document.getElementById(c)}else{d.appendChild(e);
-d.innerHTML+=a.markup;b.parentNode.replaceChild(d,b)}return d.getElementsByTagName("audio")[0]},attachEvents:function(b,a){if(a.settings.createPlayer){var c=a.settings.createPlayer,d=j(c.playPauseClass,b),e=j(c.scrubberClass,b);g[h].events.addListener(d,"click",function(){a.playPause.apply(a)});g[h].events.addListener(e,"click",function(i){i=i.clientX;var f=this,k=0;if(f.offsetParent){do k+=f.offsetLeft;while(f=f.offsetParent)}a.skipTo((i-k)/e.offsetWidth)});if(!a.settings.useFlash){g[h].events.trackLoadProgress(a);
-g[h].events.addListener(a.element,"timeupdate",function(){a.updatePlayhead.apply(a)});g[h].events.addListener(a.element,"ended",function(){a.trackEnded.apply(a)});g[h].events.addListener(a.source,"error",function(){clearInterval(a.readyTimer);clearInterval(a.loadTimer);a.settings.loadError.apply(a)})}}},attachFlashEvents:function(b,a){a.swfReady=false;a.load=function(c){a.mp3=c;a.swfReady&&a.element.load(c)};a.loadProgress=function(c,d){a.loadedPercent=c;a.duration=d;a.settings.loadStarted.apply(a);
-a.settings.loadProgress.apply(a,[c])};a.skipTo=function(c){if(!(c>a.loadedPercent)){a.updatePlayhead.call(a,[c]);a.element.skipTo(c)}};a.updatePlayhead=function(c){a.settings.updatePlayhead.apply(a,[c])};a.play=function(){if(!a.settings.preload){a.settings.preload=true;a.element.init(a.mp3)}a.playing=true;a.element.pplay();a.settings.play.apply(a)};a.pause=function(){a.playing=false;a.element.ppause();a.settings.pause.apply(a)};a.setVolume=function(c){a.element.setVolume(c)};a.loadStarted=function(){a.swfReady=
-true;a.settings.preload&&a.element.init(a.mp3);a.settings.autoplay&&a.play.apply(a)}},injectFlash:function(b,a){var c=this.flashSource.replace(/\$1/g,a);c=c.replace(/\$2/g,b.settings.swfLocation);c=c.replace(/\$3/g,+new Date+Math.random());var d=b.wrapper.innerHTML,e=document.createElement("div");e.innerHTML=c+d;b.wrapper.innerHTML=e.innerHTML;b.element=this.helpers.getSwf(a)},helpers:{merge:function(b,a){for(attr in a)if(b.hasOwnProperty(attr)||a.hasOwnProperty(attr))b[attr]=a[attr]},clone:function(b){if(b==
-null||typeof b!=="object")return b;var a=new b.constructor,c;for(c in b)a[c]=arguments.callee(b[c]);return a},addClass:function(b,a){RegExp("(\\s|^)"+a+"(\\s|$)").test(b.className)||(b.className+=" "+a)},removeClass:function(b,a){b.className=b.className.replace(RegExp("(\\s|^)"+a+"(\\s|$)")," ")},injectCss:function(b,a){for(var c="",d=document.getElementsByTagName("style"),e=a.replace(/\$1/g,b.settings.imageLocation),i=0,f=d.length;i<f;i++){var k=d[i].getAttribute("title");if(k&&~k.indexOf("audiojs")){f=
-d[i];if(f.innerHTML===e)return;c=f.innerHTML;break}}d=document.getElementsByTagName("head")[0];i=d.firstChild;f=document.createElement("style");if(d){f.setAttribute("type","text/css");f.setAttribute("title","audiojs");if(f.styleSheet)f.styleSheet.cssText=c+e;else f.appendChild(document.createTextNode(c+e));i?d.insertBefore(f,i):d.appendChild(styleElement)}},cloneHtml5Node:function(b){var a=document.createDocumentFragment(),c=a.createElement?a:document;c.createElement("audio");c=c.createElement("div");
-a.appendChild(c);c.innerHTML=b.outerHTML;return c.firstChild},getSwf:function(b){b=document[b]||window[b];return b.length>1?b[b.length-1]:b}},events:{memoryLeaking:false,listeners:[],addListener:function(b,a,c){if(b.addEventListener)b.addEventListener(a,c,false);else if(b.attachEvent){this.listeners.push(b);if(!this.memoryLeaking){window.attachEvent("onunload",function(){if(this.listeners)for(var d=0,e=this.listeners.length;d<e;d++)g[h].events.purge(this.listeners[d])});this.memoryLeaking=true}b.attachEvent("on"+
-a,function(){c.call(b,window.event)})}},trackLoadProgress:function(b){if(b.settings.preload){var a,c;b=b;var d=/(ipod|iphone|ipad)/i.test(navigator.userAgent);a=setInterval(function(){if(b.element.readyState>-1)d||b.init.apply(b);if(b.element.readyState>1){b.settings.autoplay&&b.play.apply(b);clearInterval(a);c=setInterval(function(){b.loadProgress.apply(b);b.loadedPercent>=1&&clearInterval(c)})}},10);b.readyTimer=a;b.loadTimer=c}},purge:function(b){var a=b.attributes,c;if(a)for(c=0;c<a.length;c+=
-1)if(typeof b[a[c].name]==="function")b[a[c].name]=null;if(a=b.childNodes)for(c=0;c<a.length;c+=1)purge(b.childNodes[c])},ready:function(){return function(b){var a=window,c=false,d=true,e=a.document,i=e.documentElement,f=e.addEventListener?"addEventListener":"attachEvent",k=e.addEventListener?"removeEventListener":"detachEvent",n=e.addEventListener?"":"on",m=function(l){if(!(l.type=="readystatechange"&&e.readyState!="complete")){(l.type=="load"?a:e)[k](n+l.type,m,false);if(!c&&(c=true))b.call(a,l.type||
-l)}},q=function(){try{i.doScroll("left")}catch(l){setTimeout(q,50);return}m("poll")};if(e.readyState=="complete")b.call(a,"lazy");else{if(e.createEventObject&&i.doScroll){try{d=!a.frameElement}catch(r){}d&&q()}e[f](n+"DOMContentLoaded",m,false);e[f](n+"readystatechange",m,false);a[f](n+"load",m,false)}}}()}};g[o]=function(b,a){this.element=b;this.wrapper=b.parentNode;this.source=b.getElementsByTagName("source")[0]||b;this.mp3=function(c){var d=c.getElementsByTagName("source")[0];return c.getAttribute("src")||
-(d?d.getAttribute("src"):null)}(b);this.settings=a;this.loadStartedCalled=false;this.loadedPercent=0;this.duration=1;this.playing=false};g[o].prototype={updatePlayhead:function(){this.settings.updatePlayhead.apply(this,[this.element.currentTime/this.duration])},skipTo:function(b){if(!(b>this.loadedPercent)){this.element.currentTime=this.duration*b;this.updatePlayhead()}},load:function(b){this.loadStartedCalled=false;this.source.setAttribute("src",b);this.element.load();this.mp3=b;g[h].events.trackLoadProgress(this)},
-loadError:function(){this.settings.loadError.apply(this)},init:function(){this.settings.init.apply(this)},loadStarted:function(){if(!this.element.duration)return false;this.duration=this.element.duration;this.updatePlayhead();this.settings.loadStarted.apply(this)},loadProgress:function(){if(this.element.buffered!=null&&this.element.buffered.length){if(!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():this.play()},play:function(){/(ipod|iphone|ipad)/i.test(navigator.userAgent)&&this.element.readyState==0&&this.init.apply(this);if(!this.settings.preload){this.settings.preload=true;this.element.setAttribute("preload","auto");g[h].events.trackLoadProgress(this)}this.playing=true;this.element.play();this.settings.play.apply(this)},pause:function(){this.playing=false;this.element.pause();this.settings.pause.apply(this)},
-setVolume:function(b){this.element.volume=b},trackEnded:function(){this.skipTo.apply(this,[0]);this.settings.loop||this.pause.apply(this);this.settings.trackEnded.apply(this)}};var j=function(b,a){var c=[];a=a||document;if(a.getElementsByClassName)c=a.getElementsByClassName(b);else{var d,e,i=a.getElementsByTagName("*"),f=RegExp("(^|\\s)"+b+"(\\s|$)");d=0;for(e=i.length;d<e;d++)f.test(i[d].className)&&c.push(i[d])}return c.length>1?c:c[0]}})("audiojs","audiojsInstance",this);
+(function(a,b,c){var d=function(){var a=new RegExp("audio(.min)?.js.*"),b=document.getElementsByTagName("script");for(var c=0,d=b.length;c<d;c++){var e=b[c].getAttribute("src");if(a.test(e))return e.replace(a,"")}}();c[a]={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='+a+'.instances[\'$1\']&datetime=$3"> <param name="allowscriptaccess" value="always"> <embed name="$1" src="$2?playerInstance='+a+'.instances[\'$1\']&datetime=$3" width="1" height="1" allowscriptaccess="always"> </object>',settings:{autoplay:false,loop:false,preload:true,imageLocation:d+"player-graphics.gif",swfLocation:d+"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 true}else if(navigator.mimeTypes&&navigator.mimeTypes.length){var a=navigator.mimeTypes["application/x-shockwave-flash"];return a&&a.enabledPlugin}else{try{var b=new ActiveXObject("ShockwaveFlash.ShockwaveFlash");return true}catch(c){}}return false}(),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>',playPauseClass:"play-pause",scrubberClass:"scrubber",progressClass:"progress",loaderClass:"loaded",timeClass:"time",durationClass:"duration",playedClass:"played",errorMessageClass:"error-message",playingClass:"playing",loadingClass:"loading",errorClass:"error"},trackEnded:function(a){},flashError:function(){var b=this.settings.createPlayer,d=e(b.errorMessageClass,this.wrapper),f='Missing <a href="http://get.adobe.com/flashplayer/">flash player</a> plugin.';if(this.mp3)f+=' <a href="'+this.mp3+'">Download audio file</a>.';c[a].helpers.removeClass(this.wrapper,b.loadingClass);c[a].helpers.addClass(this.wrapper,b.errorClass);d.innerHTML=f},loadError:function(b){var d=this.settings.createPlayer,f=e(d.errorMessageClass,this.wrapper);c[a].helpers.removeClass(this.wrapper,d.loadingClass);c[a].helpers.addClass(this.wrapper,d.errorClass);f.innerHTML='Error loading: "'+this.mp3+'"'},init:function(){var b=this.settings.createPlayer;c[a].helpers.addClass(this.wrapper,b.loadingClass)},loadStarted:function(){var b=this.settings.createPlayer,d=e(b.durationClass,this.wrapper),f=Math.floor(this.duration/60),g=Math.floor(this.duration%60);c[a].helpers.removeClass(this.wrapper,b.loadingClass);d.innerHTML=(f<10?"0":"")+f+":"+(g<10?"0":"")+g},loadProgress:function(a){var b=this.settings.createPlayer,c=e(b.scrubberClass,this.wrapper),d=e(b.loaderClass,this.wrapper);d.style.width=c.offsetWidth*a+"px"},playPause:function(){if(this.playing)this.settings.play();else this.settings.pause()},play:function(){var b=this.settings.createPlayer;c[a].helpers.addClass(this.wrapper,b.playingClass)},pause:function(){var b=this.settings.createPlayer;c[a].helpers.removeClass(this.wrapper,b.playingClass)},updatePlayhead:function(a){var b=this.settings.createPlayer,c=e(b.scrubberClass,this.wrapper),d=e(b.progressClass,this.wrapper);d.style.width=c.offsetWidth*a+"px";var f=e(b.playedClass,this.wrapper),g=this.duration*a,h=Math.floor(g/60),i=Math.floor(g%60);f.innerHTML=(h<10?"0":"")+h+":"+(i<10?"0":"")+i}},create:function(a,b){var b=b||{};if(a.length){return this.createAll(b,a)}else{return this.newInstance(a,b)}},createAll:function(a,b){var c=b||document.getElementsByTagName("audio"),d=[];a=a||{};for(var e=0,f=c.length;e<f;e++){d.push(this.newInstance(c[e],a))}return d},newInstance:function(a,d){var a=a,e=this.helpers.clone(this.settings),f="audiojs"+this.instanceCount,g="audiojs_wrapper"+this.instanceCount,h=this.instanceCount++;if(a.getAttribute("autoplay")!=null)e.autoplay=true;if(a.getAttribute("loop")!=null)e.loop=true;if(a.getAttribute("preload")=="none")e.preload=false;if(d)this.helpers.merge(e,d);if(e.createPlayer.markup)a=this.createPlayer(a,e.createPlayer,g);else a.parentNode.setAttribute("id",g);var i=new c[b](a,e);if(e.useFlash&&e.hasFlash){this.injectFlash(i,f);this.attachFlashEvents(i.wrapper,i)}else if(e.useFlash&&!e.hasFlash){this.settings.flashError.apply(i)}if(!e.useFlash||e.useFlash&&e.hasFlash)this.attachEvents(i.wrapper,i);this.instances[f]=i;return i},createPlayer:function(a,b,c){var d=document.createElement("div"),e=a.cloneNode(true);d.setAttribute("class","audiojs");d.setAttribute("className","audiojs");d.setAttribute("id",c);if(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)}else{d.appendChild(e);d.innerHTML=d.innerHTML+b.markup;a.parentNode.replaceChild(d,a)}return d.getElementsByTagName("audio")[0]},attachEvents:function(b,d){if(!d.settings.createPlayer)return;var f=d.settings.createPlayer,g=e(f.playPauseClass,b),h=e(f.scrubberClass,b),i=function(a){var b=0;if(a.offsetParent){do{b+=a.offsetLeft}while(a=a.offsetParent)}return b};c[a].events.addListener(g,"click",function(a){d.playPause.apply(d)});c[a].events.addListener(h,"click",function(a){var b=a.clientX-i(this);d.skipTo(b/h.offsetWidth)});if(d.settings.useFlash)return;c[a].events.trackLoadProgress(d);c[a].events.addListener(d.element,"timeupdate",function(a){d.updatePlayhead.apply(d)});c[a].events.addListener(d.element,"ended",function(a){d.trackEnded.apply(d)});c[a].events.addListener(d.source,"error",function(a){clearInterval(d.readyTimer);clearInterval(d.loadTimer);d.settings.loadError.apply(d)})},attachFlashEvents:function(a,b){b["swfReady"]=false;b["load"]=function(a){b.mp3=a;if(b.swfReady)b.element.load(a)};b["loadProgress"]=function(a,c){b.loadedPercent=a;b.duration=c;b.settings.loadStarted.apply(b);b.settings.loadProgress.apply(b,[a])};b["skipTo"]=function(a){if(a>b.loadedPercent)return;b.updatePlayhead.call(b,[a]);b.element.skipTo(a)};b["updatePlayhead"]=function(a){b.settings.updatePlayhead.apply(b,[a])};b["play"]=function(){if(!b.settings.preload){b.settings.preload=true;b.element.init(b.mp3)}b.playing=true;b.element.pplay();b.settings.play.apply(b)};b["pause"]=function(){b.playing=false;b.element.ppause();b.settings.pause.apply(b)};b["setVolume"]=function(a){b.element.setVolume(a)};b["loadStarted"]=function(){b.swfReady=true;if(b.settings.preload)b.element.init(b.mp3);if(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());var 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(a==null||typeof a!=="object")return a;var b=new a.constructor;for(var c in a)b[c]=arguments.callee(a[c]);return b},addClass:function(a,b){var c=new RegExp("(\\s|^)"+b+"(\\s|$)");if(c.test(a.className))return;a.className+=" "+b},removeClass:function(a,b){var c=new RegExp("(\\s|^)"+b+"(\\s|$)");a.className=a.className.replace(c," ")},cloneHtml5Node:function(a){var b=document.createDocumentFragment(),c=b.createElement?b:document;c.createElement("audio");var d=c.createElement("div");b.appendChild(d);d.innerHTML=a.outerHTML;return d.firstChild},getSwf:function(a){var b=document[a]||window[a];return b.length>1?b[b.length-1]:b}},events:{memoryLeaking:false,listeners:[],addListener:function(b,d,e){if(b.addEventListener){b.addEventListener(d,e,false)}else if(b.attachEvent){this.listeners.push(b);if(!this.memoryLeaking){window.attachEvent("onunload",function(){if(this.listeners){for(var b=0,d=this.listeners.length;b<d;b++){c[a].events.purge(this.listeners[b])}}});this.memoryLeaking=true}b.attachEvent("on"+d,function(){e.call(b,window.event)})}},trackLoadProgress:function(a){if(!a.settings.preload)return;var b,c,a=a,d=/(ipod|iphone|ipad)/i.test(navigator.userAgent);b=setInterval(function(){if(a.element.readyState>-1){if(!d)a.init.apply(a)}if(a.element.readyState>1){if(a.settings.autoplay)a.play.apply(a);clearInterval(b);c=setInterval(function(){a.loadProgress.apply(a);if(a.loadedPercent>=1)clearInterval(c)})}},10);a.readyTimer=b;a.loadTimer=c},purge:function(a){var b=a.attributes,c;if(b){for(c=0;c<b.length;c+=1){if(typeof a[b[c].name]==="function")a[b[c].name]=null}}b=a.childNodes;if(b){for(c=0;c<b.length;c+=1)purge(a.childNodes[c])}},ready:function(){return function(a){var b=window,c=false,d=true,e=b.document,f=e.documentElement,g=e.addEventListener?"addEventListener":"attachEvent",h=e.addEventListener?"removeEventListener":"detachEvent",i=e.addEventListener?"":"on",j=function(d){if(d.type=="readystatechange"&&e.readyState!="complete")return;(d.type=="load"?b:e)[h](i+d.type,j,false);if(!c&&(c=true))a.call(b,d.type||d)},k=function(){try{f.doScroll("left")}catch(a){setTimeout(k,50);return}j("poll")};if(e.readyState=="complete")a.call(b,"lazy");else{if(e.createEventObject&&f.doScroll){try{d=!b.frameElement}catch(l){}if(d)k()}e[g](i+"DOMContentLoaded",j,false);e[g](i+"readystatechange",j,false);b[g](i+"load",j,false)}}}()}};c[b]=function(a,b){this.element=a;this.wrapper=a.parentNode;this.source=a.getElementsByTagName("source")[0]||a;this.mp3=function(a){var b=a.getElementsByTagName("source")[0];return a.getAttribute("src")||(b?b.getAttribute("src"):null)}(a);this.settings=b;this.loadStartedCalled=false;this.loadedPercent=0;this.duration=1;this.playing=false};c[b].prototype={updatePlayhead:function(){var a=this.element.currentTime/this.duration;this.settings.updatePlayhead.apply(this,[a])},skipTo:function(a){if(a>this.loadedPercent)return;this.element.currentTime=this.duration*a;this.updatePlayhead()},load:function(b){this.loadStartedCalled=false;this.source.setAttribute("src",b);this.element.load();this.mp3=b;c[a].events.trackLoadProgress(this)},loadError:function(){this.settings.loadError.apply(this)},init:function(){this.settings.init.apply(this)},loadStarted:function(){if(!this.element.duration)return false;this.duration=this.element.duration;this.updatePlayhead();this.settings.loadStarted.apply(this)},loadProgress:function(){if(this.element.buffered!=null&&this.element.buffered.length){if(!this.loadStartedCalled){this.loadStartedCalled=this.loadStarted()}var a=this.element.buffered.end(this.element.buffered.length-1);this.loadedPercent=a/this.duration;this.settings.loadProgress.apply(this,[this.loadedPercent])}},playPause:function(){if(this.playing)this.pause();else this.play()},play:function(){var b=/(ipod|iphone|ipad)/i.test(navigator.userAgent);if(b&&this.element.readyState==0)this.init.apply(this);if(!this.settings.preload){this.settings.preload=true;this.element.setAttribute("preload","auto");c[a].events.trackLoadProgress(this)}this.playing=true;this.element.play();this.settings.play.apply(this)},pause:function(){this.playing=false;this.element.pause();this.settings.pause.apply(this)},setVolume:function(a){this.element.volume=a},trackEnded:function(a){this.skipTo.apply(this,[0]);if(!this.settings.loop)this.pause.apply(this);this.settings.trackEnded.apply(this)}};var e=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|$)");for(d=0,e=f.length;d<e;d++){if(g.test(f[d].className)){c.push(f[d])}}}return c.length>1?c:c[0]}})("audiojs","audiojsInstance",this)
View
3  demos/test4.html
@@ -6,7 +6,8 @@
<style>
p { clear: both; }
</style>
- <script src="../audiojs/audio.js"></script>
+ <link type="text/css" href="../audiojs/audio.css" rel="stylesheet" />
+ <script type="text/javascript" src="../audiojs/audio.js"></script>
<script>
audiojs.events.ready(function() {
var as = audiojs.createAll();
View
3  demos/test6.html
@@ -6,7 +6,8 @@
<style>
p { clear: both; }
</style>
- <script src="../audiojs/audio.js"></script>
+ <link type="text/css" href="../audiojs/audio.css" rel="stylesheet" />
+ <script type="text/javascript" src="../audiojs/audio.js"></script>
<script>
audiojs.events.ready(function() {
var as = audiojs.createAll(),
View
10 index.html
@@ -3,7 +3,8 @@
<head>
<meta charset="utf-8">
<title>audio.js</title>
- <script src="./audiojs/audio.min.js"></script>
+ <link type="text/css" href="./audiojs/audio.css" rel="stylesheet" />
+ <script type="text/javascript" src="./audiojs/audio.js"></script>
<link rel="stylesheet" href="./includes/index.css" media="screen">
<script>
audiojs.events.ready(function() {
@@ -21,11 +22,12 @@
<h3>Installation</h3>
<ol>
<li>
- <p>Put <code>audio.js</code>, <code>player-graphics.gif</code> & <code>audiojs.swf</code> in the same folder.</p>
+ <p>Put <code>audio.js</code>, <code>audio.css</code>, <code>player-graphics.gif</code> & <code>audiojs.swf</code> in the same folder.</p>
</li>
<li>
- <p>Include audio.js:</p>
- <pre><code>&lt;script src="/audiojs/audio.js"&gt;&lt;/script&gt;</code></pre>
+ <p>Include audio.js and audio.css:</p>
+ <pre><code>&lt;link type="text/css" href="/audiojs/audio.css" rel="stylesheet" /&gt;
+&lt;script type="text/javascript" src="/audiojs/audio.js"&gt;&lt;/script&gt;</code></pre>
</li>
<li>
<p>Initialise audio.js:</p>

No commit comments for this range

Something went wrong with that request. Please try again.