├── LICENSE.txt
├── README.markdown
├── audio-js.css
├── audio.js
├── audio
    ├── Palace Cat - Crookshanks.mp3
    ├── Palace Cat - Crookshanks.ogg
    └── Palace Cat - Crookshanks.wav
├── demo.html
└── skins
    ├── hu.css
    ├── tube.css
    └── vim.css


/LICENSE.txt:
--------------------------------------------------------------------------------
  1 |                    GNU LESSER GENERAL PUBLIC LICENSE
  2 |                        Version 3, 29 June 2007
  3 | 
  4 |  Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
  5 |  Everyone is permitted to copy and distribute verbatim copies
  6 |  of this license document, but changing it is not allowed.
  7 | 
  8 | 
  9 |   This version of the GNU Lesser General Public License incorporates
 10 | the terms and conditions of version 3 of the GNU General Public
 11 | License, supplemented by the additional permissions listed below.
 12 | 
 13 |   0. Additional Definitions.
 14 | 
 15 |   As used herein, "this License" refers to version 3 of the GNU Lesser
 16 | General Public License, and the "GNU GPL" refers to version 3 of the GNU
 17 | General Public License.
 18 | 
 19 |   "The Library" refers to a covered work governed by this License,
 20 | other than an Application or a Combined Work as defined below.
 21 | 
 22 |   An "Application" is any work that makes use of an interface provided
 23 | by the Library, but which is not otherwise based on the Library.
 24 | Defining a subclass of a class defined by the Library is deemed a mode
 25 | of using an interface provided by the Library.
 26 | 
 27 |   A "Combined Work" is a work produced by combining or linking an
 28 | Application with the Library.  The particular version of the Library
 29 | with which the Combined Work was made is also called the "Linked
 30 | Version".
 31 | 
 32 |   The "Minimal Corresponding Source" for a Combined Work means the
 33 | Corresponding Source for the Combined Work, excluding any source code
 34 | for portions of the Combined Work that, considered in isolation, are
 35 | based on the Application, and not on the Linked Version.
 36 | 
 37 |   The "Corresponding Application Code" for a Combined Work means the
 38 | object code and/or source code for the Application, including any data
 39 | and utility programs needed for reproducing the Combined Work from the
 40 | Application, but excluding the System Libraries of the Combined Work.
 41 | 
 42 |   1. Exception to Section 3 of the GNU GPL.
 43 | 
 44 |   You may convey a covered work under sections 3 and 4 of this License
 45 | without being bound by section 3 of the GNU GPL.
 46 | 
 47 |   2. Conveying Modified Versions.
 48 | 
 49 |   If you modify a copy of the Library, and, in your modifications, a
 50 | facility refers to a function or data to be supplied by an Application
 51 | that uses the facility (other than as an argument passed when the
 52 | facility is invoked), then you may convey a copy of the modified
 53 | version:
 54 | 
 55 |    a) under this License, provided that you make a good faith effort to
 56 |    ensure that, in the event an Application does not supply the
 57 |    function or data, the facility still operates, and performs
 58 |    whatever part of its purpose remains meaningful, or
 59 | 
 60 |    b) under the GNU GPL, with none of the additional permissions of
 61 |    this License applicable to that copy.
 62 | 
 63 |   3. Object Code Incorporating Material from Library Header Files.
 64 | 
 65 |   The object code form of an Application may incorporate material from
 66 | a header file that is part of the Library.  You may convey such object
 67 | code under terms of your choice, provided that, if the incorporated
 68 | material is not limited to numerical parameters, data structure
 69 | layouts and accessors, or small macros, inline functions and templates
 70 | (ten or fewer lines in length), you do both of the following:
 71 | 
 72 |    a) Give prominent notice with each copy of the object code that the
 73 |    Library is used in it and that the Library and its use are
 74 |    covered by this License.
 75 | 
 76 |    b) Accompany the object code with a copy of the GNU GPL and this license
 77 |    document.
 78 | 
 79 |   4. Combined Works.
 80 | 
 81 |   You may convey a Combined Work under terms of your choice that,
 82 | taken together, effectively do not restrict modification of the
 83 | portions of the Library contained in the Combined Work and reverse
 84 | engineering for debugging such modifications, if you also do each of
 85 | the following:
 86 | 
 87 |    a) Give prominent notice with each copy of the Combined Work that
 88 |    the Library is used in it and that the Library and its use are
 89 |    covered by this License.
 90 | 
 91 |    b) Accompany the Combined Work with a copy of the GNU GPL and this license
 92 |    document.
 93 | 
 94 |    c) For a Combined Work that displays copyright notices during
 95 |    execution, include the copyright notice for the Library among
 96 |    these notices, as well as a reference directing the user to the
 97 |    copies of the GNU GPL and this license document.
 98 | 
 99 |    d) Do one of the following:
100 | 
101 |        0) Convey the Minimal Corresponding Source under the terms of this
102 |        License, and the Corresponding Application Code in a form
103 |        suitable for, and under terms that permit, the user to
104 |        recombine or relink the Application with a modified version of
105 |        the Linked Version to produce a modified Combined Work, in the
106 |        manner specified by section 6 of the GNU GPL for conveying
107 |        Corresponding Source.
108 | 
109 |        1) Use a suitable shared library mechanism for linking with the
110 |        Library.  A suitable mechanism is one that (a) uses at run time
111 |        a copy of the Library already present on the user's computer
112 |        system, and (b) will operate properly with a modified version
113 |        of the Library that is interface-compatible with the Linked
114 |        Version.
115 | 
116 |    e) Provide Installation Information, but only if you would otherwise
117 |    be required to provide such information under section 6 of the
118 |    GNU GPL, and only to the extent that such information is
119 |    necessary to install and execute a modified version of the
120 |    Combined Work produced by recombining or relinking the
121 |    Application with a modified version of the Linked Version. (If
122 |    you use option 4d0, the Installation Information must accompany
123 |    the Minimal Corresponding Source and Corresponding Application
124 |    Code. If you use option 4d1, you must provide the Installation
125 |    Information in the manner specified by section 6 of the GNU GPL
126 |    for conveying Corresponding Source.)
127 | 
128 |   5. Combined Libraries.
129 | 
130 |   You may place library facilities that are a work based on the
131 | Library side by side in a single library together with other library
132 | facilities that are not Applications and are not covered by this
133 | License, and convey such a combined library under terms of your
134 | choice, if you do both of the following:
135 | 
136 |    a) Accompany the combined library with a copy of the same work based
137 |    on the Library, uncombined with any other library facilities,
138 |    conveyed under the terms of this License.
139 | 
140 |    b) Give prominent notice with the combined library that part of it
141 |    is a work based on the Library, and explaining where to find the
142 |    accompanying uncombined form of the same work.
143 | 
144 |   6. Revised Versions of the GNU Lesser General Public License.
145 | 
146 |   The Free Software Foundation may publish revised and/or new versions
147 | of the GNU Lesser General Public License from time to time. Such new
148 | versions will be similar in spirit to the present version, but may
149 | differ in detail to address new problems or concerns.
150 | 
151 |   Each version is given a distinguishing version number. If the
152 | Library as you received it specifies that a certain numbered version
153 | of the GNU Lesser General Public License "or any later version"
154 | applies to it, you have the option of following the terms and
155 | conditions either of that published version or of any later version
156 | published by the Free Software Foundation. If the Library as you
157 | received it does not specify a version number of the GNU Lesser
158 | General Public License, you may choose any version of the GNU Lesser
159 | General Public License ever published by the Free Software Foundation.
160 | 
161 |   If the Library as you received it specifies that a proxy can decide
162 | whether future versions of the GNU Lesser General Public License shall
163 | apply, that proxy's public statement of acceptance of any version is
164 | permanent authorization for you to choose that version for the
165 | Library.
166 | 


--------------------------------------------------------------------------------
/README.markdown:
--------------------------------------------------------------------------------
 1 | AudioJS
 2 | --------
 3 | Fork of [VideoJS.com](http://videojs.com) for audio, with support for themes.
 4 | 
 5 | <a href="http://jedfoster.github.com/AudioJS/">Check out the demo</a> for an example of how to use it.
 6 | 
 7 | Based on [VideoJS.com](http://videojs.com)
 8 | 
 9 | 
10 | Example jQuery plugin:
11 | 
12 |     if (window.jQuery) {
13 |       (function($) {
14 |         $.fn.AudioJS = function(options) {
15 |           this.each(function() {
16 |             AudioJS.setup(this, options);
17 |           });
18 |           return this;
19 |         };
20 |         $.fn.player = function() {
21 |           return this[0].player;
22 |         };
23 |       })(jQuery);
24 |     }
25 | 
26 | 
27 | Audio sample is ["Crookshanks" by Palace Cat](http://palacecat.bandcamp.com/track/crookshanks), via [duplokat](http://duplokat.tumblr.com/post/12695092003/geek-friday-ringtone)


--------------------------------------------------------------------------------
/audio-js.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | AudioJS Default Styles (http://videojs.com)
  3 | Version 2.0.2
  4 | 
  5 | REQUIRED STYLES (be careful overriding)
  6 | ================================================================================ */
  7 | /* Box containing audio, controls, and download links.
  8 |    Will be set to the width of the audio element through JS
  9 |    If you want to add some kind of frame or special positioning, use another containing element, not audio-js-box. */
 10 | .audio-js-box { text-align: left; position: relative; line-height: 0 !important; margin: 0; padding: 0 !important; border: none !important;  }
 11 | 
 12 | /* Audio Element */
 13 | .audio-js-box audio {	width: 0; height: 0; display: block;}
 14 | .audio-js-box.ajs-ios audio{ width: 100%; height: 3em;}
 15 | 
 16 | /* Subtiles Style */
 17 | .audio-js-box .ajs-subtitles { color: #fff; font-size: 20px; text-align: center; position: absolute; bottom: 40px; left: 0; right: 0; }
 18 | 
 19 | /* Styles Loaded Check */
 20 | .ajs-styles-check { height: 5px; position: absolute; }
 21 | 
 22 | /* DEFAULT SKIN (override in another file)
 23 | ================================================================================
 24 | Using all CSS to draw the controls. Images could be used if desired.
 25 | Instead of editing this file, I recommend creating your own skin CSS file to be included after this file,
 26 | so you can upgrade to newer versions easier. */
 27 | 
 28 | /* Controls Layout
 29 |   Using absolute positioning to position controls */
 30 | .audio-js-box .ajs-controls {
 31 |   position: relative; margin: 0; opacity: 0.85; color: #fff;
 32 |   display: none; /* Start hidden */
 33 |   left: 0; right: 0; /* 100% width of audio-js-box */
 34 |   width: 100%;
 35 |   bottom: 0px; /* Distance from the bottom of the box/audio. Keep 0. Use height to add more bottom margin. */
 36 |   height: 35px; /* Including any margin you want above or below control items */
 37 |   padding: 0; /* Controls are absolutely position, so no padding necessary */
 38 |   -webkit-transition: opacity 0.5s linear;
 39 |   -moz-transition: opacity 0.5s linear;
 40 |   -o-transition: opacity 0.5s linear;
 41 |   -ms-transition: opacity 0.5s linear;
 42 |   transition: opacity 0.5s linear;
 43 | }
 44 | 
 45 | .ajs-hide {
 46 |   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */
 47 |   opacity: 0 !important;
 48 | }
 49 | 
 50 | .ajs-show {
 51 |   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE8 */
 52 |   opacity: 1 !important;
 53 | }
 54 | 
 55 | .audio-js-box .ajs-controls > div { /* Direct div children of control bar */
 56 |   position: absolute; /* Use top, bottom, left, and right to specifically position the control. */
 57 |   text-align: center; margin: 0; padding: 0;
 58 |   height: 25px; /* Default height of individual controls */
 59 |   top: 5px; /* Top margin to put space between audio and controls when controls are below */
 60 | 
 61 |   /* CSS Background Gradients, Using to give the aqua-ish look. */
 62 |   background-color: #0B151A;
 63 |   background: #1F3744 -webkit-gradient(linear, left top, left bottom, from(#0B151A), to(#1F3744)) left 12px;
 64 |   background: #1F3744 -moz-linear-gradient(top,  #0B151A,  #1F3744) left 12px;
 65 | 
 66 |   /* CSS Curved Corners */
 67 |   -webkit-border-radius: 5px; border-radius: 5px;
 68 | 
 69 |   /* CSS Shadows */
 70 |   -webkit-box-shadow: 1px 1px 2px #000; -moz-box-shadow: 1px 1px 2px #000; box-shadow: 1px 1px 2px #000;
 71 | }
 72 | 
 73 | /* Placement of Control Items
 74 |    - Left side of pogress bar, use left & width
 75 |    - Rigth side of progress bar, use right & width
 76 |    - Expand with the audio (like progress bar) use left & right */
 77 | .ajs-controls > div.ajs-play-control       { left: 5px;   width: 25px;  }
 78 | .ajs-controls > div.ajs-progress-control   { left: 35px;  right: 125px; } /* Using left & right so it expands with the width of the audio */
 79 | .ajs-controls > div.ajs-time-control       { width: 75px; right: 50px;  } /* Time control and progress bar are combined to look like one */
 80 | .ajs-controls > div.ajs-volume-control     { width: 50px; right: 5px;  }
 81 | 
 82 | /* Removing curved corners on progress control and time control to join them. */
 83 | .ajs-controls > div.ajs-progress-control {
 84 |   -webkit-border-top-right-radius: 0; border-top-right-radius: 0;
 85 |   -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0;
 86 | }
 87 | .ajs-controls > div.ajs-time-control {
 88 |   -webkit-border-top-left-radius: 0; border-top-left-radius: 0;
 89 |   -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0;
 90 | }
 91 | 
 92 | /* Play/Pause
 93 | -------------------------------------------------------------------------------- */
 94 | .ajs-play-control { cursor: pointer !important; }
 95 | /* Play Icon */
 96 | .ajs-play-control span { display: block; font-size: 0; line-height: 0; }
 97 | .ajs-paused .ajs-play-control span {
 98 |   width: 0; height: 0; margin: 8px 0 0 8px;
 99 |   /* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */
100 |   border-left: 10px solid #fff; /* Width & Color of play icon */
101 |   /* Height of play icon is total top & bottom border widths. Color is transparent. */
102 |   border-top: 5px solid rgba(0,0,0,0); border-bottom: 5px solid rgba(0,0,0,0);
103 | }
104 | .ajs-playing .ajs-play-control span {
105 |   width: 3px; height: 10px; margin: 8px auto 0;
106 |   /* Drawing the pause bars with borders */
107 |   border-top: 0px; border-left: 3px solid #fff; border-bottom: 0px; border-right: 3px solid #fff;
108 | }
109 | 
110 | /* Progress
111 | -------------------------------------------------------------------------------- */
112 | .ajs-progress-holder { /* Box containing play and load progresses */
113 |   position: relative; padding: 0; overflow:hidden; cursor: pointer !important;
114 |   height: 9px; border: 1px solid #777;
115 |   margin: 7px 1px 0 5px; /* Placement within the progress control item */
116 |   -webkit-border-radius: 5px; border-radius: 5px;
117 | }
118 | .ajs-progress-holder div { /* Progress Bars */
119 |   position: absolute; display: block; width: 0; height: 9px; margin: 0; padding: 0;
120 |   -webkit-border-radius: 5px; border-radius: 5px;
121 | }
122 | .ajs-play-progress {
123 |   /* CSS Gradient */
124 |   background: #fff;
125 |   background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#777));
126 |   background: -moz-linear-gradient(top,  #fff,  #777);
127 | }
128 | .ajs-load-progress {
129 |   opacity: 0.8;
130 |   /* CSS Gradient */
131 |   background-color: #555;
132 |   background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#aaa));
133 |   background: -moz-linear-gradient(top,  #555,  #aaa);
134 | }
135 | 
136 | /* Time Display
137 | -------------------------------------------------------------------------------- */
138 | .ajs-controls .ajs-time-control { font-size: 10px; line-height: 1; font-weight: normal; font-family: Helvetica, Arial, sans-serif; }
139 | .ajs-controls .ajs-time-control span { line-height: 25px; /* Centering vertically */ }
140 | 
141 | /* Volume
142 | -------------------------------------------------------------------------------- */
143 | .ajs-volume-control { cursor: pointer !important; }
144 | .ajs-volume-control div { display: block; margin: 0 5px 0 5px; padding: 4px 0 0 0; }
145 | /* Drawing the volume icon using 6 span elements */
146 | .ajs-volume-control div span { /* Individual volume bars */
147 |   float: left; padding: 0;
148 |   margin: 0 2px 0 0; /* Space between */
149 |   width: 5px; height: 0px; /* Total height is height + bottom border */
150 |   border-bottom: 18px solid #555; /* Default (off) color and height of visible portion */
151 | }
152 | .ajs-volume-control div span.ajs-volume-level-on { border-color: #fff; /* Volume on bar color */ }
153 | /* Creating differnt bar heights through height (transparent) and bottom border (visible). */
154 | .ajs-volume-control div span:nth-child(1) { border-bottom-width: 2px; height: 16px; }
155 | .ajs-volume-control div span:nth-child(2) { border-bottom-width: 4px; height: 14px; }
156 | .ajs-volume-control div span:nth-child(3) { border-bottom-width: 7px; height: 11px; }
157 | .ajs-volume-control div span:nth-child(4) { border-bottom-width: 10px; height: 8px; }
158 | .ajs-volume-control div span:nth-child(5) { border-bottom-width: 14px; height: 4px; }
159 | .ajs-volume-control div span:nth-child(6) { margin-right: 0; }
160 | 
161 | /* Download Links - Used for browsers that don't support any audio.
162 | ---------------------------------------------------------*/
163 | .ajs-no-audio { font-size: small; line-height: 1.5; }
164 | 
165 | /* Big Play Button (at start)
166 | ---------------------------------------------------------*/
167 | div.ajs-big-play-button {
168 |   display: none; /* Start hidden */ z-index: 2;
169 |   position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; margin: -43px 0 0 -43px; text-align: center; vertical-align: center; cursor: pointer !important;
170 |   border: 3px solid #fff; opacity: 0.9;
171 |   -webkit-border-radius: 20px; border-radius: 20px;
172 | 
173 |   /* CSS Background Gradients */
174 |   background-color: #0B151A;
175 |   background: #1F3744 -webkit-gradient(linear, left top, left bottom, from(#0B151A), to(#1F3744)) left 40px;
176 |   background: #1F3744 -moz-linear-gradient(top,  #0B151A,  #1F3744) left 40px;
177 | 
178 |   /* CSS Shadows */
179 |   -webkit-box-shadow: 4px 4px 8px #000; 
180 |           box-shadow: 4px 4px 8px #000;
181 | }
182 | div.ajs-big-play-button:hover {
183 |   -webkit-box-shadow: 0px 0px 80px #fff; 
184 |           box-shadow: 0px 0px 80px #fff;
185 | }
186 | 
187 | div.ajs-big-play-button span {
188 |   display: block; font-size: 0; line-height: 0;
189 |   width: 0; height: 0; margin: 20px 0 0 23px;
190 |   /* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */
191 |   border-left: 40px solid #fff; /* Width & Color of play icon */
192 |   /* Height of play icon is total top & bottom border widths. Color is transparent. */
193 |   border-top: 20px solid rgba(0,0,0,0); border-bottom: 20px solid rgba(0,0,0,0);
194 | }
195 | 
196 | /* Spinner Styles
197 | ---------------------------------------------------------*/
198 | /* CSS Spinners by Kilian Valkhof - http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/ */
199 | .ajs-spinner { display: none; position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; z-index: 1; margin: -50px 0 0 -50px;
200 |   /* Scaling makes the circles look smoother. */
201 |   -webkit-transform:scale(0.5); -moz-transform:scale(0.5); transform: scale(0.5);
202 | }
203 | /* Spinner circles */
204 | .ajs-spinner div { position:absolute; left: 40px; top: 40px; width: 20px; height: 20px; background: #fff;
205 |   -webkit-border-radius: 20px; border-radius: 20px;
206 |   border: 1px solid #ccc; /* Added border so can be visible on white backgrounds */
207 | }
208 | /* Each circle */
209 | .ajs-spinner div:nth-child(1) { opacity: 0.12; -webkit-transform: rotate(000deg) translate(0, -40px) scale(0.1); -moz-transform: rotate(000deg) translate(0, -40px) scale(0.1); transform: rotate(000deg) translate(0, -40px) scale(0.1); }
210 | .ajs-spinner div:nth-child(2) { opacity: 0.25; -webkit-transform: rotate(045deg) translate(0, -40px) scale(0.2); -moz-transform: rotate(045deg) translate(0, -40px) scale(0.2); transform: rotate(045deg) translate(0, -40px) scale(0.2); }
211 | .ajs-spinner div:nth-child(3) { opacity: 0.37; -webkit-transform: rotate(090deg) translate(0, -40px) scale(0.4); -moz-transform: rotate(090deg) translate(0, -40px) scale(0.4); transform: rotate(090deg) translate(0, -40px) scale(0.4); }
212 | .ajs-spinner div:nth-child(4) { opacity: 0.50; -webkit-transform: rotate(135deg) translate(0, -40px) scale(0.6); -moz-transform: rotate(135deg) translate(0, -40px) scale(0.6); transform: rotate(135deg) translate(0, -40px) scale(0.6); }
213 | .ajs-spinner div:nth-child(5) { opacity: 0.62; -webkit-transform: rotate(180deg) translate(0, -40px) scale(0.8); -moz-transform: rotate(180deg) translate(0, -40px) scale(0.8); transform: rotate(180deg) translate(0, -40px) scale(0.8); }
214 | .ajs-spinner div:nth-child(6) { opacity: 0.75; -webkit-transform: rotate(225deg) translate(0, -40px) scale(1.0); -moz-transform: rotate(225deg) translate(0, -40px) scale(1.0); transform: rotate(225deg) translate(0, -40px) scale(1.0); }
215 | .ajs-spinner div:nth-child(7) { opacity: 0.87; -webkit-transform: rotate(270deg) translate(0, -40px) scale(1.1); -moz-transform: rotate(270deg) translate(0, -40px) scale(1.1); transform: rotate(270deg) translate(0, -40px) scale(1.1); }
216 | .ajs-spinner div:nth-child(8) { opacity: 1.00; -webkit-transform: rotate(315deg) translate(0, -40px) scale(1.3); -moz-transform: rotate(315deg) translate(0, -40px) scale(1.3); transform: rotate(315deg) translate(0, -40px) scale(1.3); }


--------------------------------------------------------------------------------
/audio.js:
--------------------------------------------------------------------------------
   1 | /*
   2 | AudioJS - HTML5 Audio Player
   3 | v2.0.2
   4 | 
   5 | This file is part of VideoJS. Copyright 2010 Zencoder, Inc.
   6 | -Modified for html5 audio tag by dz0ny
   7 | -Updated to newer VideoJS version (2.0.2) by dodo
   8 | 
   9 | Based on VideoJS 6824c1f1d8bcc3f5b45c
  10 | 
  11 | AudioJS is free software: you can redistribute it and/or modify
  12 | it under the terms of the GNU Lesser General Public License as published by
  13 | the Free Software Foundation, either version 3 of the License, or
  14 | (at your option) any later version.
  15 | 
  16 | AudioJS is distributed in the hope that it will be useful,
  17 | but WITHOUT ANY WARRANTY; without even the implied warranty of
  18 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  19 | GNU Lesser General Public License for more details.
  20 | 
  21 | You should have received a copy of the GNU Lesser General Public License
  22 | along with AudioJS.  If not, see <http://www.gnu.org/licenses/>.
  23 | */
  24 | 
  25 | // Self-executing function to prevent global vars and help with minification
  26 | (function(window, undefined){
  27 |   var document = window.document;
  28 | 
  29 | // Using jresig's Class implementation http://ejohn.org/blog/simple-javascript-inheritance/
  30 | (function(){var initializing=false, fnTest=/xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/; this.JRClass = function(){}; JRClass.extend = function(prop) { var _super = this.prototype; initializing = true; var prototype = new this(); initializing = false; for (var name in prop) { prototype[name] = typeof prop[name] == "function" && typeof _super[name] == "function" && fnTest.test(prop[name]) ? (function(name, fn){ return function() { var tmp = this._super; this._super = _super[name]; var ret = fn.apply(this, arguments); this._super = tmp; return ret; }; })(name, prop[name]) : prop[name]; } function JRClass() { if ( !initializing && this.init ) this.init.apply(this, arguments); } JRClass.prototype = prototype; JRClass.constructor = JRClass; JRClass.extend = arguments.callee; return JRClass;};})();
  31 | 
  32 | // Audio JS Player Class
  33 | var AudioJS = JRClass.extend({
  34 | 
  35 |   // Initialize the player for the supplied audio tag element
  36 |   // element: audio tag
  37 |   init: function(element, setOptions){
  38 | 
  39 |     // Allow an ID string or an element
  40 |     if (typeof element == 'string') {
  41 |       this.audio = document.getElementById(element);
  42 |     } else {
  43 |       this.audio = element;
  44 |     }
  45 |     // Store reference to player on the audio element.
  46 |     // So you can acess the player later: document.getElementById("audio_id").player.play();
  47 |     this.audio.player = this;
  48 |     this.values = {}; // Cache audio values.
  49 |     this.elements = {}; // Store refs to controls elements.
  50 | 
  51 |     // Default Options
  52 |     this.options = {
  53 |       autoplay: false,
  54 |       preload: true,
  55 |       useBuiltInControls: false, // Use the browser's controls (iPhone)
  56 |       controlsAtStart: true, // Make controls visible when page loads
  57 |       controlsHiding: false, // Hide controls when not over the audio
  58 |       defaultVolume: 0.85, // Will be overridden by localStorage volume if available
  59 |       volumeBars: 6,
  60 |       playerFallbackOrder: ["html5", "links"] // Players and order to use them
  61 |     };
  62 |     // Override default options with global options
  63 |     if (typeof AudioJS.options == "object") { AudioJS.merge(this.options, AudioJS.options); }
  64 |     // Override default & global options with options specific to this player
  65 |     if (typeof setOptions == "object") { AudioJS.merge(this.options, setOptions); }
  66 |     // Override preload & autoplay with audio attributes
  67 |     if (this.getPreloadAttribute() !== undefined) { this.options.preload = this.getPreloadAttribute(); }
  68 |     if (this.getAutoplayAttribute() !== undefined) { this.options.autoplay = this.getAutoplayAttribute(); }
  69 | 
  70 |     // Store reference to embed code pieces
  71 |     this.box = this.audio.parentNode;
  72 |     this.linksFallback = this.getLinksFallback();
  73 |     this.hideLinksFallback(); // Will be shown again if "links" player is used
  74 | 
  75 |     // Loop through the player names list in options, "html5" etc.
  76 |     // For each player name, initialize the player with that name under AudioJS.players
  77 |     // If the player successfully initializes, we're done
  78 |     // If not, try the next player in the list
  79 |     this.each(this.options.playerFallbackOrder, function(playerType){
  80 |       if (this[playerType+"Supported"]()) { // Check if player type is supported
  81 |         this[playerType+"Init"](); // Initialize player type
  82 |         return true; // Stop looping though players
  83 |       }
  84 |     });
  85 | 
  86 |     // Start Global Listeners - API doesn't exist before now
  87 |     this.activateElement(this, "player");
  88 |     this.activateElement(this.box, "box");
  89 |   },
  90 |   /* Behaviors
  91 |   ================ */
  92 |   behaviors: {},
  93 |   newBehavior: function(name, activate, functions){
  94 |     this.behaviors[name] = activate;
  95 |     this.extend(functions);
  96 |   },
  97 |   activateElement: function(element, behavior){
  98 |     // Allow passing and ID string
  99 |     if (typeof element == "string") { element = document.getElementById(element); }
 100 |     this.behaviors[behavior].call(this, element);
 101 |   },
 102 |   /* Errors/Warnings
 103 |   ================ */
 104 |   errors: [], // Array to track errors
 105 |   warnings: [],
 106 |   warning: function(warning){
 107 |     this.warnings.push(warning);
 108 |     this.log(warning);
 109 |   },
 110 |   /* History of errors/events (not quite there yet)
 111 |   ================ */
 112 |   history: [],
 113 |   log: function(event){
 114 |     if (!event) { return; }
 115 |     if (typeof event == "string") { event = { type: event }; }
 116 |     if (event.type) { this.history.push(event.type); }
 117 |     if (this.history.length >= 50) { this.history.shift(); }
 118 |     try { console.log(event.type); } catch(e) { try { opera.postError(event.type); } catch(e){} }
 119 |   },
 120 |   /* Local Storage
 121 |   ================ */
 122 |   setLocalStorage: function(key, value){
 123 |     if (!localStorage) { return; }
 124 |     try {
 125 |       localStorage[key] = value;
 126 |     } catch(e) {
 127 |       if (e.code == 22 || e.code == 1014) { // Webkit == 22 / Firefox == 1014
 128 |         this.warning(AudioJS.warnings.localStorageFull);
 129 |       }
 130 |     }
 131 |   },
 132 |   /* Helpers
 133 |   ================ */
 134 |   getPreloadAttribute: function(){
 135 |     if (typeof this.audio.hasAttribute == "function" && this.audio.hasAttribute("preload")) {
 136 |       var preload = this.audio.getAttribute("preload");
 137 |       // Only included the attribute, thinking it was boolean
 138 |       if (preload === "" || preload === "true") { return "auto"; }
 139 |       if (preload === "false") { return "none"; }
 140 |       return preload;
 141 |     }
 142 |   },
 143 |   getAutoplayAttribute: function(){
 144 |     if (typeof this.audio.hasAttribute == "function" && this.audio.hasAttribute("autoplay")) {
 145 |       var autoplay = this.audio.getAttribute("autoplay");
 146 |       if (autoplay === "false") { return false; }
 147 |       return true;
 148 |     }
 149 |   },
 150 |   // Calculates amoutn of buffer is full
 151 |   bufferedPercent: function(){ return (this.duration()) ? this.buffered()[1] / this.duration() : 0; },
 152 |   // Each that maintains player as context
 153 |   // Break if true is returned
 154 |   each: function(arr, fn){
 155 |     if (!arr || arr.length === 0) { return; }
 156 |     for (var i=0,j=arr.length; i<j; i++) {
 157 |       if (fn.call(this, arr[i], i)) { break; }
 158 |     }
 159 |   },
 160 |   extend: function(obj){
 161 |     for (var attrname in obj) {
 162 |       if (obj.hasOwnProperty(attrname)) { this[attrname]=obj[attrname]; }
 163 |     }
 164 |   }
 165 | });
 166 | AudioJS.player = AudioJS.prototype;
 167 | 
 168 | ////////////////////////////////////////////////////////////////////////////////
 169 | // Player Types
 170 | ////////////////////////////////////////////////////////////////////////////////
 171 | 
 172 | /* Download Links Fallback (Player Type)
 173 | ================ */
 174 | AudioJS.player.extend({
 175 |   linksSupported: function(){ return true; },
 176 |   linksInit: function(){
 177 |     this.showLinksFallback();
 178 |     this.element = this.audio;
 179 |   },
 180 |   // Get the download links block element
 181 |   getLinksFallback: function(){ return this.box.getElementsByTagName("P")[0]; },
 182 |   // Hide no-audio download paragraph
 183 |   hideLinksFallback: function(){
 184 |     if (this.linksFallback) { this.linksFallback.style.display = "none"; }
 185 |   },
 186 |   // Hide no-audio download paragraph
 187 |   showLinksFallback: function(){
 188 |     if (this.linksFallback) { this.linksFallback.style.display = "block"; }
 189 |   }
 190 | });
 191 | 
 192 | ////////////////////////////////////////////////////////////////////////////////
 193 | // Class Methods
 194 | // Functions that don't apply to individual audios.
 195 | ////////////////////////////////////////////////////////////////////////////////
 196 | 
 197 | // Combine Objects - Use "safe" to protect from overwriting existing items
 198 | AudioJS.merge = function(obj1, obj2, safe){
 199 |   for (var attrname in obj2){
 200 |     if (obj2.hasOwnProperty(attrname) && (!safe || !obj1.hasOwnProperty(attrname))) { obj1[attrname]=obj2[attrname]; }
 201 |   }
 202 |   return obj1;
 203 | };
 204 | AudioJS.extend = function(obj){ this.merge(this, obj, true); };
 205 | 
 206 | AudioJS.extend({
 207 |   // Add AudioJS to all audio tags with the audio-js class when the DOM is ready
 208 |   setupAllWhenReady: function(options){
 209 |     // Options is stored globally, and added ot any new player on init
 210 |     AudioJS.options = options;
 211 |     AudioJS.DOMReady(AudioJS.setup);
 212 |   },
 213 | 
 214 |   // Run the supplied function when the DOM is ready
 215 |   DOMReady: function(fn){
 216 |     AudioJS.addToDOMReady(fn);
 217 |   },
 218 | 
 219 |   // Set up a specific audio or array of audio elements
 220 |   // "audio" can be:
 221 |   //    false, undefined, or "All": set up all audios with the audio-js class
 222 |   //    A audio tag ID or audio tag element: set up one audio and return one player
 223 |   //    An array of audio tag elements/IDs: set up each and return an array of players
 224 |   setup: function(audios, options){
 225 |     var returnSingular = false,
 226 |     playerList = [],
 227 |     audioElement;
 228 | 
 229 |     // If audios is undefined or "All", set up all audios with the audio-js class
 230 |     if (!audios || audios == "All") {
 231 |       audios = AudioJS.getAudioJSTags();
 232 |     // If audios is not an array, add to an array
 233 |     } else if (typeof audios != 'object' || audios.nodeType == 1) {
 234 |       audios = [audios];
 235 |       returnSingular = true;
 236 |     }
 237 | 
 238 |     // Loop through audios and create players for them
 239 |     for (var i=0; i<audios.length; i++) {
 240 |       if (typeof audios[i] == 'string') {
 241 |         audioElement = document.getElementById(audios[i]);
 242 |       } else { // assume DOM object
 243 |         audioElement = audios[i];
 244 |       }
 245 |       playerList.push(new AudioJS(audioElement, options));
 246 |     }
 247 | 
 248 |     // Return one or all depending on what was passed in
 249 |     return (returnSingular) ? playerList[0] : playerList;
 250 |   },
 251 | 
 252 |   // Find audio tags with the audio-js class
 253 |   getAudioJSTags: function() {
 254 |     var audioTags = document.getElementsByTagName("audio"),
 255 |     audioJSTags = [], audioTag;
 256 | 
 257 |     for (var i=0,j=audioTags.length; i<j; i++) {
 258 |       audioTag = audioTags[i];
 259 |       if (audioTag.className.indexOf("audio-js") != -1) {
 260 |         audioJSTags.push(audioTag);
 261 |       }
 262 |     }
 263 |     return audioJSTags;
 264 |   },
 265 | 
 266 |   // Check if the browser supports audio.
 267 |   browserSupportsAudio: function() {
 268 |     if (typeof AudioJS.audioSupport != "undefined") { return AudioJS.audioSupport; }
 269 |     AudioJS.audioSupport = !!document.createElement('audio').canPlayType;
 270 |     return AudioJS.audioSupport;
 271 |   },
 272 | 
 273 | 
 274 |   // Browser & Device Checks
 275 |   isIE: function(){ return !+"\v1"; },
 276 |   isIPad: function(){ return navigator.userAgent.match(/iPad/i) !== null; },
 277 |   isIPhone: function(){ return navigator.userAgent.match(/iPhone/i) !== null; },
 278 |   isIOS: function(){ return AudioJS.isIPhone() || AudioJS.isIPad(); },
 279 |   iOSVersion: function() {
 280 |     var match = navigator.userAgent.match(/OS (\d+)_/i);
 281 |     if (match && match[1]) { return match[1]; }
 282 |   },
 283 |   isAndroid: function(){ return navigator.userAgent.match(/Android/i) !== null; },
 284 |   androidVersion: function() {
 285 |     var match = navigator.userAgent.match(/Android (\d+)\./i);
 286 |     if (match && match[1]) { return match[1]; }
 287 |   },
 288 | 
 289 |   warnings: {
 290 |     // Safari errors if you call functions on a audio that hasn't loaded yet
 291 |     audioNotReady: "Audio is not ready yet (try playing the audio first).",
 292 |     // Getting a QUOTA_EXCEEDED_ERR when setting local storage occasionally
 293 |     localStorageFull: "Local Storage is Full"
 294 |   }
 295 | });
 296 | 
 297 | // Shim to make audio tag valid in IE
 298 | if(AudioJS.isIE()) { document.createElement("audio"); }
 299 | 
 300 | // Expose to global
 301 | window.AudioJS = window._A_ = AudioJS;
 302 | 
 303 | /* HTML5 Player Type
 304 | ================ */
 305 | AudioJS.player.extend({
 306 |   html5Supported: function(){
 307 |     if (AudioJS.browserSupportsAudio()) {
 308 |       return true;
 309 |     } else {
 310 |       return false;
 311 |     }
 312 |   },
 313 |   html5Init: function(){
 314 |     this.element = this.audio;
 315 | 
 316 |     this.fixPreloading(); // Support old browsers that used autobuffer
 317 |     this.supportProgressEvents(); // Support browsers that don't use 'buffered'
 318 | 
 319 |     // Set to stored volume OR 85%
 320 |     this.volume((localStorage && localStorage.volume) || this.options.defaultVolume);
 321 | 
 322 |     // Update interface for device needs
 323 |     if (AudioJS.isIOS()) {
 324 |       _A_.addClass(this.box, "ajs-ios");
 325 |       this.options.useBuiltInControls = true;
 326 |       this.iOSInterface();
 327 |     } else if (AudioJS.isAndroid()) {
 328 |       this.options.useBuiltInControls = true;
 329 |       this.androidInterface();
 330 |     }
 331 | 
 332 |     // Add AudioJS Controls
 333 |     if (!this.options.useBuiltInControls) {
 334 |       this.audio.controls = false;
 335 | 
 336 |       // Make a click on the audio act as a play button
 337 |       this.activateElement(this.audio, "playToggle");
 338 | 
 339 |       // Build Interface
 340 |       this.buildAndActivateSpinner();
 341 |       this.buildAndActivateControlBar();
 342 |       this.loadInterface(); // Show everything once styles are loaded
 343 |     }
 344 |   },
 345 |   /* Source Management
 346 |   ================ */
 347 |   canPlaySource: function(){
 348 |     // Cache Result
 349 |     if (this.canPlaySourceResult) { return this.canPlaySourceResult; }
 350 |     // Loop through sources and check if any can play
 351 |     var children = this.audio.children;
 352 |     for (var i=0,j=children.length; i<j; i++) {
 353 |       if (children[i].tagName.toUpperCase() == "SOURCE") {
 354 |         var canPlay = this.audio.canPlayType(children[i].type) || this.canPlayExt(children[i].src);
 355 |         if (canPlay == "probably" || canPlay == "maybe") {
 356 |           this.firstPlayableSource = children[i];
 357 |           this.canPlaySourceResult = true;
 358 |           return true;
 359 |         }
 360 |       }
 361 |     }
 362 |     this.canPlaySourceResult = false;
 363 |     return false;
 364 |   },
 365 |   // Check if the extention is compatible, for when type won't work
 366 |   canPlayExt: function(src){
 367 |     if (!src) { return ""; }
 368 |     var match = src.match(/\.([^\.]+)$/);
 369 |     if (match && match[1]) {
 370 |       var ext = match[1].toLowerCase();
 371 |       // Android canPlayType doesn't work
 372 |       if (AudioJS.isAndroid()) {
 373 |         if (ext == "mp4" || ext == "m4v") { return "maybe"; }
 374 |       // Allow Apple HTTP Streaming for iOS
 375 |       } else if (AudioJS.isIOS()) {
 376 |         if (ext == "m3u8") { return "maybe"; }
 377 |       }
 378 |     }
 379 |     return "";
 380 |   },
 381 |   // Force the audio source - Helps fix loading bugs in a handful of devices
 382 |   // And iPad/iPhone javascript include location bug. And Android type attribute bug
 383 |   forceTheSource: function(){
 384 |     this.audio.src = this.firstPlayableSource.src; // From canPlaySource()
 385 |     this.audio.load();
 386 |   },
 387 |   /* Device Fixes
 388 |   ================ */
 389 |   // Support older browsers that used "autobuffer"
 390 |   fixPreloading: function(){
 391 |     if (typeof this.audio.hasAttribute == "function" && this.audio.hasAttribute("preload") && this.audio.preload != "none") {
 392 |       this.audio.autobuffer = true; // Was a boolean
 393 |     } else {
 394 |       this.audio.autobuffer = false;
 395 |       this.audio.preload = "none";
 396 |     }
 397 |   },
 398 | 
 399 |   // Listen for audio Load Progress (currently does not if html file is local)
 400 |   // Buffered does't work in all browsers, so watching progress as well
 401 |   supportProgressEvents: function(e){
 402 |     _A_.addListener(this.audio, 'progress', this.playerOnAudioProgress.context(this));
 403 |   },
 404 |   playerOnAudioProgress: function(event){
 405 |     this.setBufferedFromProgress(event);
 406 |   },
 407 |   setBufferedFromProgress: function(event){ // HTML5 Only
 408 |     if(event.total > 0) {
 409 |       var newBufferEnd = (event.loaded / event.total) * this.duration();
 410 |       if (newBufferEnd > this.values.bufferEnd) { this.values.bufferEnd = newBufferEnd; }
 411 |     }
 412 |   },
 413 | 
 414 |   iOSInterface: function(){
 415 |     if(AudioJS.iOSVersion() < 4) { this.forceTheSource(); } // Fix loading issues
 416 |     if(AudioJS.isIPad()) {
 417 |       this.buildAndActivateSpinner(); // Spinner still works well on iPad, since iPad doesn't have one
 418 |     }
 419 |   },
 420 | 
 421 |   // Fix android specific quirks
 422 |   // Use built-in controls, but add the big play button, since android doesn't have one.
 423 |   androidInterface: function(){
 424 |     this.forceTheSource(); // Fix loading issues
 425 |     _A_.addListener(this.audio, "click", function(){ this.play(); }); // Required to play
 426 |   },
 427 |   /* Wait for styles (TODO: move to _A_)
 428 |   ================ */
 429 |   loadInterface: function(){
 430 |     if (this.options.controlsAtStart) { this.showControlBars(); }
 431 |     this.positionControlBars();
 432 |   },
 433 |   /* Control Bar
 434 |   ================
 435 | 
 436 |   Builds this markup:
 437 | 
 438 |       <div class="ajs-controls">
 439 |         <div class="ajs-play-control">
 440 |           <span></span>
 441 |         </div>
 442 |         <div class="ajs-progress-control">
 443 |           <div class="ajs-progress-holder">
 444 |             <div class="ajs-load-progress"></div>
 445 |             <div class="ajs-play-progress"></div>
 446 |           </div>
 447 |         </div>
 448 |         <div class="ajs-time-control">
 449 |           <span class="ajs-current-time-display">00:00</span><span> / </span><span class="ajs-duration-display">00:00</span>
 450 |         </div>
 451 |         <div class="ajs-volume-control">
 452 |           <div>
 453 |         <span></span><span></span><span></span><span></span><span></span>
 454 |           </div>
 455 |         </div>
 456 |       </div>
 457 | 
 458 |     */
 459 |   buildAndActivateControlBar: function(){
 460 |     // Create a div to hold the different controls
 461 |     this.controls = _A_.createElement("div", { className: "ajs-controls" });
 462 |     // Add the controls to the audio's container
 463 |     this.box.appendChild(this.controls);
 464 |     this.activateElement(this.controls, "controlBar");
 465 |     this.activateElement(this.controls, "mouseOverAudioReporter");
 466 | 
 467 |     // Build the play control
 468 |     this.playControl = _A_.createElement("div", { className: "ajs-play-control", innerHTML: "<span></span>" });
 469 |     this.controls.appendChild(this.playControl);
 470 |     this.activateElement(this.playControl, "playToggle");
 471 | 
 472 |     // Build the progress control
 473 |     this.progressControl = _A_.createElement("div", { className: "ajs-progress-control" });
 474 |     this.controls.appendChild(this.progressControl);
 475 | 
 476 |     // Create a holder for the progress bars
 477 |     this.progressHolder = _A_.createElement("div", { className: "ajs-progress-holder" });
 478 |     this.progressControl.appendChild(this.progressHolder);
 479 |     this.activateElement(this.progressHolder, "currentTimeScrubber");
 480 | 
 481 |     // Create the loading progress display
 482 |     this.loadProgressBar = _A_.createElement("div", { className: "ajs-load-progress" });
 483 |     this.progressHolder.appendChild(this.loadProgressBar);
 484 |     this.activateElement(this.loadProgressBar, "loadProgressBar");
 485 | 
 486 |     // Create the playing progress display
 487 |     this.playProgressBar = _A_.createElement("div", { className: "ajs-play-progress" });
 488 |     this.progressHolder.appendChild(this.playProgressBar);
 489 |     this.activateElement(this.playProgressBar, "playProgressBar");
 490 | 
 491 |     // Create the progress time display (00:00 / 00:00)
 492 |     this.timeControl = _A_.createElement("div", { className: "ajs-time-control" });
 493 |     this.controls.appendChild(this.timeControl);
 494 | 
 495 |     // Create the current play time display
 496 |     this.currentTimeDisplay = _A_.createElement("span", { className: "ajs-current-time-display", innerHTML: "00:00" });
 497 |     this.timeControl.appendChild(this.currentTimeDisplay);
 498 |     this.activateElement(this.currentTimeDisplay, "currentTimeDisplay");
 499 | 
 500 |     // Add time separator
 501 |     this.timeSeparator = _A_.createElement("span", { innerHTML: " / " });
 502 |     this.timeControl.appendChild(this.timeSeparator);
 503 | 
 504 |     // Create the total duration display
 505 |     this.durationDisplay = _A_.createElement("span", { className: "ajs-duration-display", innerHTML: "00:00" });
 506 |     this.timeControl.appendChild(this.durationDisplay);
 507 |     this.activateElement(this.durationDisplay, "durationDisplay");
 508 | 
 509 |     // Create the volume control
 510 |     var bars = [];
 511 |     while(bars.length < this.options.volumeBars){
 512 |       bars.push('<span></span>');
 513 |     }
 514 | 
 515 |     this.volumeControl = _A_.createElement("div", {
 516 |       className: "ajs-volume-control",
 517 |       innerHTML: "<div>" + bars.join('') + "</div>"
 518 |     });
 519 |     this.controls.appendChild(this.volumeControl);
 520 |     this.activateElement(this.volumeControl, "volumeScrubber");
 521 | 
 522 |     // Create the description display
 523 |     this.descriptionMeta = _A_.createElement("div", {
 524 |       className: "description",
 525 |       innerHTML: this.audio.getAttribute('data-description')
 526 |     });
 527 |     this.controls.appendChild(this.descriptionMeta);
 528 | 
 529 |     this.volumeDisplay = this.volumeControl.children[0];
 530 |     this.activateElement(this.volumeDisplay, "volumeDisplay");
 531 |   },
 532 |   /* Spinner (Loading)
 533 |   ================ */
 534 |   buildAndActivateSpinner: function(){
 535 |     this.spinner = _A_.createElement("div", {className: "ajs-spinner"});
 536 |     this.box.appendChild(this.spinner);
 537 |     this.activateElement(this.spinner, "spinner");
 538 |   },
 539 | 
 540 |   /* Player API - Translate functionality from player to audio
 541 |   ================ */
 542 |   addAudioListener: function(type, fn){ _A_.addListener(this.audio, type, fn.rEvtContext(this)); },
 543 | 
 544 |   play: function(){
 545 |     // Pause all other players
 546 |     this.each(_A_.getAudioJSTags(), function(players){
 547 |       players.pause();
 548 |     });
 549 | 
 550 |     // Play
 551 |     this.audio.play();
 552 |     return this;
 553 |   },
 554 |   onPlay: function(fn){ this.addAudioListener("play", fn); return this; },
 555 | 
 556 |   pause: function(){
 557 |     this.audio.pause();
 558 |     return this;
 559 |   },
 560 |   onPause: function(fn){ this.addAudioListener("pause", fn); return this; },
 561 |   paused: function() { return this.audio.paused; },
 562 | 
 563 |   currentTime: function(seconds){
 564 |     if (seconds !== undefined) {
 565 |       try { this.audio.currentTime = seconds; }
 566 |       catch(e) { this.warning(AudioJS.warnings.audioNotReady); }
 567 |       this.values.currentTime = seconds;
 568 |       return this;
 569 |     }
 570 |     return this.audio.currentTime;
 571 |   },
 572 |   onCurrentTimeUpdate: function(fn){
 573 |     this.currentTimeListeners.push(fn);
 574 |   },
 575 | 
 576 |   duration: function(){
 577 |     return this.audio.duration;
 578 |   },
 579 | 
 580 |   buffered: function(){
 581 |     // Storing values allows them be overridden by setBufferedFromProgress
 582 |     if (this.values.bufferStart === undefined) {
 583 |       this.values.bufferStart = 0;
 584 |       this.values.bufferEnd = 0;
 585 |     }
 586 |     if (this.audio.buffered && this.audio.buffered.length > 0) {
 587 |       var newEnd = this.audio.buffered.end(0);
 588 |       if (newEnd > this.values.bufferEnd) { this.values.bufferEnd = newEnd; }
 589 |     }
 590 |     return [this.values.bufferStart, this.values.bufferEnd];
 591 |   },
 592 | 
 593 |   volume: function(percentAsDecimal){
 594 |     if (percentAsDecimal !== undefined) {
 595 |       // Force value to between 0 and 1
 596 |       this.values.volume = Math.max(0, Math.min(1, parseFloat(percentAsDecimal)));
 597 |       this.audio.volume = this.values.volume;
 598 |       this.setLocalStorage("volume", this.values.volume);
 599 |       return this;
 600 |     }
 601 |     if (this.values.volume) { return this.values.volume; }
 602 |     return this.audio.volume;
 603 |   },
 604 |   onVolumeChange: function(fn){ _A_.addListener(this.audio, 'volumechange', fn.rEvtContext(this)); },
 605 | 
 606 |   width: function(width){
 607 |     if (width !== undefined) {
 608 |       this.audio.width = width; // Not using style so it can be overridden
 609 |       this.box.style.width = width+"px";
 610 |       this.triggerResizeListeners();
 611 |       return this;
 612 |     }
 613 |     return this.audio.offsetWidth || this.audio.style.width || 400;
 614 |   },
 615 |   height: function(height){
 616 |     if (height !== undefined) {
 617 |       this.audio.height = height;
 618 |       this.box.style.height = height+"px";
 619 |       this.triggerResizeListeners();
 620 |       return this;
 621 |     }
 622 |     return this.audio.offsetHeight;
 623 |   },
 624 | 
 625 |   onError: function(fn){ this.addAudioListener("error", fn); return this; },
 626 |   onEnded: function(fn){
 627 |     this.addAudioListener("ended", fn); return this;
 628 |   }
 629 | });
 630 | 
 631 | ////////////////////////////////////////////////////////////////////////////////
 632 | // Element Behaviors
 633 | // Tell elements how to act or react
 634 | ////////////////////////////////////////////////////////////////////////////////
 635 | 
 636 | /* Player Behaviors - How AudioJS reacts to what the audio is doing.
 637 | ================ */
 638 | AudioJS.player.newBehavior("player", function(player){
 639 |     this.onError(this.playerOnAudioError);
 640 |     // Listen for when the audio is played
 641 |     this.onPlay(this.playerOnAudioPlay);
 642 |     this.onPlay(this.trackCurrentTime);
 643 |     // Listen for when the audio is paused
 644 |     this.onPause(this.playerOnAudioPause);
 645 |     this.onPause(this.stopTrackingCurrentTime);
 646 |     // Listen for when the audio ends
 647 |     this.onEnded(this.playerOnAudioEnded);
 648 |     // Set interval for load progress using buffer watching method
 649 |     // this.trackCurrentTime();
 650 |     this.trackBuffered();
 651 |     // Buffer Full
 652 |     this.onBufferedUpdate(this.isBufferFull);
 653 |   },{
 654 |     playerOnAudioError: function(event){
 655 |       this.log(event);
 656 |       this.log(this.audio.error);
 657 |     },
 658 |     playerOnAudioPlay: function(event){ this.hasPlayed = true; },
 659 |     playerOnAudioPause: function(event){},
 660 |     playerOnAudioEnded: function(event){
 661 |       this.currentTime(0);
 662 |       this.pause();
 663 |     },
 664 | 
 665 |     /* Load Tracking -------------------------------------------------------------- */
 666 |     // Buffer watching method for load progress.
 667 |     // Used for browsers that don't support the progress event
 668 |     trackBuffered: function(){
 669 |       this.bufferedInterval = setInterval(this.triggerBufferedListeners.context(this), 500);
 670 |     },
 671 |     stopTrackingBuffered: function(){ clearInterval(this.bufferedInterval); },
 672 |     bufferedListeners: [],
 673 |     onBufferedUpdate: function(fn){
 674 |       this.bufferedListeners.push(fn);
 675 |     },
 676 |     triggerBufferedListeners: function(){
 677 |       this.isBufferFull();
 678 |       this.each(this.bufferedListeners, function(listener){
 679 |         (listener.context(this))();
 680 |       });
 681 |     },
 682 |     isBufferFull: function(){
 683 |       if (this.bufferedPercent() == 1) { this.stopTrackingBuffered(); }
 684 |     },
 685 | 
 686 |     /* Time Tracking -------------------------------------------------------------- */
 687 |     trackCurrentTime: function(){
 688 |       if (this.currentTimeInterval) { clearInterval(this.currentTimeInterval); }
 689 |       this.currentTimeInterval = setInterval(this.triggerCurrentTimeListeners.context(this), 100); // 42 = 24 fps
 690 |       this.trackingCurrentTime = true;
 691 |     },
 692 |     // Turn off play progress tracking (when paused or dragging)
 693 |     stopTrackingCurrentTime: function(){
 694 |       clearInterval(this.currentTimeInterval);
 695 |       this.trackingCurrentTime = false;
 696 |     },
 697 |     currentTimeListeners: [],
 698 |     // onCurrentTimeUpdate is in API section now
 699 |     triggerCurrentTimeListeners: function(late, newTime){ // FF passes milliseconds late as the first argument
 700 |       this.each(this.currentTimeListeners, function(listener){
 701 |         (listener.context(this))(newTime || this.currentTime());
 702 |       });
 703 |     },
 704 | 
 705 |     /* Resize Tracking -------------------------------------------------------------- */
 706 |     resizeListeners: [],
 707 |     onResize: function(fn){
 708 |       this.resizeListeners.push(fn);
 709 |     },
 710 |     // Trigger anywhere the audio/box size is changed.
 711 |     triggerResizeListeners: function(){
 712 |       this.each(this.resizeListeners, function(listener){
 713 |         (listener.context(this))();
 714 |       });
 715 |     }
 716 |   }
 717 | );
 718 | /* Mouse Over Audio Reporter Behaviors - i.e. Controls hiding based on mouse location
 719 | ================ */
 720 | AudioJS.player.newBehavior("mouseOverAudioReporter", function(element){
 721 |     // Listen for the mouse move the audio. Used to reveal the controller.
 722 |     _A_.addListener(element, "mousemove", this.mouseOverAudioReporterOnMouseMove.context(this));
 723 |     // Listen for the mouse moving out of the audio. Used to hide the controller.
 724 |     _A_.addListener(element, "mouseout", this.mouseOverAudioReporterOnMouseOut.context(this));
 725 |   },{
 726 |     mouseOverAudioReporterOnMouseMove: function(){
 727 |       this.showControlBars();
 728 |       clearInterval(this.mouseMoveTimeout);
 729 |       this.mouseMoveTimeout = setTimeout(this.hideControlBars.context(this), 4000);
 730 |     },
 731 |     mouseOverAudioReporterOnMouseOut: function(event){
 732 |       // Prevent flicker by making sure mouse hasn't left the audio
 733 |       var parent = event.relatedTarget;
 734 |       while (parent && parent !== this.box) {
 735 |         parent = parent.parentNode;
 736 |       }
 737 |       if (parent !== this.box) {
 738 |         this.hideControlBars();
 739 |       }
 740 |     }
 741 |   }
 742 | );
 743 | /* Mouse Over Audio Reporter Behaviors - i.e. Controls hiding based on mouse location
 744 | ================ */
 745 | AudioJS.player.newBehavior("box", function(element){
 746 |     _A_.addClass(element, "ajs-paused");
 747 |     this.activateElement(element, "mouseOverAudioReporter");
 748 |     this.onPlay(this.boxOnAudioPlay);
 749 |     this.onPause(this.boxOnAudioPause);
 750 |   },{
 751 |     boxOnAudioPlay: function(){
 752 |       _A_.removeClass(this.box, "ajs-paused");
 753 |       _A_.addClass(this.box, "ajs-playing");
 754 |     },
 755 |     boxOnAudioPause: function(){
 756 |       _A_.removeClass(this.box, "ajs-playing");
 757 |       _A_.addClass(this.box, "ajs-paused");
 758 |     }
 759 |   }
 760 | );
 761 | 
 762 | /* Control Bar Behaviors
 763 | ================ */
 764 | AudioJS.player.newBehavior("controlBar", function(element){
 765 |     if (!this.controlBars) {
 766 |       this.controlBars = [];
 767 |       this.onResize(this.positionControlBars);
 768 |     }
 769 |     this.controlBars.push(element);
 770 |     _A_.addListener(element, "mousemove", this.onControlBarsMouseMove.context(this));
 771 |     _A_.addListener(element, "mouseout", this.onControlBarsMouseOut.context(this));
 772 |   },{
 773 |     showControlBars: function(){
 774 |       if (!this.options.controlsAtStart && !this.hasPlayed) { return; }
 775 |       this.each(this.controlBars, function(bar){
 776 |         bar.style.display = "block";
 777 |       });
 778 |     },
 779 |     // Place controller relative to the audio's position (now just resizing bars)
 780 |     positionControlBars: function(){
 781 |       this.updatePlayProgressBars();
 782 |       this.updateLoadProgressBars();
 783 |     },
 784 |     hideControlBars: function(){
 785 |       if (this.options.controlsHiding && !this.mouseIsOverControls) {
 786 |         this.each(this.controlBars, function(bar){
 787 |           bar.style.display = "none";
 788 |         });
 789 |       }
 790 |     },
 791 |     // Block controls from hiding when mouse is over them.
 792 |     onControlBarsMouseMove: function(){ this.mouseIsOverControls = true; },
 793 |     onControlBarsMouseOut: function(event){
 794 |       this.mouseIsOverControls = false;
 795 |     }
 796 |   }
 797 | );
 798 | /* PlayToggle, PlayButton, PauseButton Behaviors
 799 | ================ */
 800 | // Play Toggle
 801 | AudioJS.player.newBehavior("playToggle", function(element){
 802 |     if (!this.elements.playToggles) {
 803 |       this.elements.playToggles = [];
 804 |       this.onPlay(this.playTogglesOnPlay);
 805 |       this.onPause(this.playTogglesOnPause);
 806 |     }
 807 |     this.elements.playToggles.push(element);
 808 |     _A_.addListener(element, "click", this.onPlayToggleClick.context(this));
 809 |   },{
 810 |     onPlayToggleClick: function(event){
 811 |       if (this.paused()) {
 812 |         this.play();
 813 |       } else {
 814 |         this.pause();
 815 |       }
 816 |     },
 817 |     playTogglesOnPlay: function(event){
 818 |       this.each(this.elements.playToggles, function(toggle){
 819 |         _A_.removeClass(toggle, "ajs-paused");
 820 |         _A_.addClass(toggle, "ajs-playing");
 821 |       });
 822 |     },
 823 |     playTogglesOnPause: function(event){
 824 |       this.each(this.elements.playToggles, function(toggle){
 825 |         _A_.removeClass(toggle, "ajs-playing");
 826 |         _A_.addClass(toggle, "ajs-paused");
 827 |       });
 828 |     }
 829 |   }
 830 | );
 831 | // Play
 832 | AudioJS.player.newBehavior("playButton", function(element){
 833 |     _A_.addListener(element, "click", this.onPlayButtonClick.context(this));
 834 |   },{
 835 |     onPlayButtonClick: function(event){ this.play(); }
 836 |   }
 837 | );
 838 | // Pause
 839 | AudioJS.player.newBehavior("pauseButton", function(element){
 840 |     _A_.addListener(element, "click", this.onPauseButtonClick.context(this));
 841 |   },{
 842 |     onPauseButtonClick: function(event){ this.pause(); }
 843 |   }
 844 | );
 845 | /* Play Progress Bar Behaviors
 846 | ================ */
 847 | AudioJS.player.newBehavior("playProgressBar", function(element){
 848 |     if (!this.playProgressBars) {
 849 |       this.playProgressBars = [];
 850 |       this.onCurrentTimeUpdate(this.updatePlayProgressBars);
 851 |     }
 852 |     this.playProgressBars.push(element);
 853 |   },{
 854 |     // Ajust the play progress bar's width based on the current play time
 855 |     updatePlayProgressBars: function(newTime){
 856 |       var progress = (newTime !== undefined) ? newTime / this.duration() : this.currentTime() / this.duration();
 857 |       if (isNaN(progress)) { progress = 0; }
 858 |       this.each(this.playProgressBars, function(bar){
 859 |         if (bar.style) { bar.style.width = _A_.round(progress * 100, 2) + "%"; }
 860 |       });
 861 |     }
 862 |   }
 863 | );
 864 | /* Load Progress Bar Behaviors
 865 | ================ */
 866 | AudioJS.player.newBehavior("loadProgressBar", function(element){
 867 |     if (!this.loadProgressBars) { this.loadProgressBars = []; }
 868 |     this.loadProgressBars.push(element);
 869 |     this.onBufferedUpdate(this.updateLoadProgressBars);
 870 |   },{
 871 |     updateLoadProgressBars: function(){
 872 |       this.each(this.loadProgressBars, function(bar){
 873 |         if (bar.style) { bar.style.width = _A_.round(this.bufferedPercent() * 100, 2) + "%"; }
 874 |       });
 875 |     }
 876 |   }
 877 | );
 878 | 
 879 | /* Current Time Display Behaviors
 880 | ================ */
 881 | AudioJS.player.newBehavior("currentTimeDisplay", function(element){
 882 |     if (!this.currentTimeDisplays) {
 883 |       this.currentTimeDisplays = [];
 884 |       this.onCurrentTimeUpdate(this.updateCurrentTimeDisplays);
 885 |     }
 886 |     this.currentTimeDisplays.push(element);
 887 |   },{
 888 |     // Update the displayed time (00:00)
 889 |     updateCurrentTimeDisplays: function(newTime){
 890 |       if (!this.currentTimeDisplays) { return; }
 891 |       // Allows for smooth scrubbing, when player can't keep up.
 892 |       var time = (newTime) ? newTime : this.currentTime();
 893 |       this.each(this.currentTimeDisplays, function(dis){
 894 |         dis.innerHTML = _A_.formatTime(time);
 895 |       });
 896 |     }
 897 |   }
 898 | );
 899 | 
 900 | /* Duration Display Behaviors
 901 | ================ */
 902 | AudioJS.player.newBehavior("durationDisplay", function(element){
 903 |     if (!this.durationDisplays) {
 904 |       this.durationDisplays = [];
 905 |       this.onCurrentTimeUpdate(this.updateDurationDisplays);
 906 |     }
 907 |     this.durationDisplays.push(element);
 908 |   },{
 909 |     updateDurationDisplays: function(){
 910 |       if (!this.durationDisplays) { return; }
 911 |       this.each(this.durationDisplays, function(dis){
 912 |         if (this.duration()) { dis.innerHTML = _A_.formatTime(this.duration()); }
 913 |       });
 914 |     }
 915 |   }
 916 | );
 917 | 
 918 | /* Current Time Scrubber Behaviors
 919 | ================ */
 920 | AudioJS.player.newBehavior("currentTimeScrubber", function(element){
 921 |     _A_.addListener(element, "mousedown", this.onCurrentTimeScrubberMouseDown.rEvtContext(this));
 922 |   },{
 923 |     // Adjust the play position when the user drags on the progress bar
 924 |     onCurrentTimeScrubberMouseDown: function(event, scrubber){
 925 |       event.preventDefault();
 926 |       this.currentScrubber = scrubber;
 927 | 
 928 |       this.stopTrackingCurrentTime(); // Allows for smooth scrubbing
 929 | 
 930 |       this.audioWasPlaying = !this.paused();
 931 |       this.pause();
 932 | 
 933 |       _A_.blockTextSelection();
 934 |       this.setCurrentTimeWithScrubber(event);
 935 |       _A_.addListener(document, "mousemove", this.onCurrentTimeScrubberMouseMove.rEvtContext(this));
 936 |       _A_.addListener(document, "mouseup", this.onCurrentTimeScrubberMouseUp.rEvtContext(this));
 937 |     },
 938 |     onCurrentTimeScrubberMouseMove: function(event){ // Removeable
 939 |       this.setCurrentTimeWithScrubber(event);
 940 |     },
 941 |     onCurrentTimeScrubberMouseUp: function(event){ // Removeable
 942 |       _A_.unblockTextSelection();
 943 |       document.removeEventListener("mousemove", this.onCurrentTimeScrubberMouseMove, false);
 944 |       document.removeEventListener("mouseup", this.onCurrentTimeScrubberMouseUp, false);
 945 |       if (this.audioWasPlaying) {
 946 |         this.play();
 947 |         this.trackCurrentTime();
 948 |       }
 949 |     },
 950 |     setCurrentTimeWithScrubber: function(event){
 951 |       var newProgress = _A_.getRelativePosition(event.pageX, this.currentScrubber);
 952 |       var newTime = newProgress * this.duration();
 953 |       this.triggerCurrentTimeListeners(0, newTime); // Allows for smooth scrubbing
 954 |       // Don't let audio end while scrubbing.
 955 |       if (newTime == this.duration()) { newTime = newTime - 0.1; }
 956 |       this.currentTime(newTime);
 957 |     }
 958 |   }
 959 | );
 960 | /* Volume Display Behaviors
 961 | ================ */
 962 | AudioJS.player.newBehavior("volumeDisplay", function(element){
 963 |     if (!this.volumeDisplays) {
 964 |       this.volumeDisplays = [];
 965 |       this.onVolumeChange(this.updateVolumeDisplays);
 966 |     }
 967 |     this.volumeDisplays.push(element);
 968 |     this.updateVolumeDisplay(element); // Set the display to the initial volume
 969 |   },{
 970 |     // Update the volume control display
 971 |     // Unique to these default controls. Uses borders to create the look of bars.
 972 |     updateVolumeDisplays: function(){
 973 |       if (!this.volumeDisplays) { return; }
 974 |       this.each(this.volumeDisplays, function(dis){
 975 |         this.updateVolumeDisplay(dis);
 976 |       });
 977 |     },
 978 |     updateVolumeDisplay: function(display){
 979 |       var volNum = Math.ceil(this.volume() * this.options.volumeBars);
 980 |       this.each(display.children, function(child, num){
 981 |         if (num < volNum) {
 982 |           _A_.addClass(child, "ajs-volume-level-on");
 983 |         } else {
 984 |           _A_.removeClass(child, "ajs-volume-level-on");
 985 |         }
 986 |       });
 987 |     }
 988 |   }
 989 | );
 990 | /* Volume Scrubber Behaviors
 991 | ================ */
 992 | AudioJS.player.newBehavior("volumeScrubber", function(element){
 993 |     _A_.addListener(element, "mousedown", this.onVolumeScrubberMouseDown.rEvtContext(this));
 994 |   },{
 995 |     // Adjust the volume when the user drags on the volume control
 996 |     onVolumeScrubberMouseDown: function(event, scrubber){
 997 |       // event.preventDefault();
 998 |       _A_.blockTextSelection();
 999 |       this.currentScrubber = scrubber;
1000 |       this.setVolumeWithScrubber(event);
1001 |       _A_.addListener(document, "mousemove", this.onVolumeScrubberMouseMove.rEvtContext(this));
1002 |       _A_.addListener(document, "mouseup", this.onVolumeScrubberMouseUp.rEvtContext(this));
1003 |     },
1004 |     onVolumeScrubberMouseMove: function(event){
1005 |       this.setVolumeWithScrubber(event);
1006 |     },
1007 |     onVolumeScrubberMouseUp: function(event){
1008 |       this.setVolumeWithScrubber(event);
1009 |       _A_.unblockTextSelection();
1010 |       document.removeEventListener("mousemove", this.onVolumeScrubberMouseMove, false);
1011 |       document.removeEventListener("mouseup", this.onVolumeScrubberMouseUp, false);
1012 |     },
1013 |     setVolumeWithScrubber: function(event){
1014 |       var newVol = _A_.getRelativePosition(event.pageX, this.currentScrubber);
1015 |       this.volume(newVol);
1016 |     }
1017 |   }
1018 | );
1019 | /* Spinner
1020 | ================ */
1021 | AudioJS.player.newBehavior("spinner", function(element){
1022 |     if (!this.spinners) {
1023 |       this.spinners = [];
1024 |       _A_.addListener(this.audio, "loadeddata", this.spinnersOnAudioLoadedData.context(this));
1025 |       _A_.addListener(this.audio, "loadstart", this.spinnersOnAudioLoadStart.context(this));
1026 |       _A_.addListener(this.audio, "seeking", this.spinnersOnAudioSeeking.context(this));
1027 |       _A_.addListener(this.audio, "seeked", this.spinnersOnAudioSeeked.context(this));
1028 |       _A_.addListener(this.audio, "canplay", this.spinnersOnAudioCanPlay.context(this));
1029 |       _A_.addListener(this.audio, "canplaythrough", this.spinnersOnAudioCanPlayThrough.context(this));
1030 |       _A_.addListener(this.audio, "waiting", this.spinnersOnAudioWaiting.context(this));
1031 |       _A_.addListener(this.audio, "stalled", this.spinnersOnAudioStalled.context(this));
1032 |       _A_.addListener(this.audio, "suspend", this.spinnersOnAudioSuspend.context(this));
1033 |       _A_.addListener(this.audio, "playing", this.spinnersOnAudioPlaying.context(this));
1034 |       _A_.addListener(this.audio, "timeupdate", this.spinnersOnAudioTimeUpdate.context(this));
1035 |     }
1036 |     this.spinners.push(element);
1037 |   },{
1038 |     showSpinners: function(){
1039 |       this.each(this.spinners, function(spinner){
1040 |         spinner.style.display = "block";
1041 |       });
1042 |       clearInterval(this.spinnerInterval);
1043 |       this.spinnerInterval = setInterval(this.rotateSpinners.context(this), 100);
1044 |     },
1045 |     hideSpinners: function(){
1046 |       this.each(this.spinners, function(spinner){
1047 |         spinner.style.display = "none";
1048 |       });
1049 |       clearInterval(this.spinnerInterval);
1050 |     },
1051 |     spinnersRotated: 0,
1052 |     rotateSpinners: function(){ },
1053 |     spinnersOnAudioLoadedData: function(event){ this.hideSpinners(); },
1054 |     spinnersOnAudioLoadStart: function(event){ this.showSpinners(); },
1055 |     spinnersOnAudioSeeking: function(event){ /* this.showSpinners(); */ },
1056 |     spinnersOnAudioSeeked: function(event){ /* this.hideSpinners(); */ },
1057 |     spinnersOnAudioCanPlay: function(event){ /* this.hideSpinners(); */ },
1058 |     spinnersOnAudioCanPlayThrough: function(event){ this.hideSpinners(); },
1059 |     spinnersOnAudioWaiting: function(event){
1060 |       // Safari sometimes triggers waiting inappropriately
1061 |       // Like after audio has played, any you play again.
1062 |       this.showSpinners();
1063 |     },
1064 |     spinnersOnAudioStalled: function(event){},
1065 |     spinnersOnAudioSuspend: function(event){},
1066 |     spinnersOnAudioPlaying: function(event){ this.hideSpinners(); },
1067 |     spinnersOnAudioTimeUpdate: function(event){
1068 |       // Safari sometimes calls waiting and doesn't recover
1069 |       if(this.spinner.style.display == "block") { this.hideSpinners(); }
1070 |     }
1071 |   }
1072 | );
1073 | 
1074 | ////////////////////////////////////////////////////////////////////////////////
1075 | // Convenience Functions (mini library)
1076 | // Functions not specific to Audio or AudioJS and could probably be replaced with a library like jQuery
1077 | ////////////////////////////////////////////////////////////////////////////////
1078 | 
1079 | AudioJS.extend({
1080 | 
1081 |   addClass: function(element, classToAdd){
1082 |     if ((" "+element.className+" ").indexOf(" "+classToAdd+" ") == -1) {
1083 |       element.className = element.className === "" ? classToAdd : element.className + " " + classToAdd;
1084 |     }
1085 |   },
1086 |   removeClass: function(element, classToRemove){
1087 |     if (element.className.indexOf(classToRemove) == -1) { return; }
1088 |     var classNames = element.className.split(/\s+/);
1089 |     classNames.splice(classNames.lastIndexOf(classToRemove),1);
1090 |     element.className = classNames.join(" ");
1091 |   },
1092 |   createElement: function(tagName, attributes){
1093 |     return this.merge(document.createElement(tagName), attributes);
1094 |   },
1095 | 
1096 |   // Attempt to block the ability to select text while dragging controls
1097 |   blockTextSelection: function(){
1098 |     document.body.focus();
1099 |     document.onselectstart = function () { return false; };
1100 |   },
1101 |   // Turn off text selection blocking
1102 |   unblockTextSelection: function(){ document.onselectstart = function () { return true; }; },
1103 | 
1104 |   // Return seconds as MM:SS
1105 |   formatTime: function(secs) {
1106 |     var seconds = Math.round(secs);
1107 |     var minutes = Math.floor(seconds / 60);
1108 |     minutes = (minutes >= 10) ? minutes : "0" + minutes;
1109 |     seconds = Math.floor(seconds % 60);
1110 |     seconds = (seconds >= 10) ? seconds : "0" + seconds;
1111 |     return minutes + ":" + seconds;
1112 |   },
1113 | 
1114 |   // Return the relative horizonal position of an event as a value from 0-1
1115 |   getRelativePosition: function(x, relativeElement){
1116 |     return Math.max(0, Math.min(1, (x - this.findPosX(relativeElement)) / relativeElement.offsetWidth));
1117 |   },
1118 |   // Get an objects position on the page
1119 |   findPosX: function(obj) {
1120 |     var curleft = obj.offsetLeft;
1121 |     while(obj = obj.offsetParent) {
1122 |       curleft += obj.offsetLeft;
1123 |     }
1124 |     return curleft;
1125 |   },
1126 |   getComputedStyleValue: function(element, style){
1127 |     return window.getComputedStyle(element, null).getPropertyValue(style);
1128 |   },
1129 | 
1130 |   round: function(num, dec) {
1131 |     if (!dec) { dec = 0; }
1132 |     return Math.round(num*Math.pow(10,dec))/Math.pow(10,dec);
1133 |   },
1134 | 
1135 |   addListener: function(element, type, handler){
1136 |     if (element.addEventListener) {
1137 |       element.addEventListener(type, handler, false);
1138 |     } else if (element.attachEvent) {
1139 |       element.attachEvent("on"+type, handler);
1140 |     }
1141 |   },
1142 |   removeListener: function(element, type, handler){
1143 |     if (element.removeEventListener) {
1144 |       element.removeEventListener(type, handler, false);
1145 |     } else if (element.attachEvent) {
1146 |       element.detachEvent("on"+type, handler);
1147 |     }
1148 |   },
1149 | 
1150 |   get: function(url, onSuccess){
1151 |     if (typeof XMLHttpRequest == "undefined") {
1152 |       XMLHttpRequest = function () {
1153 |         try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch (e) {}
1154 |         try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch (f) {}
1155 |         try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (g) {}
1156 |         //Microsoft.XMLHTTP points to Msxml2.XMLHTTP.3.0 and is redundant
1157 |         throw new Error("This browser does not support XMLHttpRequest.");
1158 |       };
1159 |     }
1160 |     var request = new XMLHttpRequest();
1161 |     request.open("GET",url);
1162 |     request.onreadystatechange = function() {
1163 |       if (request.readyState == 4 && request.status == 200) {
1164 |         onSuccess(request.responseText);
1165 |       }
1166 |     }.context(this);
1167 |     request.send();
1168 |   },
1169 | 
1170 |   trim: function(string){ return string.toString().replace(/^\s+/, "").replace(/\s+$/, ""); },
1171 | 
1172 |   // DOM Ready functionality adapted from jQuery. http://jquery.com/
1173 |   bindDOMReady: function(){
1174 |     if (document.readyState === "complete") {
1175 |       return AudioJS.onDOMReady();
1176 |     }
1177 |     if (document.addEventListener) {
1178 |       document.addEventListener("DOMContentLoaded", AudioJS.DOMContentLoaded, false);
1179 |       window.addEventListener("load", AudioJS.onDOMReady, false);
1180 |     } else if (document.attachEvent) {
1181 |       document.attachEvent("onreadystatechange", AudioJS.DOMContentLoaded);
1182 |       window.attachEvent("onload", AudioJS.onDOMReady);
1183 |     }
1184 |   },
1185 | 
1186 |   DOMContentLoaded: function(){
1187 |     if (document.addEventListener) {
1188 |       document.removeEventListener( "DOMContentLoaded", AudioJS.DOMContentLoaded, false);
1189 |       AudioJS.onDOMReady();
1190 |     } else if ( document.attachEvent ) {
1191 |       if ( document.readyState === "complete" ) {
1192 |         document.detachEvent("onreadystatechange", AudioJS.DOMContentLoaded);
1193 |         AudioJS.onDOMReady();
1194 |       }
1195 |     }
1196 |   },
1197 | 
1198 |   // Functions to be run once the DOM is loaded
1199 |   DOMReadyList: [],
1200 |   addToDOMReady: function(fn){
1201 |     if (AudioJS.DOMIsReady) {
1202 |       fn.call(document);
1203 |     } else {
1204 |       AudioJS.DOMReadyList.push(fn);
1205 |     }
1206 |   },
1207 | 
1208 |   DOMIsReady: false,
1209 |   onDOMReady: function(){
1210 |     if (AudioJS.DOMIsReady) { return; }
1211 |     if (!document.body) { return setTimeout(AudioJS.onDOMReady, 13); }
1212 |     AudioJS.DOMIsReady = true;
1213 |     if (AudioJS.DOMReadyList) {
1214 |       for (var i=0; i<AudioJS.DOMReadyList.length; i++) {
1215 |         AudioJS.DOMReadyList[i].call(document);
1216 |       }
1217 |       AudioJS.DOMReadyList = null;
1218 |     }
1219 |   }
1220 | });
1221 | AudioJS.bindDOMReady();
1222 | 
1223 | // Allows for binding context to functions
1224 | // when using in event listeners and timeouts
1225 | Function.prototype.context = function(obj){
1226 |   var method = this,
1227 |   temp = function(){
1228 |     return method.apply(obj, arguments);
1229 |   };
1230 |   return temp;
1231 | };
1232 | 
1233 | // Like context, in that it creates a closure
1234 | // But insteaad keep "this" intact, and passes the var as the second argument of the function
1235 | // Need for event listeners where you need to know what called the event
1236 | // Only use with event callbacks
1237 | Function.prototype.evtContext = function(obj){
1238 |   var method = this,
1239 |   temp = function(){
1240 |     var origContext = this;
1241 |     return method.call(obj, arguments[0], origContext);
1242 |   };
1243 |   return temp;
1244 | };
1245 | 
1246 | // Removeable Event listener with Context
1247 | // Replaces the original function with a version that has context
1248 | // So it can be removed using the original function name.
1249 | // In order to work, a version of the function must already exist in the player/prototype
1250 | Function.prototype.rEvtContext = function(obj, funcParent){
1251 |   if (this.hasContext === true) { return this; }
1252 |   if (!funcParent) { funcParent = obj; }
1253 |   for (var attrname in funcParent) {
1254 |     if (funcParent[attrname] == this) {
1255 |       funcParent[attrname] = this.evtContext(obj);
1256 |       funcParent[attrname].hasContext = true;
1257 |       return funcParent[attrname];
1258 |     }
1259 |   }
1260 |   return this.evtContext(obj);
1261 | };
1262 | // Expose to global
1263 | window.AudioJS = window._A_ = AudioJS;
1264 | 
1265 | // End self-executing function
1266 | })(window);


--------------------------------------------------------------------------------
/audio/Palace Cat - Crookshanks.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jedfoster/AudioJS/6c6bc81ea3e87d85ff0337be5c74d685717ba33a/audio/Palace Cat - Crookshanks.mp3


--------------------------------------------------------------------------------
/audio/Palace Cat - Crookshanks.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jedfoster/AudioJS/6c6bc81ea3e87d85ff0337be5c74d685717ba33a/audio/Palace Cat - Crookshanks.ogg


--------------------------------------------------------------------------------
/audio/Palace Cat - Crookshanks.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jedfoster/AudioJS/6c6bc81ea3e87d85ff0337be5c74d685717ba33a/audio/Palace Cat - Crookshanks.wav


--------------------------------------------------------------------------------
/demo.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <!--[if IE 8]>    <html class="no-js ie8" lang="en"> <![endif]-->
  3 | <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
  4 | <head>
  5 |   <meta charset="utf-8">
  6 | 
  7 |   <title>AudioJS - An HTML5 Audio Player</title>
  8 |   
  9 |   <link rel="author" href="humans.txt">
 10 | 
 11 |   <!-- Mobile viewport optimized: j.mp/bplateviewport -->
 12 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 13 | 
 14 |   <!-- Place favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
 15 |   <link rel="shortcut icon" href="/favicon.ico">
 16 |   <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png">
 17 |   <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png">
 18 |   <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png">
 19 | 
 20 |   <!-- CSS: implied media="all" -->
 21 |   <link rel="stylesheet" href="/css/styles.css">
 22 |   
 23 |   <!-- Include the AudioJS Stylesheet -->
 24 |   <link rel="stylesheet" href="audio-js.css" type="text/css" media="screen" title="Audio JS" charset="utf-8">
 25 |   <link rel="stylesheet" href="skins/hu.css" type="text/css" media="screen" title="Audio JS" charset="utf-8">
 26 |   <link rel="stylesheet" href="skins/tube.css" type="text/css" media="screen" title="Audio JS" charset="utf-8">
 27 |   <link rel="stylesheet" href="skins/vim.css" type="text/css" media="screen" title="Audio JS" charset="utf-8">
 28 | 
 29 |   <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
 30 |   <script src="/js/modernizr.js"></script>
 31 | 
 32 | </head>
 33 | 
 34 | <body class="pg-audiojs">
 35 | 
 36 |   <div class="container">
 37 |     <header>
 38 | 			<h1><a href="http://jedfoster.com/">Jed Foster</a></h1>
 39 | 			
 40 | 			<h2><span>Code. </span><span>Design. </span><span>For the web.</span></h2>
 41 | 		</header>
 42 | 
 43 |     <div id="main" role="main">
 44 | 			<h2>AudioJS</h2>
 45 | 			
 46 | 			<p>Fork of <a href="http://videojs.com/">VideoJS</a> for audio, with all themes from VideoJS</p>
 47 | 			
 48 | 			<h3>Authors</h3>
 49 | 
 50 |       Based on VideoJS from <a href="http://zencoder.com/">Zencoder</a> and modified by <a href="https://github.com/dz0ny">dz0ny</a> and <a href="https://github.com/jedfoster">jedfoster</a>
 51 | 
 52 |       <hr>
 53 | 
 54 |       <h4>Default Skin</h4>
 55 |       
 56 |       <div class="audio-js-box">
 57 |         <audio class="audio-js" controls preload>
 58 |           <source src="audio/Palace Cat - Crookshanks.mp3" type="audio/mpeg">
 59 |       		<source src="audio/Palace Cat - Crookshanks.ogg" type="audio/ogg">
 60 |       		<source src="audio/Palace Cat - Crookshanks.wav" type="audio/wav">
 61 |         </audio>
 62 |       </div>
 63 |       
 64 |       <hr>
 65 |       
 66 |       <h4>YouTube Skin</h4>
 67 |       
 68 |       <div class="audio-js-box tube-css">
 69 |         <audio class="audio-js" controls preload>
 70 |           <source src="audio/Palace Cat - Crookshanks.mp3" type="audio/mpeg">
 71 |       		<source src="audio/Palace Cat - Crookshanks.ogg" type="audio/ogg">
 72 |       		<source src="audio/Palace Cat - Crookshanks.wav" type="audio/wav">
 73 |         </audio>
 74 |       </div>
 75 | 
 76 |       <hr>
 77 |       
 78 |       <h4>Vimeo Skin</h4>
 79 |       
 80 |       <div class="audio-js-box vim-css">
 81 |         <audio class="audio-js" controls preload>
 82 |           <source src="audio/Palace Cat - Crookshanks.mp3" type="audio/mpeg">
 83 |       		<source src="audio/Palace Cat - Crookshanks.ogg" type="audio/ogg">
 84 |       		<source src="audio/Palace Cat - Crookshanks.wav" type="audio/wav">
 85 |         </audio>
 86 |       </div>
 87 | 
 88 |       <hr>
 89 |       
 90 |       <h4>Hulu Skin</h4>
 91 |       
 92 |       <div class="audio-js-box hu-css">
 93 |         <audio class="audio-js" controls preload>
 94 |           <source src="audio/Palace Cat - Crookshanks.mp3" type="audio/mpeg">
 95 |       		<source src="audio/Palace Cat - Crookshanks.ogg" type="audio/ogg">
 96 |       		<source src="audio/Palace Cat - Crookshanks.wav" type="audio/wav">
 97 |         </audio>
 98 |       </div>
 99 |       
100 |       <hr>
101 |       
102 |       <h4>WordPress Audio Player skin</h4>
103 |       
104 |       <p>I created<a href="http://jedfoster.github.com/html5-WP-audio-player/"> an HTML5 version</a> of the awesome <a href="http://wpaudioplayer.com/standalone/">WordPress Audio Player</a> by <a href="http://www.1pixelout.net/">Martin Laine</a> for browsers that support HTML5&#8217;s <code>&lt;audio&gt;</code> tag, with fallback to the original WP Audio Player for browsers that don&#8217;t.</p>
105 |       
106 |       <p>This isn't so much a "skin" as a new project based on this project. You should <a href="http://jedfoster.github.com/html5-WP-audio-player/">check it out!</a></p>
107 |       
108 |       <hr>
109 |       
110 |       <h3>Download</h3>
111 | 
112 |       <p>You can download this project in either <a href="https://github.com/jedfoster/AudioJS/zipball/master">zip</a> or <a href="https://github.com/jedfoster/AudioJS/tarball/master">tar</a> formats.</p>
113 |       
114 |       
115 |       
116 |       <p>Audio sample is <a href="http://palacecat.bandcamp.com/track/crookshanks">Crookshanks by Palace Cat</a>, via <a href="http://duplokat.tumblr.com/post/12695092003/geek-friday-ringtone">duplokat</a></p>
117 | 
118 |       <p><a href="https://github.com/jedfoster/audiojs">Fork me on GitHub!</a></p>
119 | 
120 |       <!-- Include the AudioJS Library -->
121 |       <script src="audio.js" type="text/javascript" charset="utf-8"></script>
122 | 
123 |       <script type="text/javascript" charset="utf-8">
124 |         // Must come after the audio.js library
125 | 
126 |         // Add AudioJS to all audio tags on the page when the DOM is ready
127 |         AudioJS.setupAllWhenReady();
128 | 
129 |         /* ============= OR ============ */
130 | 
131 |         // Setup and store a reference to the player(s).
132 |         // Must happen after the DOM is loaded
133 |         // You can use any library's DOM Ready method instead of AudioJS.DOMReady
134 | 
135 |         /*
136 |         AudioJS.DOMReady(function(){
137 | 
138 |           // Using the video's ID or element
139 |           var myPlayer = AudioJS.setup("example_video_1");
140 | 
141 |           // OR using an array of video elements/IDs
142 |           // Note: It returns an array of players
143 |           var myManyPlayers = AudioJS.setup(["example_video_1", "example_video_2", video3Element]);
144 | 
145 |           // OR all videos on the page
146 |           var myManyPlayers = AudioJS.setup("All");
147 | 
148 |           // After you have references to your players you can...(example)
149 |           myPlayer.play(); // Starts playing the video for this player.
150 |         });
151 |         */
152 | 
153 |         /* ========= SETTING OPTIONS ========= */
154 | 
155 |         // Set options when setting up the videos. The defaults are shown here.
156 | 
157 |         /*
158 |         AudioJS.setupAllWhenReady({
159 |           controlsBelow: false, // Display control bar below video instead of in front of
160 |           controlsHiding: true, // Hide controls when mouse is not over the video
161 |           defaultVolume: 0.85, // Will be overridden by user's last volume if available
162 |           flashVersion: 9, // Required flash version for fallback
163 |           linksHiding: true // Hide download links when video is supported
164 |         });
165 |         */
166 | 
167 |         // Or as the second option of AudioJS.setup
168 | 
169 |         /*
170 |         AudioJS.DOMReady(function(){
171 |           var myPlayer = AudioJS.setup("example_video_1", {
172 |             // Same options
173 |           });
174 |         });
175 |         */
176 | 
177 |       </script>
178 |     </div>
179 | 
180 | 		<div id="sidebar">      
181 | 		</div>
182 | 
183 |     <footer>
184 | 
185 |     </footer>
186 |   </div>
187 | 
188 | 
189 |   <!-- JavaScript at the bottom for fast page loading -->
190 | 	<script src="/js/prototaculous.min.js"></script>
191 | 
192 | 	<script src="/js/script.js"></script>
193 | </body>
194 | </html>


--------------------------------------------------------------------------------
/skins/hu.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | AudioJS HuCSS Skin (http://videojs.com)
  3 | Version 2.0.0
  4 | */
  5 | 
  6 | .hu-css .ajs-controls {
  7 |   height: 47px; opacity: 0.95; color: #fff;
  8 |   background: #3A3835;
  9 | }
 10 | .hu-css.audio-js-box .ajs-controls { background: #3A3835; }
 11 | 
 12 | .hu-css .ajs-controls > div {
 13 |   top: 0;
 14 |   background: none;
 15 |   -webkit-border-radius: 0; border-radius: 0;
 16 |   -webkit-box-shadow: none; box-shadow: none;
 17 | }
 18 | 
 19 | /* Top Level Items */
 20 | .hu-css .ajs-controls > div.ajs-play-control,
 21 | .hu-css .ajs-controls > div.ajs-volume-control {
 22 |   bottom: 20px; height: 27px;
 23 | }
 24 | /* Bottom Level Items */
 25 | .hu-css .ajs-controls > div.ajs-progress-control, .hu-css .ajs-controls > div.ajs-time-control {
 26 |   margin-top: 28px; height: 19px;
 27 | }
 28 | 
 29 | /* Placement of Control Items */
 30 | .hu-css .ajs-controls > div.ajs-play-control       { width: 33px; left: 0px; }
 31 | .hu-css .ajs-controls > div.ajs-progress-control   { left: 84px; right: 0px; }
 32 | .hu-css .ajs-controls > div.ajs-time-control       { width: 84px; left: 0px; }
 33 | .hu-css .ajs-controls > div.ajs-volume-control     { width: 43px; right: 0px; }
 34 | 
 35 | /* Play/Pause
 36 | -------------------------------------------------------------------------------- */
 37 | .hu-css.ajs-paused .ajs-play-control span { margin: 9px 0 0 12px; }
 38 | .hu-css.ajs-playing .ajs-play-control span { margin: 9px 0 0 12px; }
 39 | .hu-css .ajs-play-control:hover { background-color: #000; }
 40 | 
 41 | /* Progress
 42 | -------------------------------------------------------------------------------- */
 43 | .hu-css .ajs-progress-holder { /* Box containing play and load progresses */
 44 |   height: 19px; border: none;
 45 |   margin: 0px 0px 0 0px; /* Placement within the progress control item */
 46 |   background: #000;
 47 |   -webkit-border-radius: 0; border-radius: 0;
 48 | }
 49 | .hu-css .ajs-progress-holder div { height: 13px; margin-top: 3px; -webkit-border-radius: 0; border-radius: 0; }
 50 | .hu-css .ajs-play-progress {
 51 |   background: #777;
 52 |   background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#777));
 53 |   background: -moz-linear-gradient(top,  #999,  #777);
 54 | }
 55 | .hu-css .ajs-load-progress { background: #555; }
 56 | 
 57 | /* Time Display
 58 | -------------------------------------------------------------------------------- */
 59 | .hu-css .ajs-controls .ajs-time-control { font-size: 11px; background: #000; }
 60 | .hu-css .ajs-controls .ajs-time-control span { line-height: 19px; /* Centering vertically */ }
 61 | 
 62 | /* Volume
 63 | -------------------------------------------------------------------------------- */
 64 | /*.hu-css .ajs-volume-control:hover { background-color: #000; }*/
 65 | .hu-css .ajs-volume-control div { margin: 0 5px 0 5px; padding: 9px 0 0 0; }
 66 | .hu-css .ajs-volume-control div span { /* Individual volume bars */
 67 |   margin: 0 2px 0 0; /* Space between */
 68 |   width: 3px; height: 0px; /* Total height is height + bottom border */
 69 |   border-bottom: 12px solid #555; /* Default (off) color and height of visible portion */
 70 | }
 71 | .hu-css .ajs-volume-control div span.ajs-volume-level-on { border-color: #fff; /* Volume on bar color */ }
 72 | /* Creating differnt bar heights through height (transparent) and bottom border (visible). */
 73 | .hu-css .ajs-volume-control div span:nth-child(1) { border-bottom-width: 2px; height: 10px; }
 74 | .hu-css .ajs-volume-control div span:nth-child(2) { border-bottom-width: 4px; height: 8px; }
 75 | .hu-css .ajs-volume-control div span:nth-child(3) { border-bottom-width: 6px; height: 6px; }
 76 | .hu-css .ajs-volume-control div span:nth-child(4) { border-bottom-width: 8px; height: 4px; }
 77 | .hu-css .ajs-volume-control div span:nth-child(5) { border-bottom-width: 10px; height: 2px; }
 78 | 
 79 | /* Big Play Button (at start)
 80 | ---------------------------------------------------------*/
 81 | .hu-css div.ajs-big-play-button {
 82 |   width: 76px; height: 70px; margin: -35px 0 0 -38px;
 83 |   border: 1px solid #ccc; opacity: 0.8;
 84 |   -webkit-border-radius: 0px; border-radius: 0px;
 85 | 
 86 |   background: rgba(50,50,50,0.8);
 87 | 
 88 |   /* CSS Shadows */
 89 |   -webkit-box-shadow: none; box-shadow: none;
 90 | }
 91 | .hu-css div.ajs-big-play-button:hover {
 92 |   -webkit-box-shadow: 0px 0px 80px #fff; -moz-box-shadow: 0px 0px 80px #fff; box-shadow: 0px 0px 80px #fff;
 93 | }
 94 | .hu-css div.ajs-big-play-button span {
 95 |   margin: 16px 0 0 21px;
 96 |   /* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */
 97 |   border-left: 40px solid #fff; /* Width & Color of play icon */
 98 |   /* Height of play icon is total top & bottom border widths. Color is transparent. */
 99 |   border-top: 20px solid rgba(0,0,0,0); border-bottom: 20px solid rgba(0,0,0,0);
100 | }


--------------------------------------------------------------------------------
/skins/tube.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | AudioJS TubeCSS Skin (http://videojs.com)
 3 | Version 2.0.0
 4 | */
 5 | 
 6 | .tube-css .ajs-controls {
 7 |   opacity: 1; color: #000;
 8 |   height: 24px;
 9 |   bottom: 0;
10 |   background-color: #ccc;
11 |   background: #fcfcfc -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#d0d0d0)) left top;
12 |   background: #fcfcfc -moz-linear-gradient(top,  #fcfcfc,  #d0d0d0) left top;
13 | }
14 | 
15 | .tube-css .ajs-controls > div {
16 |   height: 23px; margin: 0; background: none; top: 0;
17 |   border: 1px solid #b1b1b1; border-left-color: #eee;
18 |   -webkit-border-radius: 0; border-radius: 0;
19 |   -webkit-box-shadow: none; box-shadow: none;
20 | }
21 | 
22 | /* Placement of Control Items */
23 | .tube-css .ajs-controls > div.ajs-play-control       { width: 25px; left: 0; }
24 | .tube-css .ajs-controls > div.ajs-progress-control   { left: 102px; right: 50px; }
25 | .tube-css .ajs-controls > div.ajs-time-control       { width: 75px; left: 27px; }
26 | .tube-css .ajs-controls > div.ajs-volume-control     { width: 50px; right: 0px; }
27 | 
28 | /* Removing borders on time & progress to join them */
29 | .tube-css .ajs-controls > div.ajs-progress-control { border-left: none; }
30 | .tube-css .ajs-controls > div.ajs-time-control { border-right: none; }
31 | 
32 | 
33 | /* Play/Pause
34 | -------------------------------------------------------------------------------- */
35 | .tube-css .ajs-controls div.ajs-play-control { margin-left: 0; border-left-color: #b1b1b1; }
36 | .tube-css.ajs-paused  .ajs-play-control span { border-left-color: #333; border-top-width: 7px; border-left-width: 13px; border-bottom-width: 7px; margin: 5px 0 0 7px; }
37 | .tube-css.ajs-playing .ajs-play-control span { height: 14px; margin: 5px auto 0; border-left: 4px solid #333; border-right: 4px solid #333; }
38 | .tube-css.ajs-paused  .ajs-play-control:hover span { border-left-color: #CF1A1A; }
39 | .tube-css.ajs-playing .ajs-play-control:hover span { border-left-color: #CF1A1A; border-right-color: #CF1A1A; }
40 | 
41 | /* Time Display
42 | -------------------------------------------------------------------------------- */
43 | .tube-css .ajs-controls .ajs-time-control { font-size: 11px; }
44 | .tube-css .ajs-controls .ajs-time-control span { line-height: 25px; /* Centering vertically */ }
45 | 
46 | /* Progress
47 | -------------------------------------------------------------------------------- */
48 | .tube-css .ajs-progress-holder {
49 |   margin-right: 10px;
50 |   background-color: #b1b1b1;
51 |   background: #b1b1b1 -webkit-gradient(linear, left top, left bottom, from(#b1b1b1), to(#cacaca)) left top;
52 |   background: #b1b1b1 -moz-linear-gradient(top,  #b1b1b1,  #cacaca) left top;
53 |   border-color: #CACACA; border-bottom-color: #eaeaea;
54 |   -webkit-border-radius: 0; border-radius: 0;
55 | }
56 | .tube-css .ajs-progress-control .ajs-load-progress { background: #C89191; -webkit-border-radius: 0; border-radius: 0; }
57 | .tube-css .ajs-progress-control .ajs-play-progress { background: #f33; background: -webkit-gradient(linear, left top, left bottom, from(#f33), to(#CF1A1A)); background: -moz-linear-gradient(top,  #f33,  #CF1A1A); -webkit-border-radius: 0; border-radius: 0; }
58 | 
59 | /* Volume
60 | -------------------------------------------------------------------------------- */
61 | .tube-css .ajs-volume-control div { padding: 3px 0 0 0; }
62 | .tube-css .ajs-volume-control div span { border-bottom-color: #ccc; }
63 | /* Volume icon color */
64 | .tube-css .ajs-volume-control div span.ajs-volume-level-on { border-color: #333; }
65 | /* Volume icon hovering color */
66 | .tube-css .ajs-volume-control:hover div span.ajs-volume-level-on { border-color: #CF1A1A; }
67 | 
68 | /* Big Play Button (at start)
69 | ---------------------------------------------------------*/
70 | .tube-css div.ajs-big-play-button {
71 |   width: 84px; height: 58px; margin: -29px 0 0 -42px;
72 |   border: 2px solid #ccc; opacity: 0.9;
73 |   -webkit-border-radius: 10px; border-radius: 10px;
74 | 
75 |   /* CSS Background Gradients */
76 |   background-color: #333;
77 |   background: #000 -webkit-gradient(linear, left top, left bottom, from(#000), to(#333)) left 29px;
78 |   background: #000 -moz-linear-gradient(top,  #000,  #333) left 29px;
79 | 
80 |   /* CSS Shadows */
81 |   -webkit-box-shadow: none; box-shadow: none;
82 | }
83 | .tube-css div.ajs-big-play-button:hover {
84 |   opacity: 1;
85 | }
86 | .tube-css div.ajs-big-play-button span {
87 |   margin: 11px 0 0 26px;
88 |   /* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */
89 |   border-left: 36px solid #fff; /* Width & Color of play icon */
90 |   /* Height of play icon is total top & bottom border widths. Color is transparent. */
91 |   border-top: 18px solid rgba(0,0,0,0); border-bottom: 18px solid rgba(0,0,0,0);
92 | }
93 | 


--------------------------------------------------------------------------------
/skins/vim.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | AudioJS VimCSS Skin (http://videojs.com)
 3 | Version 2.0.0
 4 | */
 5 | 
 6 | .vim-css .ajs-controls {
 7 |   height: 60px; opacity: 0.9; color: #fff;
 8 | }
 9 | .vim-css .ajs-controls > div {
10 |   height: 32px; top: 18px; padding: 0; text-align: center; background: rgba(23, 35, 34, 0.746094);
11 |   -webkit-border-radius: 0; border-radius: 0;
12 |   -webkit-box-shadow: none; box-shadow: none;
13 | }
14 | /* Placement of Control Items */
15 | .vim-css .ajs-controls > div.ajs-play-control       { width: 65px; left: 10px; }
16 | .vim-css .ajs-controls > div.ajs-progress-control   { left: 85px; right: 125px; }
17 | .vim-css .ajs-controls > div.ajs-time-control       { width: 75px; right: 50px; }
18 | .vim-css .ajs-controls > div.ajs-volume-control     { width: 50px; right: 0px; }
19 | 
20 | /* Play/Pause
21 | -------------------------------------------------------------------------------- */
22 | .vim-css .ajs-controls .ajs-play-control { top: 10px; margin: 0; height: 40px;  -webkit-border-radius: 5px; border-radius: 5px; }
23 | .vim-css .ajs-play-control:hover { background: #00ADEF; }
24 | .vim-css.ajs-paused .ajs-play-control span { border-left-color: #fff; border-top-width: 9px; border-left-width: 18px; border-bottom-width: 9px; margin: 11px 0 0 24px; }
25 | .vim-css.ajs-playing .ajs-play-control span { width: 5px; height: 18px; margin: 5px auto 0; border-left: 5px solid #fff; border-right: 5px solid #fff; margin: 11px 0 0 24px; }
26 | 
27 | /* Progress
28 | -------------------------------------------------------------------------------- */
29 | .vim-css .ajs-controls .ajs-progress-control { -webkit-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; }
30 | .vim-css .ajs-progress-control .ajs-progress-holder { height: 8px; padding: 1px; margin: 10px 5px 0 10px; border-color: #666666; -webkit-border-radius: 0; border-radius: 0; }
31 | .vim-css .ajs-progress-control .ajs-play-progress { height: 8px; background: #00ADEF; -webkit-border-radius: 0; border-radius: 0; }
32 | .vim-css .ajs-progress-control .ajs-load-progress { height: 8px; background: #898F8F; -webkit-border-radius: 0; border-radius: 0; }
33 | 
34 | /* Time Display
35 | -------------------------------------------------------------------------------- */
36 | .vim-css .ajs-controls .ajs-time-control { font-size: 11px; }
37 | .vim-css .ajs-controls .ajs-time-control span { line-height: 32px; /* Centering vertically */ }
38 | 
39 | /* Volume
40 | -------------------------------------------------------------------------------- */
41 | .vim-css .ajs-controls .ajs-volume-control { -webkit-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; }
42 | .vim-css .ajs-volume-control div { padding: 7px 0 0 5px; width: 30px; }
43 | .vim-css .ajs-volume-control div span {
44 |   float: left; margin: 0 2px 0 0; padding: 0; width: 3px; height: 3px; border-bottom: 12px solid #666666;
45 |   -webkit-transition: all 100ms linear; -moz-transition: all 100ms linear;
46 | }
47 | .vim-css .ajs-volume-control div span.ajs-volume-level-on { border-color: #00ADEF; }
48 | .vim-css .ajs-volume-control div span:hover { height: 0; border-bottom-width: 15px; }
49 | 
50 | /* Big Play Button (at start)
51 | ---------------------------------------------------------*/
52 | .vim-css div.ajs-big-play-button {
53 |   width: 130px; height: 80px; margin: -40px 0 0 -65px;
54 |   border: none; opacity: 0.9;
55 |   -webkit-border-radius: 10px; border-radius: 10px;
56 | 
57 |   background: rgba(23, 35, 34, 0.746094);
58 | 
59 |   /* CSS Shadows */
60 |   -webkit-box-shadow: none; box-shadow: none;
61 | }
62 | .vim-css div.ajs-big-play-button:hover {
63 |   background: #00ADEF;
64 |   opacity: 1;
65 | }
66 | .vim-css div.ajs-big-play-button span {
67 |   margin: 22px 0 0 48px;
68 |   /* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */
69 |   border-left: 36px solid #fff; /* Width & Color of play icon */
70 |   /* Height of play icon is total top & bottom border widths. Color is transparent. */
71 |   border-top: 18px solid rgba(0,0,0,0); border-bottom: 18px solid rgba(0,0,0,0);
72 | }
73 | 


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