Commit | Line | Data |
---|---|---|
a9d84d4c JW |
1 | /** |
2 | * GNU MediaGoblin -- federated, autonomous media hosting | |
3 | * Copyright (C) 2011, 2012 MediaGoblin contributors. See AUTHORS. | |
4 | * | |
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. | |
9 | * | |
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. | |
14 | * | |
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/>. | |
17 | */ | |
18 | ||
19 | var audioPlayer = new Object(); | |
20 | ||
21 | (function (audioPlayer) { | |
22 | audioPlayer.init = function (audioElement) { | |
23 | audioPlayer.audioElement = audioElement; | |
97e40b52 | 24 | |
a9d84d4c | 25 | console.log(audioElement); |
97e40b52 | 26 | |
a9d84d4c | 27 | attachEvents(); |
97e40b52 | 28 | |
a9d84d4c JW |
29 | $(audioElement).hide(); |
30 | }; | |
31 | ||
32 | function attachEvents () { | |
97e40b52 JW |
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); | |
41 | ||
a9d84d4c | 42 | $(document).ready( function () { |
97e40b52 JW |
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); | |
a9d84d4c JW |
52 | }); |
53 | } | |
54 | ||
97e40b52 JW |
55 | audioPlayer.onVolumeChange = function(e) { |
56 | console.log('volume change', e); | |
57 | audioPlayer.audioElement.volume = e.target.value; | |
58 | } | |
59 | ||
60 | audioPlayer.onControlsAttached = function(e) { | |
61 | console.log('Controls attached', e); | |
62 | $('.audio-spectrogram .audio-volume').val( | |
63 | Math.round(audioPlayer.audioElement.volume, 2)); | |
64 | } | |
65 | ||
66 | audioPlayer.onProgress = function(e) { | |
67 | /** | |
68 | * Handler for file download progress | |
69 | */ | |
70 | console.log(e); | |
71 | ||
72 | var buffered = audioPlayer.audioElement.buffered; | |
a9d84d4c JW |
73 | |
74 | ranges = new Array(); | |
75 | ||
97e40b52 JW |
76 | var indicators = $('.audio-spectrogram .buffered-indicators div'); |
77 | ||
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')) | |
82 | .fadeIn(500); | |
83 | indicators = $('.audio-spectrogram .buffered-indicators div'); | |
84 | } | |
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); | |
90 | ||
91 | var indicator = $(indicators[i]); | |
92 | ||
93 | indicator.css('left', posStart); | |
94 | indicator.css('width', posStop - posStart); | |
95 | } | |
96 | ||
97 | /* | |
98 | * Clean up unused indicators | |
99 | */ | |
100 | if (indicators.length > buffered.length) { | |
101 | for (var i = buffered.length; i < indicators.length; i++) { | |
102 | $(indicators[i]).fadeOut(500, function () { | |
103 | this.remove(); | |
104 | }); | |
105 | } | |
a9d84d4c | 106 | } |
a9d84d4c JW |
107 | }; |
108 | ||
109 | audioPlayer.onSeek = function (e) { | |
97e40b52 JW |
110 | /** |
111 | * Callback handler for seek event, which is a .click() event on the | |
112 | * .seekbar element | |
113 | */ | |
a9d84d4c | 114 | console.log('onSeek', e); |
97e40b52 JW |
115 | |
116 | var im = audioPlayer.imageElement; | |
117 | var pos = (e.offsetX || e.originalEvent.layerX) / im.width(); | |
118 | ||
638ea756 BB |
119 | console.log('pos', (e.offsetX || e.originalEvent.layerX) / im.width()) |
120 | console.log('setting current time to', | |
121 | pos * audioPlayer.audioElement.duration) | |
122 | ||
a9d84d4c JW |
123 | audioPlayer.audioElement.currentTime = pos * audioPlayer.audioElement.duration; |
124 | audioPlayer.audioElement.play(); | |
125 | audioPlayer.setState(audioPlayer.PLAYING); | |
126 | }; | |
127 | ||
97e40b52 JW |
128 | audioPlayer.onEnded = function (e) { |
129 | audioPlayer.setState(audioPlayer.PAUSED); | |
130 | } | |
131 | ||
a9d84d4c JW |
132 | audioPlayer.playPause = function (e) { |
133 | console.log('playPause', e); | |
134 | if (audioPlayer.audioElement.paused) { | |
135 | audioPlayer.audioElement.play(); | |
136 | audioPlayer.setState(audioPlayer.PLAYING); | |
137 | } else { | |
138 | audioPlayer.audioElement.pause(); | |
139 | audioPlayer.setState(audioPlayer.PAUSED); | |
140 | } | |
141 | }; | |
142 | ||
143 | audioPlayer.NULL = null; | |
144 | audioPlayer.PLAYING = 2; | |
145 | audioPlayer.PAUSED = 4; | |
146 | ||
147 | audioPlayer.state = audioPlayer.NULL; | |
148 | ||
149 | audioPlayer.setState = function (state) { | |
150 | if (state == audioPlayer.state) { | |
151 | return; | |
97e40b52 JW |
152 | } else { |
153 | audioPlayer.state = state; | |
a9d84d4c JW |
154 | } |
155 | ||
156 | switch (state) { | |
157 | case audioPlayer.PLAYING: | |
158 | $('.audio-spectrogram .audio-control-play-pause') | |
159 | .removeClass('paused').addClass('playing') | |
97e40b52 | 160 | .text('▮▮'); |
a9d84d4c JW |
161 | break; |
162 | case audioPlayer.PAUSED: | |
163 | $('.audio-spectrogram .audio-control-play-pause') | |
164 | .removeClass('playing').addClass('paused') | |
165 | .text('▶'); | |
166 | break; | |
167 | } | |
168 | }; | |
169 | ||
170 | audioPlayer.durationChange = function () { | |
97e40b52 | 171 | // ??? |
a9d84d4c JW |
172 | }; |
173 | ||
174 | audioPlayer.timeUpdate = function () { | |
97e40b52 JW |
175 | /** |
176 | * Callback handler for the timeupdate event, responsible for | |
177 | * updating the playhead | |
178 | */ | |
179 | var currentTime = audioPlayer.audioElement.currentTime; | |
180 | var playhead = audioPlayer.imageElement.parent().find('.playhead'); | |
181 | playhead.css('width', (currentTime / audioPlayer.audioElement.duration) | |
182 | * audioPlayer.imageElement.width()); | |
183 | var time = formatTime(currentTime); | |
184 | var duration = formatTime(audioPlayer.audioElement.duration); | |
185 | audioPlayer.imageElement.parent() | |
186 | .find('.audio-currentTime') | |
187 | .text(time + '/' + duration); | |
a9d84d4c JW |
188 | }; |
189 | ||
190 | function formatTime(seconds) { | |
97e40b52 JW |
191 | /** |
192 | * Format a time duration in (hh:)?mm:ss manner | |
193 | */ | |
a9d84d4c JW |
194 | var h = Math.floor(seconds / (60 * 60)); |
195 | var m = Math.floor((seconds - h * 60 * 60) / 60); | |
196 | var s = Math.round(seconds - h * 60 * 60 - m * 60); | |
197 | return '' + (h ? (h < 10 ? '0' + h : h) + ':' : '') + (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s); | |
198 | } | |
199 | ||
97e40b52 JW |
200 | audioPlayer.formatTime = formatTime; |
201 | ||
a9d84d4c JW |
202 | audioPlayer.attachToImage = function (imageElement) { |
203 | /** | |
204 | * Attach the player to an image element | |
205 | */ | |
206 | console.log(imageElement); | |
97e40b52 | 207 | var im = $(imageElement); |
a9d84d4c | 208 | audioPlayer.imageElement = im; |
97e40b52 | 209 | |
a9d84d4c JW |
210 | }; |
211 | })(audioPlayer); | |
212 | ||
213 | $(document).ready(function () { | |
deea3f66 JW |
214 | if (!$('.audio-media').length) { |
215 | return; | |
216 | } | |
217 | ||
218 | console.log('Initializing audio player'); | |
219 | ||
a9d84d4c JW |
220 | audioElements = $('.audio-media .audio-player'); |
221 | audioPlayer.init(audioElements[0]); | |
222 | audioPlayer.attachToImage($('.audio-spectrogram img')[0]); | |
223 | }); |