59a8c801cad5a5588222f2ec2cb0e2284c6d6d46
2 * GNU MediaGoblin -- federated, autonomous media hosting
3 * Copyright (C) 2011, 2012 MediaGoblin contributors. See AUTHORS.
5 * This program is free software: you can redistribute it and/or modify
6 * it under the terms of the GNU Affero General Public License as published by
7 * the Free Software Foundation, either version 3 of the License, or
8 * (at your option) any later version.
10 * This program is distributed in the hope that it will be useful,
11 * but WITHOUT ANY WARRANTY; without even the implied warranty of
12 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13 * GNU Affero General Public License for more details.
15 * You should have received a copy of the GNU Affero General Public License
16 * along with this program. If not, see <http://www.gnu.org/licenses/>.
19 var audioPlayer
= new Object();
21 (function (audioPlayer
) {
22 audioPlayer
.init = function (audioElement
) {
23 audioPlayer
.audioElement
= audioElement
;
25 console
.log(audioElement
);
29 $(audioElement
).hide();
32 function attachEvents () {
33 audioPlayer
.audioElement
.addEventListener(
34 'durationchange', audioPlayer
.durationChange
, true);
35 audioPlayer
.audioElement
.addEventListener(
36 'timeupdate', audioPlayer
.timeUpdate
, true);
37 audioPlayer
.audioElement
.addEventListener(
38 'progress', audioPlayer
.onProgress
, true);
39 audioPlayer
.audioElement
.addEventListener(
40 'ended', audioPlayer
.onEnded
, true);
42 $(document
).ready( function () {
43 $('.audio-spectrogram').delegate(
44 '.seekbar', 'click', audioPlayer
.onSeek
);
45 $('.audio-spectrogram').delegate(
46 '.audio-control-play-pause', 'click', audioPlayer
.playPause
);
47 $('.audio-spectrogram').delegate(
48 '.audio-volume', 'change', audioPlayer
.onVolumeChange
);
49 $('.audio-media').delegate(
50 '.audio-spectrogram', 'attachedControls',
51 audioPlayer
.onControlsAttached
);
55 audioPlayer
.onVolumeChange = function(e
) {
56 console
.log('volume change', e
);
57 audioPlayer
.audioElement
.volume
= e
.target
.value
;
60 audioPlayer
.onControlsAttached = function(e
) {
61 console
.log('Controls attached', e
);
62 $('.audio-spectrogram .audio-volume').val(
63 Math
.round(audioPlayer
.audioElement
.volume
, 2));
66 audioPlayer
.onProgress = function(e
) {
68 * Handler for file download progress
72 var buffered
= audioPlayer
.audioElement
.buffered
;
76 var indicators
= $('.audio-spectrogram .buffered-indicators div');
78 for (var i
= 0; i
< buffered
.length
; i
++) {
79 if (!(i
in indicators
)) {
80 $('<div style="display: none;"></div>')
81 .appendTo($('.audio-spectrogram .buffered-indicators'))
83 indicators
= $('.audio-spectrogram .buffered-indicators div');
85 var posStart
= ((buffered
.start(i
) / audioPlayer
.audioElement
.duration
)
86 * audioPlayer
.imageElement
.width());
87 var posStop
= ((buffered
.end(i
) / audioPlayer
.audioElement
.duration
)
88 * audioPlayer
.imageElement
.width());
89 console
.log('indicators', indicators
);
91 var indicator
= $(indicators
[i
]);
93 indicator
.css('left', posStart
);
94 indicator
.css('width', posStop
- posStart
);
98 * Clean up unused indicators
100 if (indicators
.length
> buffered
.length
) {
101 for (var i
= buffered
.length
; i
< indicators
.length
; i
++) {
102 $(indicators
[i
]).fadeOut(500, function () {
109 audioPlayer
.onSeek = function (e
) {
111 * Callback handler for seek event, which is a .click() event on the
114 console
.log('onSeek', e
);
116 var im
= audioPlayer
.imageElement
;
117 var pos
= (e
.offsetX
|| e
.originalEvent
.layerX
) / im
.width();
119 console
.log('pos', (e
.offsetX
|| e
.originalEvent
.layerX
) / im
.width())
120 console
.log('setting current time to',
121 pos
* audioPlayer
.audioElement
.duration
)
123 audioPlayer
.audioElement
.currentTime
= pos
* audioPlayer
.audioElement
.duration
;
124 audioPlayer
.audioElement
.play();
125 audioPlayer
.setState(audioPlayer
.PLAYING
);
128 audioPlayer
.onEnded = function (e
) {
129 audioPlayer
.setState(audioPlayer
.PAUSED
);
132 audioPlayer
.playPause = function (e
) {
133 console
.log('playPause', e
);
134 if (audioPlayer
.audioElement
.paused
) {
135 audioPlayer
.audioElement
.play();
136 audioPlayer
.setState(audioPlayer
.PLAYING
);
138 audioPlayer
.audioElement
.pause();
139 audioPlayer
.setState(audioPlayer
.PAUSED
);
143 audioPlayer
.NULL
= null;
144 audioPlayer
.PLAYING
= 2;
145 audioPlayer
.PAUSED
= 4;
147 audioPlayer
.state
= audioPlayer
.NULL
;
149 audioPlayer
.setState = function (state
) {
150 if (state
== audioPlayer
.state
) {
153 audioPlayer
.state
= state
;
157 case audioPlayer
.PLAYING
:
158 el
= $('.audio-spectrogram .audio-control-play-pause')
159 .removeClass('paused').addClass('playing')
160 .text('▮▮').attr('aria-label', 'Pause');
161 el
[0].setAttribute('aria-label', 'Pause')
163 case audioPlayer
.PAUSED
:
164 el
= $('.audio-spectrogram .audio-control-play-pause')
165 .removeClass('playing').addClass('paused')
166 .text('▶').attr('aria-label', 'Play');
167 el
[0].setAttribute('aria-label', 'Play')
172 audioPlayer
.durationChange = function () {
176 audioPlayer
.timeUpdate = function () {
178 * Callback handler for the timeupdate event, responsible for
179 * updating the playhead
181 var currentTime
= audioPlayer
.audioElement
.currentTime
;
182 var playhead
= audioPlayer
.imageElement
.parent().find('.playhead');
183 playhead
.css('width', (currentTime
/ audioPlayer
.audioElement
.duration
)
184 * audioPlayer
.imageElement
.width());
185 var time
= formatTime(currentTime
);
186 var duration
= formatTime(audioPlayer
.audioElement
.duration
);
187 audioPlayer
.imageElement
.parent()
188 .find('.audio-currentTime')
189 .text(time
+ '/' + duration
);
192 function formatTime(seconds
) {
194 * Format a time duration in (hh:)?mm:ss manner
196 var h
= Math
.floor(seconds
/ (60 * 60));
197 var m
= Math
.floor((seconds
- h
* 60 * 60) / 60);
198 var s
= Math
.round(seconds
- h
* 60 * 60 - m
* 60);
199 return '' + (h
? (h
< 10 ? '0' + h
: h
) + ':' : '') + (m
< 10 ? '0' + m
: m
) + ':' + (s
< 10 ? '0' + s
: s
);
202 audioPlayer
.formatTime
= formatTime
;
204 audioPlayer
.attachToImage = function (imageElement
) {
206 * Attach the player to an image element
208 console
.log(imageElement
);
209 var im
= $(imageElement
);
210 audioPlayer
.imageElement
= im
;
215 $(document
).ready(function () {
216 if (!$('.audio-media').length
) {
220 console
.log('Initializing audio player');
222 audioElements
= $('.audio-media .audio-player');
223 audioPlayer
.init(audioElements
[0]);
224 audioPlayer
.attachToImage($('.audio-spectrogram img')[0]);