mediagoblin/static/js/audio.js

   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;
  24
  25         console.log(audioElement);
  26
  27         attachEvents();
  28
  29         $(audioElement).hide();
  30     };
  31
  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);
  41
  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);
  52         });
  53     }
  54
  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;
  73
  74         ranges = new Array();
  75
  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             }
 106         }
 107     };
 108
 109     audioPlayer.onSeek = function (e) {
 110         /**
 111          * Callback handler for seek event, which is a .click() event on the
 112          * .seekbar element
 113          */
 114         console.log('onSeek', e);
 115
 116         var im = audioPlayer.imageElement;
 117         var pos = (e.offsetX || e.originalEvent.layerX) / im.width();
 118
 119         console.log('pos', (e.offsetX || e.originalEvent.layerX) / im.width())
 120         console.log('setting current time to',
 121             pos * audioPlayer.audioElement.duration)
 122
 123         audioPlayer.audioElement.currentTime = pos * audioPlayer.audioElement.duration;
 124         audioPlayer.audioElement.play();
 125         audioPlayer.setState(audioPlayer.PLAYING);
 126     };
 127
 128     audioPlayer.onEnded = function (e) {
 129         audioPlayer.setState(audioPlayer.PAUSED);
 130     }
 131
 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;
 152         } else {
 153             audioPlayer.state = state;
 154         }
 155
 156         switch (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')
 162                 break;
 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')
 168                 break;
 169         }
 170     };
 171
 172     audioPlayer.durationChange = function () {
 173         // ???
 174     };
 175
 176     audioPlayer.timeUpdate = function () {
 177         /**
 178          * Callback handler for the timeupdate event, responsible for
 179          * updating the playhead
 180          */
 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);
 190     };
 191
 192     function formatTime(seconds) {
 193         /**
 194          * Format a time duration in (hh:)?mm:ss manner
 195          */
 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);
 200     }
 201
 202     audioPlayer.formatTime = formatTime;
 203
 204     audioPlayer.attachToImage = function (imageElement) {
 205         /**
 206          * Attach the player to an image element
 207          */
 208         console.log(imageElement);
 209         var im = $(imageElement);
 210         audioPlayer.imageElement = im;
 211
 212     };
 213 })(audioPlayer);
 214
 215 $(document).ready(function () {
 216     if (!$('.audio-media').length) {
 217         return;
 218     }
 219
 220     console.log('Initializing audio player');
 221
 222     audioElements = $('.audio-media .audio-player');
 223     audioPlayer.init(audioElements[0]);
 224     audioPlayer.attachToImage($('.audio-spectrogram img')[0]);
 225 });