audio.js

// docs application object
var DocsApplication = function () {
  this.buttonEls = undefined;
  this.audioArray = [];
  this.audioManager = undefined;
  this.mediaModel = undefined;

  // initialize docs application
  this.initialize = function () {

    // initialize audiobrowser
    // object literal helpers
    AudioBrowser.initialize();

    // get current model set in MediaModel class
    this.setMediaModel(MediaModel.getModel());

    // create and store local bundle data
    var bundle = AudioBrowser.getBundle();

    // create and store reference to JSON audio node
    var audioModel = MediaModel.getModel().media.audio;

    // create new sound manager and pass
    // reference to AudioEventBus
    var soundManager = new WolvesSoundManager();
    AudioEventBus.currentAudioManager = soundManager;

    // iterate through each node
    $.each(audioModel, function (index, audio) {

      // store JSON data in params hash
      var params = {
        'tagType': audio.tagType,
        'id': audio.id,
        'alias': audio.alias,
        'text': null,
        'callback': null,
        'css': null,
        'classOf': audio.classOf,
        'src': audio.src,
        'bundle': audio,
        'parent': audio.parent,
        'docClass': audio.docClass
      };

      // create new instance of media tag,
      // initialize and pass it params hash
      var mediaTag = new MediaTag();
      mediaTag.initialize(params);

      // local params hash
      var addSoundParams = {
        'id': audio.id, // audio id
        'class': audio.classOf, // audio class
        'alias': audio.alias // audio alias
      };

      // add new sound instance to sound manager
      soundManager.addSound(addSoundParams);

      // create button and bind click event
      $('<a/>', {
        'class': 'btn btn-primary btn-large demo-audio-btn unselectable'
      })
        .text('play audio')
        .appendTo('#testdrive-buttons')
        .bind('click', function () {
          soundManager.play(audio.alias);
      });

      // create button and bind click event
      $('<a/>', {
        'class': 'btn btn-primary btn-large demo-audio-btn unselectable'
      })
        .text('pause audio')
        .appendTo('#testdrive-buttons')
        .bind('click', function () {
          soundManager.pause(audio.alias);
      });

      // create button and bind click event
      $('<a/>', {
        'class': 'btn btn-primary btn-large demo-audio-btn unselectable'
      })
        .text('stop audio')
        .appendTo('#testdrive-buttons')
        .bind('click', function () {
          soundManager.stop(audio.alias);
      });

      // create button and bind click event
      $('<a/>', {
        'class': 'btn btn-primary btn-large demo-audio-btn unselectable'
      })
        .text('mute audio')
        .appendTo('#testdrive-buttons')
        .bind('click', function () {
          soundManager.mute(audio.alias);
          AudioEventBus.onUpdateVolume("mute");
      });

      // create button and bind click event
      $('<a/>', {
        'class': 'btn btn-primary btn-large demo-audio-btn unselectable'
      })
        .text('unmute audio')
        .appendTo('#testdrive-buttons')
        .bind('click', function () {
          soundManager.unmute(audio.alias);
          AudioEventBus.onUpdateVolume("unmute");
      });

      // create button and bind click event
      $('<a/>', {
        'class': 'btn btn-primary btn-large demo-audio-btn unselectable'
      })
        .text('fadeMute audio')
        .appendTo('#testdrive-buttons')
        .bind('click', function () {
          soundManager.fadeMute(audio.alias, 1000);
          AudioEventBus.onUpdateVolume("mute");
      });

      // create button and bind click event
      $('<a/>', {
        'class': 'btn btn-primary btn-large demo-audio-btn unselectable'
      })
        .text('fadeUnmute audio')
        .appendTo('#testdrive-buttons')
        .bind('click', function () {
          soundManager.fadeUnmute(audio.alias, 1000);
          AudioEventBus.onUpdateVolume("unmute");
      });

      // create button and bind click event
      $('<a/>', {
        'class': 'btn btn-primary btn-large demo-audio-btn unselectable'
      })
        .text('adjustVolume (0)')
        .appendTo('#testdrive-buttons')
        .bind('click', function () {
          soundManager.adjustVolume(audio.alias, 0);
          AudioEventBus.onUpdateVolume("mute");
      });

      // create button and bind click event
      $('<a/>', {
        'class': 'btn btn-primary btn-large demo-audio-btn unselectable'
      })
        .text('adjustVolume (25%)')
        .appendTo('#testdrive-buttons')
        .bind('click', function () {
          soundManager.adjustVolume(audio.alias, '.25');
          AudioEventBus.onUpdateVolume("step-mute");
      });

      // create button and bind click event
      $('<a/>', {
        'class': 'btn btn-primary btn-large demo-audio-btn unselectable'
      })
        .text('adjustVolume (50%)')
        .appendTo('#testdrive-buttons')
        .bind('click', function () {
          soundManager.adjustVolume(audio.alias, '.50');
         AudioEventBus.onUpdateVolume("step-mute");
      });

      // create button and bind click event
      $('<a/>', {
        'class': 'btn btn-primary btn-large demo-audio-btn unselectable'
      })
        .text('adjustVolume (75%)')
        .appendTo('#testdrive-buttons')
        .bind('click', function () {
          soundManager.adjustVolume(audio.alias, '.75');
          AudioEventBus.onUpdateVolume("step-mute");
      });

      // create button and bind click event
      $('<a/>', {
        'class': 'btn btn-primary btn-large demo-audio-btn unselectable'
      })
        .text('adjustVolume (100%)')
        .appendTo('#testdrive-buttons')
        .bind('click', function () {
          soundManager.adjustVolume(audio.alias, '1');
          AudioEventBus.onUpdateVolume("step-mute");
      });

      // create button and bind click event
      $('<a/>', {
        'class': 'btn btn-primary btn-large demo-audio-btn unselectable'
      })
        .text('stepVolume (up)')
        .appendTo('#testdrive-buttons')
        .bind('click', function () {
          soundManager.stepVolume(audio.alias, "up");
          AudioEventBus.updateMuteIcon();
      });

      // create button and bind click event
      $('<a/>', {
        'class': 'btn btn-primary btn-large demo-audio-btn unselectable'
      })
        .text('stepVolume (down)')
        .appendTo('#testdrive-buttons')
        .bind('click', function () {
          soundManager.stepVolume(audio.alias, "down");
          AudioEventBus.updateMuteIcon();
      });
    });
  };

  // media model accessor
  this.getMediaModel = function () {
    return this.mediaModel;
  };

  // media model mutator
  this.setMediaModel = function (mediaModel) {
    this.mediaModel = mediaModel;
  };

  this.getAudioTagsReference = function () {
    // create and store reference to all button instances in the DOM
    this.buttonEls = document.body.getElementsByTagName('button');

    var that = this;
    $.each(this.buttonEls, function (index, object) {
      that.bindAudioButtons(object.id);
    });
  };

  this.bindAudioButtons = function (buttonId) {
    var that = this;
    $(buttonId).bind('click', that.playAudio);
  };
};

// audio content stored in media model
MediaModel = {

  // return JSON data interchange
  getModel: function () {
    return {
      "media": {
        "audio": [{
          "tagType": "audio",
          "id": "audio_01",
          "alias": "WOLVES_DEMO_AUDIO",
          "src": "audio/wolves",
          "classOf": "demo-audio",
          "parent": "#testdrive-docs",
          "docClass": ".document-element"
        }]
      }
    }
  }
}

// audio event bus object literal
var AudioEventBus = {

  // model properties
  audioArray: [],
  currentAudioManager: undefined,

  // volume update event
  onUpdateVolume: function (update){
    switch(update){
      case "mute":
        $("#mute-icon").stop().animate({ opacity: 1 });
      break;
      case "unmute":
        $("#mute-icon").stop().animate({ opacity: 0 });
      break;
      case "step-mute":
        this.updateMuteIcon();
      break;
    }
  },

  // update mute icon visibility
  updateMuteIcon: function(){
    var firstAudio = document.getElementsByTagName('audio')[0];
    if (firstAudio){
      if (firstAudio.volume === 0){
        AudioEventBus.onUpdateVolume("mute");
      }
      else {
        AudioEventBus.onUpdateVolume("unmute");
      }
    }
  }
};

// audio browser object literal
var AudioBrowser = {

  // model properties
  browserType: undefined,
  userAgent: undefined,
  bundle: undefined,

  initialize: function () {
    this.userAgent = navigator.userAgent.toString().toLowerCase();
    this.detectBrowser();
  },

  checkForWebkit: function () {
    if ($.browser.webkit && !! window.chrome) {
      this.setBundle(AudioBrowserBundle._IS_WEBKIT_SETUP());
    } else if ($.browser.webkit && !window.chrome) {
      this.setBundle(AudioBrowserBundle._IS_SAFARI_SETUP());
    }
  },

  checkForMozilla: function () {
    if (this.userAgent.indexOf('firefox') != -1) {
      this.setBundle(AudioBrowserBundle._IS_MOZILLA_SETUP());
    }
  },

  detectBrowser: function () {
    if ($.browser.msie && $.browser.version >= 9.0) {
      this.setBundle(AudioBrowserBundle._IS_IE_9_OR_GREATER_SETUP());
    } else if ($.browser.msie && $.browser.version < 9.0) {
      this.setBundle(AudioBrowserBundle._IS_LESS_THAN_IE_9_SETUP());
    } else if ($.browser.webkit) {
      this.checkForWebkit();
    } else if ($.browser.mozilla) {
      this.checkForMozilla();
    } else {
      this.setBundle(AudioBrowserBundle._OTHER_SETUP());
    }
  },

  getBundle: function () {
    return this.bundle;
  },

  setBundle: function (bundle) {
    this.bundle = bundle;
  }
};

// audio browser bundle object literal
var AudioBrowserBundle = {

  _IS_LESS_THAN_IE_9_SETUP: function () {
    return {
      alias: "_IS_LESS_THAN_IE_9",
      audioType: "audio/mp3",
      extention: ".mp3"
    }
  },

  _IS_IE_9_OR_GREATER_SETUP: function () {
    return {
      alias: "_IS_IE_9_OR_GREATER",
      audioType: "audio/mp3",
      extention: ".mp3"
    }
  },

  _IS_WEBKIT_SETUP: function () {
    return {
      alias: "_IS_WEBKIT",
      audioType: "audio/mp3",
      extention: ".mp3"
    }
  },

  _IS_SAFARI_SETUP: function () {
    return {
      alias: "_IS_SAFARI",
      audioType: "audio/mp4",
      extention: ".mp3"
    }
  },

  _IS_MOZILLA_SETUP: function () {
    return {
      alias: "_IS_MOZILLA",
      audioType: "audio/ogg",
      extention: ".ogg"
    }
  },

  _IS_OTHER_SETUP: function () {
    return {
      alias: "_IS_OTHER",
      audioType: "audio/mp3",
      extention: ".mp3"
    }
  }
}

// media tag object
var MediaTag = function () {
  this.alias = undefined;
  this.extention = undefined;
  this.type = undefined;
  this.src = undefined;
  this.id = undefined;
  this.parent = undefined;
  this.classOf = undefined;
  this.mediaArray = [];
  this.mediaTypes = {};
  this.type = undefined;
  this.tagType = undefined;

  this.initialize = function (params) {
    this.alias = params['alias'];
    this.extention = AudioBrowser.getBundle().extention;
    this.audioType = AudioBrowser.getBundle().audioType;
    this.bundle = params['bundle'];
    this.tagType = params['tagType'];
    this.src = params['src'];
    this.id = params['id'];
    this.parent = params['parent'];
    this.classOf = params['classOf'];
    this.text = params['text'];
    this.setTagType(this, 'loop'); // passing in scope and looping param
  };

  this.setTagType = function (scope, looping) {
    var loop = looping;
    this.mediaTypes = {
      button: function () {
        scope.createButtonElement()
      },
      audio: function () {
        scope.createAudioTag(looping)
      },
      video: function () {
        scope.createVideoTag()
      },
      div: function () {
        scope.createDivTag()
      }
    }
    this.mediaTypes[this.tagType].apply();
  };

  this.createAudioTag = function (looping) {
    var loop = looping;
    var audio = $('<audio/>', {
      'id': this.id,
      'class': this.classOf,
      'name': this.alias,
      'preload': 'auto',
      'autobuffer': 'autobuffer',
      'loop': loop,
      'controls': 'controls'
    }).appendTo(this.parent);

    this.createSourceTag(this.src);
    this.mediaArray.push(audio);
    return audio;
  };

  this.addHash = function (str) {
    var hash = '#';
    var string = hash.concat(str);
    return string;
  };

  this.createSourceTag = function (src) {
    var parent = this.addHash(this.id);
    var source = $('<source/>', {
      'src': this.src + this.extention,
      'type': this.audioType
    })
      .appendTo(parent);
    return source;
  };

  this.createVideoTag = function () {
    var video = $('<video/>')
      .appendTo('#video');
    return video;
  };

  this.createDivTag = function () {
    var div = $('<div/>')
      .appendTo('body');
    return div;
  };

  this.createButtonElement = function () {
    var button = $('<button/>', {
      'id': this.id,
      'controls': 'controls',
      'name': this.alias,
      'class': this.classOf,
      'preload': 'auto',
      'autobuffer': 'autobuffer',
      'loop': 'loop',
      'style': 'font: bold 14px Open Sans'
    }).text(this.text)
      .appendTo(this.parent);
  };
};