/**
* Browser sound library which blended HTMLVideo and HTMLAudio and WebAudio
*
* The MIT License (MIT)
*
* Copyright (c) 2014-2015 CyberAgent, Inc.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy of
* this software and associated documentation files (the "Software"), to deal in
* the Software without restriction, including without limitation the rights to
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
* the Software, and to permit persons to whom the Software is furnished to do so,
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*
*
* @license MIT
* @author Kei Funagayama <funagayama_kei@cyberagent.co.jp>
*/
(function (w) {
'use strict';
var none = function () {};
var isRequire = !!(typeof define === 'function' && define.amd);
var SPRITE_SEPARATOR = '-';
var LOGGER_DEFAULT_SEPARATOR = '-';
var getSpriteName = function (name) {
return {
prefix: name.substring(0, name.indexOf(SPRITE_SEPARATOR)),
suffix: name.substring(name.indexOf(SPRITE_SEPARATOR) + 1),
name: name
};
};
/**
* trace: 1
* debug: 2
* info: 3
* warn: 4
* error: 5
*
*/
var LOG_LEVEL = 3; // default: info
var Logger = (function () {
var ArrayProto = Array.prototype;
var slice = ArrayProto.slice;
function Logger(prefix) {
this.prefix = prefix || LOGGER_DEFAULT_SEPARATOR;
this.prefix = '[' + this.prefix + ']';
}
/**
* Log output (trace)
* @memberof Logger
* @name trace
*/
Logger.prototype.trace = function () {
if (LOG_LEVEL <= 1) {
if (!w.console) {
} else if (w.console.trace) {
w.console.trace('[TRACE]', this.prefix, slice.call(arguments).join(' '));
} else if (w.console.debug) {
w.console.debug('[TRACE]', this.prefix, slice.call(arguments).join(' '));
} else {
w.console.log('[TRACE]', this.prefix, slice.call(arguments).join(' '));
}
}
};
/**
* Log output (debug)
* @memberof Logger
* @name debug
*/
Logger.prototype.debug = function () {
if (LOG_LEVEL <= 2) {
if (!w.console) {
} else if (w.console.debug) {
w.console.debug('[DEBUG]', this.prefix, slice.call(arguments).join(' '));
} else {
w.console.log('[DEBUG]', this.prefix, slice.call(arguments).join(' '));
}
}
};
/**
* Log output (info)
* @memberof Logger
* @name info
*/
Logger.prototype.info = function () {
if (LOG_LEVEL <= 3) {
w.console && w.console.info('[INFO]', this.prefix, slice.call(arguments).join(' '));
}
};
/**
* Log output (warn)
* @memberof Logger
* @name warn
*/
Logger.prototype.warn = function () {
if (LOG_LEVEL <= 4) {
w.console && w.console.warn('[WARN]', this.prefix, slice.call(arguments).join(' '));
}
};
/**
* Log output (error)
* @memberof Logger
* @name error
*/
Logger.prototype.error = function () {
if (LOG_LEVEL <= 5) {
w.console && w.console.error('[ERROR]', this.prefix, slice.call(arguments).join(' '));
}
};
return Logger;
})();
//////////////////////////////////
// Boombox Class
var Boombox = (function () {
function Boombox() {
/**
* Version
* @memberof Boombox
* @name VERSION
*/
this.VERSION = '1.0.9';
/**
* Loop off
*
* @memberof Boombox
* @name LOOP_NOT
* @constant
* @type {Interger}
*/
this.LOOP_NOT = 0;
/**
* orignal loop
*
* @memberof Boombox
* @name LOOP_ORIGINAL
* @constant
* @type {Interger}
*/
this.LOOP_ORIGINAL = 1;
/**
* Native loop
*
* @memberof Boombox
* @name LOOP_NATIVE
* @constant
* @type {Interger}
*/
this.LOOP_NATIVE = 2;
/**
* Turn off the power.
*
* @memberof Boombox
* @name POWER_OFF
* @constant
* @type {Boolean}
*/
this.POWER_OFF = false;
/**
* Turn on the power.
*
* @memberof Boombox
* @name POWER_ON
* @constant
* @type {Boolean}
*/
this.POWER_ON = true;
/**
* It does not support the media type.
*
* @memberof Boombox
* @name ERROR_MEDIA_TYPE
* @constant
* @type {Interger}
*/
this.ERROR_MEDIA_TYPE = 0;
/**
* Hit the filter
*
* @memberof Boombox
* @name ERROR_HIT_FILTER
* @constant
* @type {Interger}
*/
this.ERROR_HIT_FILTER = 1;
/**
* Threshold to determine whether sound source is finished or not
*
* @memberof Boombox
* @name THRESHOLD
* @type {Interger}
*/
this.THRESHOLD = 0.2;
/**
* flag setup
* @memberof Boombox
* @name setuped
* @type {Boolean}
*/
this.setuped = false;
/**
* AudioContext
* @memberof Boombox
* @name AudioContext
* @type {AudioContext}
*/
this.AudioContext = w.AudioContext || w.webkitAudioContext;
/**
* Environmental support information
*
* @memberof Boombox
* @name support
* @type {Object}
*/
this.support = {
mimes: [],
webaudio: {
use: !!this.AudioContext
},
htmlaudio: {
use: false
},
htmlvideo: {
use: false
}
};
if (this.support.webaudio.use) {
/**
* WebAudioContext instance (singleton)
*
* @memberof Boombox
* @name WEB_AUDIO_CONTEXT
* @type {AudioContext}
*/
this.WEB_AUDIO_CONTEXT = new this.AudioContext();
if (!this.WEB_AUDIO_CONTEXT.createGain) {
this.WEB_AUDIO_CONTEXT.createGain = this.WEB_AUDIO_CONTEXT.createGainNode;
}
}
// Check HTML Audio support.
try {
/**
* Test local HTMLAudio
* @memberof Boombox
* @name _audio
* @type {HTMLAudioElement}
*/
if (new w.Audio().canPlayType) {
this.support.htmlaudio.use = true;
} else {
this.support.htmlaudio.use = false;
}
} catch (e) {
this.support.htmlaudio.use = false;
}
// Check HTML Video support.
try {
/**
* Test local HTMLVideo
* @memberof Boombox
* @name _video
* @type {HTMLVideoElement}
*/
if (document.createElement('video').canPlayType) {
this.support.htmlvideo.use = true;
} else {
this.support.htmlvideo.use = false;
}
} catch (e) {
this.support.htmlvideo.use = false;
}
/**
* Audio instance pool
*
* @memberof Boombox
* @name pool
*/
this.pool = {};
/**
* Audio instance of waiting
*
* @memberof Boombox
* @name waits
*/
this.waits = [];
/**
* Visibility of browser
*
* @memberof Boombox
* @name visibility
*/
this.visibility = {
hidden: undefined,
visibilityChange: undefined
};
/**
* State of boombox
*
* @memberof Boombox
* @name state
* @type {Object}
*/
this.state = {
power: this.POWER_ON
};
/**
* Filtering function
*
* @memberof Boombox
* @name filter
* @type {Object}
*/
this.filter = {};
}
//// prototype
/**
* The availability of the WebLAudio
*
* @memberof Boombox
* @name isWebAudio
* @return {Boolean}
*/
Boombox.prototype.isWebAudio = function () {
return this.support.webaudio.use;
};
/**
* The availability of the HTMLAudio
*
* @memberof Boombox
* @name isHTMLAudio
* @return {Boolean}
*/
Boombox.prototype.isHTMLAudio = function () {
return this.support.htmlaudio.use;
};
/**
* The availability of the HTMLVideo
*
* @memberof Boombox
* @name isHTMLVideo
* @return {Boolean}
*/
Boombox.prototype.isHTMLVideo = function () {
return this.support.htmlvideo.use;
};
/**
* boombox to manage, Audio is playing
*
* @memberof Boombox
* @name isPlayback
* @return {Boolean}
*/
Boombox.prototype.isPlayback = function () {
var self = this;
var res = false;
for (var name in this.pool) {
if (this.pool[name].isPlayback()) {
res = true;
break;
}
}
return res;
};
/**
* Setup processing
*
* @memberof Boombox
* @name setup
* @param {Object} options
* @return {Boombox}
* @example
* var options = {
* webaudio: {use: Boolean},
* htmlaudio: {use: Boolean},
* htmlvideo: {use: Boolean},
* loglevel: Number, ) trace:1, debug:2, info:3, warn:4, error:5
* }
*
*/
Boombox.prototype.setup = function setup(options) {
var self = this;
options = options || {};
if (typeof options.threshold !== 'undefined') {
this.THRESHOLD = options.threshold;
}
if (typeof options.loglevel !== 'undefined') {
LOG_LEVEL = options.loglevel;
}
this.logger = new Logger('Boombox '); // log
if (this.setuped) {
this.logger.warn('"setup" already, are running.');
return this;
}
if (options.webaudio) {
if (typeof options.webaudio.use !== 'undefined') {
this.support.webaudio.use = options.webaudio.use;
this.logger.info('options.webaudio.use:', this.support.webaudio.use);
}
}
if (options.htmlaudio) {
if (typeof options.htmlaudio.use !== 'undefined') {
this.support.htmlaudio.use = options.htmlaudio.use;
this.logger.info('options.htmlaudio.use: ', this.support.htmlaudio.use);
}
}
if (options.htmlvideo) {
if (typeof options.htmlvideo.use !== 'undefined') {
this.support.htmlvideo.use = options.htmlvideo.use;
this.logger.info('options htmlvideo', this.support.htmlvideo);
}
}
// scan browser
this._browserControl();
// Log: WebAudio support.
if (this.support.webaudio.use) {
this.logger.debug('WebAudio use support.');
} else {
this.logger.debug('WebAudio use not support.');
}
// Log: HTMLAudio support.
if (this.support.htmlaudio.use) {
this.logger.debug('HTMLAudio use support.');
} else {
this.logger.debug('HTMLAudio use not support.');
}
// Log: HTMLVideo support.
if (this.support.htmlvideo.use) {
this.logger.debug('HTMLVideo use support.');
} else {
this.logger.debug('HTMLVideo use not support.');
}
//this.logger.debug('support:', JSON.stringify(this.support));
this.setuped = true;
return this;
};
/**
* Get Audio instance
*
* @memberof Boombox
* @name get
* @param {String} name audio name
* @return {WebAudio|HTMLAudio|HTMLVideo}
*/
Boombox.prototype.get = function (name) {
return this.pool[name];
};
/**
* Loading audio
*
* @memberof Boombox
* @name load
* @param {String} name audio name
* @param {Object} options Audio options
* @param {Boolean} useHTMLVideo forced use HTMLVideo
* @param {Function} callback
* @return {Boombox}
* @example
* var options = {
* src: [
* {
* media: 'audio/mp4',
* path: 'http://example.com/sample.m4a',
* }
* ]
* filter: ['android2', 'android4', 'ios5', 'ios6', 'ios7' ]
* }
*
*/
Boombox.prototype.load = function (name, options, useHTMLVideo, callback) {
if (typeof arguments[2] === 'function') {
callback = useHTMLVideo;
useHTMLVideo = null;
}
if (!this.setuped) {
callback && callback(new Error('setup incomplete boombox. run: boombox.setup(options)'));
return this;
}
if (this.pool[name]) {
this.logger.trace('audio pool cache hit!!', name);
return callback && callback(null, this.pool[name]);
}
// check support media type
var src = this.useMediaType(options.src);
if (src) {
options.media = src.media;
options.src = src.path;
}
// forced use HTMLVideo
if (useHTMLVideo && this.isHTMLVideo()) {
var htmlvideo = new boombox.HTMLVideo(name);
if (!src) {
htmlvideo.state.error = this.ERROR_MEDIA_TYPE;
}
if (typeof htmlvideo.state.error === 'undefined' && !this.runfilter(htmlvideo, options)) {
htmlvideo.load(options, callback);
} else {
return callback && callback(new Error(htmlvideo.state.error), htmlvideo);
}
this.setPool(name, htmlvideo, boombox.HTMLVideo);
return this;
}
//////////////////////
if (this.isWebAudio()) {
this.logger.debug("use web audio");
var webaudio = new boombox.WebAudio(name);
if (!src) {
webaudio.state.error = this.ERROR_MEDIA_TYPE;
}
if (typeof webaudio.state.error === 'undefined' && !this.runfilter(webaudio, options)) {
webaudio.load(options, callback);
} else {
return callback && callback(new Error(webaudio.state.error), webaudio);
}
this.setPool(name, webaudio, boombox.WebAudio);
} else if (this.isHTMLAudio()) {
this.logger.debug("use html audio");
var htmlaudio = new boombox.HTMLAudio(name);
if (!src) {
htmlaudio.state.error = this.ERROR_MEDIA_TYPE;
}
if (typeof htmlaudio.state.error === 'undefined' && !this.runfilter(htmlaudio, options)) {
htmlaudio.load(options, callback);
} else {
return callback && callback(new Error(htmlaudio.state.error), htmlaudio);
}
this.setPool(name, htmlaudio, boombox.HTMLAudio);
} else {
callback && callback(new Error('This environment does not support HTMLAudio, both WebAudio both.'), this);
}
return this;
};
/**
* remove audio
*
* @memberof Boombox
* @name remove
* @param {String} name
* @return {Boombox}
*/
Boombox.prototype.remove = function (name) {
if (this.pool[name]) { // change object
this.logger.trace('Remove Audio that is pooled. name', name);
this.pool[name].dispose && this.pool[name].dispose();
this.pool[name] = undefined;
delete this.pool[name];
}
return this;
};
/**
* Set pool
*
* @memberof Boombox
* @name setPool
* @param {String} name
* @param {AudioContext|HTMLAudioElement|HTMLVideoElement} obj Browser audio instance
* @param {WebAudio|HTMLAudio|HTMLVideo} Obj Boombox audio class
* @return {Boombox}
*/
Boombox.prototype.setPool = function (name, obj, Obj) {
if (obj.isParentSprite()) {
for (var r in this.pool) {
if (!!~r.indexOf(name + SPRITE_SEPARATOR)) {
delete this.pool[r];
}
}
for (var n in obj.sprite.options) {
var cname = name + SPRITE_SEPARATOR + n;
var audio = new Obj(cname, obj);
this.pool[audio.name] = audio;
}
}
this.remove(name);
this.pool[name] = obj;
return this;
};
/**
* Run filter
*
* @memberof Boombox
* @name runfilter
* @param {WebAudio|HTMLAudio|HTMLVideo} audio Boombox audio instance
* @param {Object} options
* @return {Boolean}
*/
Boombox.prototype.runfilter = function (audio, options) {
var hit;
var list = options.filter || [];
for (var i = 0; i < list.length; i++) {
var name = list[i];
var fn = this.filter[name];
if (!fn) {
this.logger.warn('filter not found. name:', name);
return;
}
this.logger.debug('filter run. name:', name);
if (fn(name, audio, options)) {
hit = name;
break;
}
}
if (hit) {
audio.state.error = this.ERROR_HIT_FILTER; // set error
this.logger.warn('Hit the filter of', hit);
return true;
}
return false;
};
/**
* check support media type
*
* @memberof Boombox
* @name useMediaType
* @param {Array} src audio file data
* @return {Object|undefined}
*/
Boombox.prototype.useMediaType = function (src) {
for (var i = 0; i < src.length; i++) {
var t = src[i];
if (new w.Audio().canPlayType(t.media)) {
return t;
} else {
this.logger.warn('skip audio type.', t.media);
}
}
return undefined;
};
/**
* pause sound playback in managing boombox
*
* @memberof Boombox
* @name pause
* @return {boombox}
*/
Boombox.prototype.pause = function () {
var self = this;
this.logger.trace('pause');
for (var name in this.pool) {
var audio = this.pool[name];
audio.pause();
self.waits.push(name);
}
return this;
};
/**
* resume the paused, to manage the boombox
*
* @memberof Boombox
* @name resume
* @return {Boombox}
*/
Boombox.prototype.resume = function () {
this.logger.trace('resume');
var name = this.waits.shift();
if (name && this.pool[name]) {
this.pool[name].resume();
}
if (0 < this.waits.length) {
this.resume();
}
return this;
};
/**
* Change all audio power on/off
*
* @memberof Boombox
* @name power
* @param {Boolean} p power on/off. boombox.(POWER_ON|POWER_OFF)
* @return {Boombox}
*/
Boombox.prototype.power = function (p) {
var self = this;
this.logger.trace('power:', this.name, 'flag:', p);
for (var name in this.pool) {
var audio = this.pool[name];
audio.power(p);
}
this.state.power = p;
return this;
};
/**
* audio change volume.
*
* @memberof Boombox
* @method
* @name volume
* @param {Interger} v volume
* @return {Boombox}
*/
Boombox.prototype.volume = function (v) {
var self = this;
this.logger.trace('volume:', this.name, 'volume:', v);
for (var name in this.pool) {
var audio = this.pool[name];
audio.volume(v);
}
return this;
};
/**
* Firing in the occurrence of events VisibilityChange
*
* @memberof Boombox
* @name onVisibilityChange
* @param {Event} e event
*/
Boombox.prototype.onVisibilityChange = function (e) {
this.logger.trace('onVisibilityChange');
if (document[this.visibility.hidden]) {
this.pause();
} else {
this.resume();
}
};
/**
* Firing in the occurrence of events window.onfocus
*
* @memberof Boombox
* @name onFocus
* @param {Event} e event
*/
Boombox.prototype.onFocus = function (e) {
this.logger.trace('onFocus');
this.resume();
};
/**
* Firing in the occurrence of events window.onblur
*
* @memberof Boombox
* @name onBlur
* @param {Event} e event
*/
Boombox.prototype.onBlur = function (e) {
this.logger.trace('onBlur');
this.pause();
};
/**
* Firing in the occurrence of events window.onpageshow
*
* @memberof Boombox
* @name onPageShow
* @param {Event} e event
*/
Boombox.prototype.onPageShow = function (e) {
this.logger.trace('onPageShow');
this.resume();
};
/**
* Firing in the occurrence of events window.onpagehide
*
* @memberof Boombox
* @name onPageHide
* @param {Event} e event
*/
Boombox.prototype.onPageHide = function (e) {
this.logger.trace('onPageHide');
this.pause();
};
/**
* Scan browser differences
*
* @memberof Boombox
* @name _browserControl
* @return {Boombox}
*/
Boombox.prototype._browserControl = function () {
var self = this;
if (typeof document.hidden !== "undefined") {
this.visibility.hidden = "hidden";
this.visibility.visibilityChange = "visibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
this.visibility.hidden = "webkitHidden";
this.visibility.visibilityChange = "webkitvisibilitychange";
} else if (typeof document.mozHidden !== "undefined") {
this.visibility.hidden = "mozHidden";
this.visibility.visibilityChange = "mozvisibilitychange";
} else if (typeof document.msHidden !== "undefined") {
this.visibility.hidden = "msHidden";
this.visibility.visibilityChange = "msvisibilitychange";
}
// Visibility.hidden
if (this.visibility.hidden) {
document.addEventListener(this.visibility.visibilityChange, function (e) {
self.onVisibilityChange(e);
}, false);
}
// focus/blur
if (typeof window.addEventListener !== "undefined") {
window.addEventListener('focus', function (e) {
self.onFocus(e);
}, false);
window.addEventListener('blur', function (e) {
self.onBlur(e);
}, false);
} else {
window.attachEvent('onfocusin', function (e) {
self.onFocus(e);
}, false);
window.attachEvent('onfocusout', function (e) {
self.onBlur(e);
}, false);
}
// onpage show/hide
window.onpageshow = function (e) {
self.onPageShow(e);
};
window.onpagehide = function (e) {
self.onPageHide(e);
};
//
return this;
};
/**
* Adding filtering
*
* @memberof Boombox
* @name addFilter
* @param {String} filter name
* @param {Function} filter function
* @return {Boombox}
*/
Boombox.prototype.addFilter = function (name, fn) {
this.filter[name] = fn;
return this;
};
/**
* dispose
*
* @memberof Boombox
* @name dispose
*/
Boombox.prototype.dispose = function () {
for (var name in this.pool) {
var audio = this.pool[name];
audio.dispose && audio.dispose();
}
delete this.VERSION;
delete this.setuped;
delete this.support.mimes;
delete this.support.webaudio.use;
this.WEB_AUDIO_CONTEXT && delete this.WEB_AUDIO_CONTEXT;
delete this.support.webaudio;
delete this.support.htmlaudio.use;
delete this.support.htmlaudio;
delete this.support.htmlvideo.use;
delete this.support.htmlvideo;
delete this.support;
delete this.pool;
delete this.waits;
delete this.visibility;
delete this.state.power;
delete this.state;
delete this.filter;
};
return Boombox;
})();
//////////////////////////////////
// New!!!!
var boombox = new Boombox();
//////////////////////////////////
// HTMLAudio Class
var HTMLAudio = (function () {
function HTMLAudio(name, parent) {
/**
* logger
* @memberof HTMLAudio
* @name logger
*/
this.logger = new Logger('HTMLAudio');
/**
* unique name
* @memberof HTMLAudio
* @name name
*/
this.name = name;
/**
* SetTimeout#id pool running
* @memberof HTMLAudio
* @name _timer
*/
this._timer = {}; // setTimeout#id
/**
* AudioSprite option data
* @memberof HTMLAudio
* @name sprite
*/
this.sprite = undefined;
if (parent) {
var sprite_n = getSpriteName(name);
// change Sprite
var current = parent.sprite.options[sprite_n.suffix];
/**
* Reference of the parent instance HTMLAudio
* @memberof HTMLAudio
* @name parent
*/
this.parent = parent; // ref
/**
* Reference of the parent state instance HTMLAudio
* @memberof HTMLAudio
* @name state
*/
this.state = this.parent.state; // ref
/**
* Reference of the parent HTMLAudioElement instance HTMLAudio
* @memberof HTMLAudio
* @name state
*/
this.$el = this.parent.$el; // ref
//this.onEnded = this.parent.onEnded; // TODO: ref
this.sprite = new Sprite(undefined, current); // new
} else {
this.state = {
time: {
playback: undefined, // Playback start time (unixtime)
pause: undefined // // Seek time paused
},
loop: boombox.LOOP_NOT, // Loop playback flags
power: boombox.POWER_ON, // Power flag
loaded: false, // Audio file is loaded
error: undefined // error state
};
this.$el = new w.Audio();
}
}
////
/**
* Loading html audio
*
* @memberof HTMLAudio
* @name load
* @method
* @param {Object} options
* @param {Function} callback
* @return {HTMLAudio}
* @example
* .load({
* src: '', // required
* type: '', // optional
* media: '', // optional
* preload: 'auto', // optional
* autoplay: false, // optional
* mediagroup: 'boombox', // optional
* loop: false, // optional
* muted: false, // optional
* crossorigin: "anonymous", // optional
* controls: false // optional
* timeout: 15 * 1000 // optional default) 15s
* }, function callback() {});
*
*/
HTMLAudio.prototype.load = function (options, callback) {
var cb = callback || none;
if (this.parent) { // skip audiosprite children
cb(null, this);
return this;
}
options = options || {
//src: '',
//type: '',
//media: '',
preload: 'auto', // auto, metadata, none
autoplay: false, // no-auto
//mediagroup: 'boombox',
loop: false,
muted: false,
//crossorigin: "anonymous",
controls: false
};
var timeout = options.timeout || 15 * 1000;
delete options.timeout;
if (options.spritemap) { // Sprite ON
this.sprite = new Sprite(options.spritemap);
delete options.spritemap;
}
for (var k in options) {
var v = options[k];
this.logger.trace('HTMLAudioElement attribute:', k, v);
this.$el[k] = v;
}
var self = this;
// Debug log
/**
["loadstart",
"progress",
"suspend",
"load",
"abort",
"error",
"emptied",
"stalled",
"play",
"pause",
"loadedmetadata",
"loadeddata",
"waiting",
"playing",
"canplay",
"canplaythrough",
"seeking",
"seeked",
"timeupdate",
"ended",
"ratechange",
"durationchange",
"volumechange"].forEach(function (eventName) {
self.$el.addEventListener(eventName, function () {
console.log('audio: ' + eventName);
}, true);
});
*/
var hookEventName = 'canplay';
var ua_ios = window.navigator.userAgent.match(/(iPhone\sOS)\s([\d_]+)/);
if (ua_ios && 0 < ua_ios.length) { // IOS Safari
hookEventName = 'suspend';
}
this.logger.trace('hook event name:', hookEventName);
this.$el.addEventListener(hookEventName, function _canplay(e) {
self.logger.trace('processEvent ' + e.target.id + ' : ' + e.type, 'event');
self.state.loaded = true;
self.$el.removeEventListener(hookEventName, _canplay, false);
return cb(null, self);
});
this.$el.addEventListener(
'ended',
function (e) {
self._onEnded(e);
},
false);
// communication time-out
setTimeout(function () {
if (self.$el && self.$el.readyState !== 4) {
self.$el.src = '';
cb(new Error('load of html audio file has timed out. timeout:' + timeout), self);
cb = function () {};
}
}, timeout);
this.$el.load();
// setInterval(function () {
// console.error(self.name,
// 'playback:', self.isPlayback(),
// 'stop:', self.isStop(),
// 'pause:', self.isPause(),
// 'power:', self.state.power
// );
// }, 100);
return this;
};
//HTMLAudio.prototype.addTextTrack = function () { /**...*/ };
//HTMLAudio.prototype.canPlayType = function () { /**...*/ };
//////////
/**
* Is use.
*
* @memberof HTMLAudio
* @method
* @name isUse
* @return {Boolean}
*/
HTMLAudio.prototype.isUse = function () {
if (this.state.power === boombox.POWER_OFF || boombox.state.power === boombox.POWER_OFF) {
return false;
}
if (!this.state.loaded || typeof this.state.error !== 'undefined') {
return false;
}
return true;
};
/**
* Is playing.
*
* @memberof HTMLAudio
* @method
* @name isPlayback
* @return {Boolean}
*/
HTMLAudio.prototype.isPlayback = function () {
return !!this.state.time.playback;
};
/**
* Is stoped.
*
* @memberof HTMLAudio
* @method
* @name isStop
* @return {Boolean}
*/
HTMLAudio.prototype.isStop = function () {
return !this.state.time.playback;
};
/**
* Is paused.
*
* @memberof HTMLAudio
* @method
* @name isPause
* @return {boolean}
*/
HTMLAudio.prototype.isPause = function () {
return !!this.state.time.pause;
};
/**
* Loop flag
*
* @memberof HTMLAudio
* @method
* @name isLoop
* @return {Interger}
*/
HTMLAudio.prototype.isLoop = function () {
return (0 < this.state.loop);
};
/**
* Is sprite of the parent
*
* @memberof HTMLAudio
* @method
* @name isParentSprite
* @return {Boolean}
*/
HTMLAudio.prototype.isParentSprite = function () {
return !!(!this.parent && this.sprite && !this.sprite.current);
};
/**
* Is sprite
*
* @memberof HTMLAudio
* @method
* @name isSprite
* @return {Boolean}
*/
HTMLAudio.prototype.isSprite = function () {
return !!(this.parent && this.sprite && this.sprite.current);
};
/**
* Clear all the setTimeout
*
* @memberof HTMLAudio
* @method
* @name clearTimerAll
* @return {HTMLAudio}
*/
HTMLAudio.prototype.clearTimerAll = function () {
for (var k in this._timer) {
var id = this._timer[k];
this.clearTimer(k);
}
return this;
};
/**
* Clear specified setTimeout
*
* @memberof HTMLAudio
* @method
* @name clearTimer
* @param {String} name
* @return {Interger}
*/
HTMLAudio.prototype.clearTimer = function (name) {
var id = this._timer[name];
if (id) {
this.logger.debug('remove setTimetout:', id);
clearTimeout(id);
delete this._timer[name];
}
return id;
};
/**
* Save the specified setTimeout
*
* @memberof HTMLAudio
* @method
* @name setTimer
* @param {String} name
* @param {Interger} id setTimeout#id
* @return {Interger}
*/
HTMLAudio.prototype.setTimer = function (name, id) {
if (this._timer[name]) {
this.logger.warn('Access that is not expected:', name, id);
}
this._timer[name] = id;
return this._timer[name];
};
//////////
/**
* audio play.
*
* @memberof HTMLAudio
* @method
* @name play
* @param {Boolean} resume resume flag
* @return {HTMLAudio}
*/
HTMLAudio.prototype.play = function (resume) {
if (!this.isUse()) {
this.logger.debug('skip play:', this.name, 'state can not be used');
return this;
} // skip!!
if (this.isPlayback()) {
this.logger.debug('skip play:', this.name, 'is playing');
return this;
}
var self = this;
var type = 'play';
var fn = none;
this.state.time.playback = Date.now();
if (resume && this.state.time.pause) {
// resume
this.setCurrentTime(this.state.time.pause);
if (this.isSprite()) {
var _pause = this.state.time.pause;
fn = function () {
var interval = Math.ceil((self.sprite.current.end - _pause) * 1000); // (ms)
self.setTimer('play', setTimeout(function () {
self.stop();
self._onEnded(); // fire onended evnet
}, interval));
};
}
this.state.time.pause = undefined;
type = 'resume:';
} else {
// zero-play
this.setCurrentTime(0);
if (this.isSprite()) {
var start = this.sprite.current.start;
this.setCurrentTime(start);
fn = function () {
var interval = Math.ceil(self.sprite.current.term * 1000); // (ms)
self.setTimer('play', setTimeout(function () {
self.stop();
self._onEnded(); // fire onended evnet
}, interval));
};
}
}
this.logger.debug(type, this.name);
fn();
this.state.time.name = this.name;
this.$el.play();
return this;
};
/**
* audio stop.
*
* @memberof HTMLAudio
* @method
* @name stop
* @return {HTMLAudio}
*/
HTMLAudio.prototype.stop = function () {
if (!this.state.loaded || typeof this.state.error !== 'undefined') {
this.logger.debug('skip stop:', this.name, 'state can not be used');
return this;
} // skip!!
if (this.state.time.name && this.state.time.name !== this.name) {
this.logger.debug('skip stop: It is used in other sources', this.name, this.state.time.name);
return this;
} // skip!!
this.logger.debug('stop:', this.name);
this.clearTimer('play');
this.$el.pause();
this.setCurrentTime(0);
this.state.time.playback = undefined;
this.state.time.name = undefined;
return this;
};
/**
* audio pause.
*
* @memberof HTMLAudio
* @method
* @name pause
* @return {HTMLAudio}
*/
HTMLAudio.prototype.pause = function () {
if (!this.isUse()) {
this.logger.debug('skip pause:', this.name, 'state can not be used');
return this;
} // skip!!
if (this.state.time.name && this.state.time.name !== this.name) {
this.logger.debug('skip pause: It is used in other sources', this.name, this.state.time.name);
return this;
} // skip!!
this.logger.debug('pause:', this.name);
this.clearTimer('play');
this.$el.pause();
this.state.time.pause = this.$el.currentTime;
this.state.time.playback = undefined;
//this.state.time.name = undefined;
return this;
};
/**
* audio resume.
*
* @memberof HTMLAudio
* @method
* @name resume
* @return {HTMLAudio}
*/
HTMLAudio.prototype.resume = function () {
if (!this.isUse()) {
this.logger.debug('skip resume:', this.name, 'state can not be used');
return this;
} // skip!!
if (this.state.time.name && this.state.time.name !== this.name) {
this.logger.debug('skip resume: It is used in other sources', this.name, this.state.time.name);
return this;
} // skip!!
if (this.state.time.pause) {
this.play(true);
}
return this;
};
/**
* audio re-play.
*
* @memberof HTMLAudio
* @method
* @name replay
* @return {HTMLAudio}
*/
HTMLAudio.prototype.replay = function () {
if (!this.isUse()) {
this.logger.debug('skip replay:', this.name, 'state can not be used');
return this;
} // skip!!
this.logger.debug('replay:', this.name);
this.clearTimer('play');
this.pause();
this.setCurrentTime(0);
this.play();
return this;
};
/**
* audio change volume.
*
* @memberof HTMLAudio
* @method
* @name volume
* @param {Interger} v volume
* @return {HTMLAudio}
*/
HTMLAudio.prototype.volume = function (v) {
this.logger.trace('volume:', this.name, 'volume:', v);
this.$el.volume = Math.max(0, Math.min(1, v));
};
//////////
/**
* Audio.ended events
*
* @memberof HTMLAudio
* @method
* @name _onEnded
* @param {Event} e event
*/
HTMLAudio.prototype._onEnded = function (e) {
if (this.isDisposed()) { // check dispose
return;
}
this.logger.trace('onended fire! name:', this.name);
this.state.time.playback = undefined;
this.state.time.name = undefined;
this.onEnded(e); // fire user ended event!!
if (this.isDisposed()) { // check dispose
return;
}
if (this.state.loop === boombox.LOOP_ORIGINAL && typeof this.state.time.pause === 'undefined') {
this.logger.trace('onended original loop play.', this.name);
this.play();
}
};
/**
* Override Audio.ended events
*
* @memberof HTMLAudio
* @method
* @name onEnded
* @param {Event} e event
*/
HTMLAudio.prototype.onEnded = none;
/**
* Set loop flag
*
* @memberof HTMLAudio
* @method
* @name setLoop
* @param {Interger} loop loop flag (Boombox.LOOP_XXX)
* @return {HTMLAudio}
*/
HTMLAudio.prototype.setLoop = function (loop) {
if (!this.isUse()) { return this; } // skip!!
this.state.loop = loop;
if (loop === boombox.LOOP_NOT) {
this.$el.loop = boombox.LOOP_NOT;
//} else if (loop === boombox.LOOP_ORIGINAL) {
} else if (loop === boombox.LOOP_NATIVE) {
if (this.isSprite()) {
this.logger.warn('audiosprite does not support the native. please use the original loop.');
return this;
}
if (this.$el) {
this.$el.loop = loop;
}
}
return this;
};
/**
* Change power on/off
*
* @memberof HTMLAudio
* @method
* @name power
* @param {Boolean} p power on/off. Boombox.(POWER_ON|POWER_OFF)
* @return {HTMLAudio}
*/
HTMLAudio.prototype.power = function (p) {
this.logger.trace('power:', this.name, 'flag:', p);
if (p === boombox.POWER_OFF) {
this.stop(); // force pause
}
this.state.power = p;
return this;
};
/**
* Set audio.currentTime
*
* @memberof HTMLAudio
* @method
* @name setCurrentTime
* @param {Interger} t set value(HTMLAudioElement.currentTime)
* @return {HTMLAudio}
*/
HTMLAudio.prototype.setCurrentTime = function (t) {
try {
this.$el.currentTime = t;
} catch (e) {
this.logger.error('Set currentTime.', e.message);
}
return this;
};
/**
* Check disposed
*
* @memberof HTMLAudio
* @method
* @name isDisposed
*/
HTMLAudio.prototype.isDisposed = function () {
return WebAudio.prototype.isDisposed.apply(this, arguments);
};
//////////
/**
* Dispose
*
* @memberof HTMLAudio
* @method
* @name dispose
*/
HTMLAudio.prototype.dispose = function () {
delete this.name;
delete this.state.time.playback;
delete this.state.time.pause;
delete this.state.time.name;
delete this.state.time;
delete this.state.loop;
delete this.state.power;
delete this.state.loaded;
delete this.state.error;
delete this.state;
this.$el.src = undefined;
delete this.$el;
this.clearTimerAll();
delete this._timer;
delete this.parent;
if (this.sprite && this.sprite.dispose) {
this.sprite.dispose();
}
delete this.sprite;
};
return HTMLAudio;
})();
//////////////////////////////////
// HTMLVideo Class
var HTMLVideo = (function () {
function HTMLVideo(name, parent) {
/**
* logger
* @memberof HTMLVideo
* @name logger
*/
this.logger = new Logger('HTMLVideo');
/**
* unique name
* @memberof HTMLVideo
* @name name
*/
this.name = name;
/**
* SetTimeout#id pool running
* @memberof HTMLVideo
* @name _timer
*/
this._timer = {}; // setTimeout#id
/**
* AudioSprite option data
* @memberof HTMLVideo
* @name sprite
*/
this.sprite = undefined;
if (parent) {
var sprite_n = getSpriteName(name);
// change Sprite
var current = parent.sprite.options[sprite_n.suffix];
/**
* Reference of the parent instance HTMLVideo
* @memberof HTMLVideo
* @name parent
*/
this.parent = parent; // ref
/**
* Reference of the parent state instance HTMLVideo
* @memberof HTMLVideo
* @name state
*/
this.state = this.parent.state; // ref
/**
* Reference of the parent HTMLVideoElement instance HTMLVideo
* @memberof HTMLAudio
* @name state
*/
this.$el = this.parent.$el; // ref
//this.onEnded = this.parent.onEnded; // TODO: ref
this.sprite = new Sprite(undefined, current); // new
} else {
this.state = {
time: {
playback: undefined, // Playback start time (unixtime)
pause: undefined // // Seek time paused
},
loop: boombox.LOOP_NOT, // Loop playback flags
power: boombox.POWER_ON, // Power flag
loaded: false, // Video file is loaded
error: undefined // error state
};
this.$el = document.createElement('video');
}
}
///////
/**
* Loading html video
*
* @memberof HTMLVideo
* @name load
* @method
* @param {Object} options
* @param {Function} callback
* @return {HTMLVideo}
* @example
* .load({
* src: '', // required
* type: '', // optional
* media: '', // optional
* preload: 'auto', // optional
* autoplay: false, // optional
* mediagroup: 'boombox', // optional
* loop: false, // optional
* muted: false, // optional
* crossorigin: "anonymous", // optional
* controls: false // optional
* timeout: 15 * 1000 // optional default) 15s
* }, function callback() {});
*
*/
HTMLVideo.prototype.load = function (options, callback) {
var self = this;
var cb = callback || none;
if (this.parent) { // skip audiosprite children
cb(null, this);
return this;
}
options = options || {
//src: '',
//type: '',
//media: '',
preload: 'auto', // auto, metadata, none
autoplay: false, // no-auto
//mediagroup: 'boombox',
loop: false,
muted: false,
//crossorigin: "anonymous",
controls: false
};
var timeout = options.timeout || 15 * 1000;
delete options.timeout;
if (options.spritemap) { // Sprite ON
this.sprite = new Sprite(options.spritemap);
delete options.spritemap;
}
for (var k in options) {
var v = options[k];
self.logger.trace('HTMLVideoElement attribute:', k, v);
self.$el[k] = v;
}
/// Debug log
/**
["loadstart",
"progress",
"suspend",
"load",
"abort",
"error",
"emptied",
"stalled",
"play",
"pause",
"loadedmetadata",
"loadeddata",
"waiting",
"playing",
"canplay",
"canplaythrough",
"seeking",
"seeked",
"timeupdate",
"ended",
"ratechange",
"durationchange",
"volumechange"].forEach(function (eventName) {
self.$el.addEventListener(eventName, function () {
console.log('audio: ' + eventName);
}, true);
});
*/
var hookEventName = 'canplay';
var ua_ios = window.navigator.userAgent.match(/(iPhone\sOS)\s([\d_]+)/);
if (ua_ios && 0 < ua_ios.length) { // IOS Safari
hookEventName = 'suspend';
} else if (!!window.navigator.userAgent.match(/(Android)\s+(4)([\d.]+)/)) { // Android 4 basic
hookEventName = 'loadeddata';
} else if (!!window.navigator.userAgent.match(/(Android)\s+(2)([\d.]+)/)) { // Android 2 basic
hookEventName = 'stalled';
}
self.logger.trace('hook event name:', hookEventName);
this.$el.addEventListener(hookEventName, function _canplay(e) {
self.logger.trace('processEvent ' + e.target.id + ' : ' + e.type, 'event');
self.state.loaded = true;
self.$el.removeEventListener(hookEventName, _canplay, false);
return cb(null, self);
});
this.$el.addEventListener(
'ended',
function (e) {
self._onEnded(e);
},
false);
// communication time-out
setTimeout(function () {
if (self.$el && self.$el.readyState !== 4) {
self.$el.src = '';
cb(new Error('load of html video file has timed out. timeout:' + timeout), self);
cb = function () {};
}
}, timeout);
this.$el.load();
// setInterval(function () {
// console.error(self.name,
// 'playback:', self.isPlayback(),
// 'stop:', self.isStop(),
// 'pause:', self.isPause(),
// 'power:', self.state.power
// );
// }, 100);
return this;
};
//HTMLVideo.prototype.addTextTrack = function () { /**...*/ };
//HTMLVideo.prototype.canPlayType = function () { /**...*/ };
//////////
/**
* Is use. (apply HTMLAudio)
*
* @memberof HTMLVideo
* @method
* @name isUse
* @return {Boolean}
*/
HTMLVideo.prototype.isUse = function () {
return boombox.HTMLAudio.prototype.isUse.apply(this, arguments);
};
/**
* Is playing. (apply HTMLAudio)
*
* @memberof HTMLVideo
* @method
* @name isPlayback
* @return {Boolean}
*/
HTMLVideo.prototype.isPlayback = function () {
return boombox.HTMLAudio.prototype.isPlayback.apply(this, arguments);
};
/**
* Is stoped.
*
* @memberof HTMLVideo (apply HTMLAudio)
* @method
* @name isStop
* @return {Boolean}
*/
HTMLVideo.prototype.isStop = function () {
return boombox.HTMLAudio.prototype.isStop.apply(this, arguments);
};
/**
* Is paused.
*
* @memberof HTMLVideo (apply HTMLAudio)
* @method
* @name isPause
* @return {Boolean}
*/
HTMLVideo.prototype.isPause = function () {
return boombox.HTMLAudio.prototype.isPause.apply(this, arguments);
};
/**
* Loop flag (apply HTMLAudio)
*
* @memberof HTMLVideo
* @method
* @name isLoop
* @return {Interger}
*/
HTMLVideo.prototype.isLoop = function () {
return boombox.HTMLAudio.prototype.isLoop.apply(this, arguments);
};
/**
* Is sprite of the parent (apply HTMLAudio)
*
* @memberof HTMLVideo
* @method
* @name isParentSprite
* @return {Boolean}
*/
HTMLVideo.prototype.isParentSprite = function () {
return boombox.HTMLAudio.prototype.isParentSprite.apply(this, arguments);
};
/**
* Is sprite (apply HTMLAudio)
*
* @memberof HTMLVideo
* @method
* @name isSprite
* @return {Boolean}
*/
HTMLVideo.prototype.isSprite = function () {
return boombox.HTMLAudio.prototype.isSprite.apply(this, arguments);
};
/**
* Clear all the setTimeout (apply HTMLAudio)
*
* @memberof HTMLVideo
* @method
* @name clearTimerAll
* @return {HTMLAudio}
*/
HTMLVideo.prototype.clearTimerAll = function () {
return boombox.HTMLAudio.prototype.clearTimerAll.apply(this, arguments);
};
/**
* Clear specified setTimeout (apply HTMLAudio)
*
* @memberof HTMLVideo
* @method
* @name clearTimer
* @param {String} name
* @return {Interger}
*/
HTMLVideo.prototype.clearTimer = function (name) {
return boombox.HTMLAudio.prototype.clearTimer.apply(this, arguments);
};
/**
* Save the specified setTimeout (apply HTMLAudio)
*
* @memberof HTMLVideo
* @method
* @name setTimer
* @param {String} name
* @param {Interger} id setTimeout#id
* @return {Interger}
*/
HTMLVideo.prototype.setTimer = function (name, id) {
return boombox.HTMLAudio.prototype.setTimer.apply(this, arguments);
};
//////////
/**
* video play.
*
* @memberof HTMLVideo
* @method
* @name play
* @param {Boolean} resume resume flag
* @return {HTMLVideo}
*/
HTMLVideo.prototype.play = function (resume) {
if (!this.isUse()) {
this.logger.debug('skip play:', this.name, 'state can not be used');
return this;
} // skip!!
if (this.isPlayback()) {
this.logger.debug('skip play:', this.name, 'is playing');
return this;
}
var self = this;
var type = 'play';
var fn = none;
this.state.time.playback = Date.now();
if (resume && this.state.time.pause) {
// resume
this.setCurrentTime(this.state.time.pause);
if (this.isSprite()) {
var _pause = this.state.time.pause;
fn = function () {
var interval = Math.ceil((self.sprite.current.end - _pause) * 1000); // (ms)
self.setTimer('play', setTimeout(function () {
self.stop();
self._onEnded(); // fire onended evnet
}, interval));
};
}
this.state.time.pause = undefined;
type = 'resume:';
} else {
// zero-play
this.setCurrentTime(0);
if (this.isSprite()) {
var start = this.sprite.current.start;
this.setCurrentTime(start);
fn = function () {
var interval = Math.ceil(self.sprite.current.term * 1000); // (ms)
self.setTimer('play', setTimeout(function () {
self.stop();
self._onEnded(); // fire onended evnet
}, interval));
};
}
}
this.logger.debug(type, this.name);
fn();
this.state.time.name = this.name;
this.$el.play();
return this;
};
/**
* video stop. (apply HTMLAudio)
*
* @memberof HTMLVideo
* @method
* @name stop
* @return {HTMLVideo}
*/
HTMLVideo.prototype.stop = function () {
return boombox.HTMLAudio.prototype.stop.apply(this, arguments);
};
/**
* video pause. (apply HTMLAudio)
*
* @memberof HTMLVideo
* @method
* @name pause
* @return {HTMLVideo}
*/
HTMLVideo.prototype.pause = function () {
return boombox.HTMLAudio.prototype.pause.apply(this, arguments);
};
/**
* video resume. (apply HTMLAudio)
*
* @memberof HTMLVideo
* @method
* @name resume
* @return {HTMLVideo}
*/
HTMLVideo.prototype.resume = function () {
return boombox.HTMLAudio.prototype.resume.apply(this, arguments);
};
/**
* video re-play. (apply HTMLAudio)
*
* @memberof HTMLVideo
* @method
* @name replay
* @return {HTMLVideo}
*/
HTMLVideo.prototype.replay = function () {
return boombox.HTMLAudio.prototype.replay.apply(this, arguments);
};
/**
* audio change volume. (apply HTMLAudio)
*
* @memberof HTMLVideo
* @method
* @name volume
* @return {HTMLVideo}
*/
HTMLVideo.prototype.volume = function (v) {
return boombox.HTMLAudio.prototype.volume.apply(this, arguments);
};
//////////
/**
* Video.ended events (apply HTMLAudio)
*
* @memberof HTMLVideo
* @method
* @name _onEnded
* @param {Event} e event
*/
HTMLVideo.prototype._onEnded = function (e) {
return boombox.HTMLAudio.prototype._onEnded.apply(this, arguments);
};
/**
* Override Video.ended events (apply HTMLAudio)
*
* @OVERRIDE ME
* @memberof HTMLVideo
* @method
* @name onEnded
* @param {Event} e event
*/
HTMLVideo.prototype.onEnded = none;
/**
* Set loop flag (apply HTMLAudio)
*
* @memberof HTMLVideo
* @method
* @name setLoop
* @param {Interger} loop loop flag (Boombox.LOOP_XXX)
* @return {HTMLVideo}
*/
HTMLVideo.prototype.setLoop = function (loop) {
return boombox.HTMLAudio.prototype.setLoop.apply(this, arguments);
};
/**
* Change power on/off (apply HTMLAudio)
*
* @memberof HTMLVideo
* @method
* @name power
* @param {Boolean} p power on/off. boombox.(POWER_ON|POWER_OFF)
* @return {HTMLVideo}
*/
HTMLVideo.prototype.power = function (p) {
return boombox.HTMLAudio.prototype.power.apply(this, arguments);
};
/**
* Set video.currentTime (apply HTMLAudio)
*
* @memberof HTMLVideo
* @method
* @name setCurrentTime
* @param {Interger} t set value(Video.currentTime)
* @return {HTMLVideo}
*/
HTMLVideo.prototype.setCurrentTime = function (t) {
return boombox.HTMLAudio.prototype.setCurrentTime.apply(this, arguments);
};
/**
* Check disposed
*
* @memberof HTMLVideo
* @method
* @name isDisposed
*/
HTMLVideo.prototype.isDisposed = function () {
return boombox.HTMLAudio.prototype.isDisposed.apply(this, arguments);
};
//////////
/**
* Dispose (apply HTMLAudio)
*
* @memberof HTMLVideo
* @method
* @name dispose
*/
HTMLVideo.prototype.dispose = function () {
return boombox.HTMLAudio.prototype.dispose.apply(this, arguments);
};
return HTMLVideo;
})();
//////////////////////////////////
// WebAudio Class
var WebAudio = (function () {
function WebAudio(name, parent) {
/**
* logger
* @memberof WebAudio
* @name logger
*/
this.logger = new Logger('WebAudio');
/**
* Audio name
*
* @memberof WebAudio
* @name name
* @type {String}
*/
this.name = name;
/**
* SetTimeout#id pool running
* @memberof WebAudio
* @name _timer
*/
this._timer = {};
/**
* AudioSprite option data
* @memberof WebAudio
* @name sprite
*/
this.sprite = undefined;
/**
* AudioBuffer in use
*
* @memberof WebAudio
* @name buffer
* @type {AudioBuffer}
*/
this.buffer = undefined;
/**
* AudioBufferSourceNode in use
*
* @memberof WebAudio
* @name source
* @type {AudioBufferSourceNode}
*/
this.source = undefined;
/**
* WebAudioContext in use
* shortcut: boombox.WEB_AUDIO_CONTEXT
*
* @memberof WebAudio
* @name ctx
* @type {AudioContext}
*/
this.ctx = boombox.WEB_AUDIO_CONTEXT;
/**
* WebAudioContext.GainNode instance
* @memberof WebAudio
* @name gainNode
* @type {GainNode}
*/
this.gainNode = this.ctx.createGain();
/**
* State of Audio
*
* @memberof WebAudio
* @name state
* @type {Object}
*/
this.state = {
time: {
playback: undefined, // Playback start time (unixtime)
pause: undefined, // Seek time paused
progress: 0 // Sound progress time
},
loop: boombox.LOOP_NOT, // Loop playback flags
power: boombox.POWER_ON, // power flag
loaded: false, // Audio file is loaded
error: undefined // error state
};
if (parent) {
var sprite_n = getSpriteName(name);
this.parent = parent; // ref
//this.state = this.parent.state; // ref
this.state.loaded = this.parent.state.loaded; // not ref copy
this.state.error = this.parent.state.error; // not ref copy
//this.$el = this.parent.$el; // ref
//this.onEnded = this.parent.onEnded; // TODO: ref
// change Sprite
var current = parent.sprite.options[sprite_n.suffix];
this.sprite = new Sprite(undefined, current); // new
}
}
//////
/**
* Loading web audio
*
* @memberof WebAudio
* @name load
* @method
* @param {Object} options
* @param {Function} callback
* @return {WebAudio}
* @example
* .load({
* src: 'http://example.com/audio.m4a',
* timeout: 15 * 1000
* }, function callback() {});
*
*/
WebAudio.prototype.load = function (options, callback) {
var self = this;
options = options || {};
var cb = callback || none;
if (this.parent) {
//this.buffer = this.parent.buffer; // ref
cb(null, this);
return this;
}
if (options.spritemap) { // Sprite ON
this.sprite = new Sprite(options.spritemap);
delete options.spritemap;
}
for (var k in options) {
var v = options[k];
this.logger.trace('WebAudio attribute:', k, v);
}
var http = new XMLHttpRequest();
http.onload = function (e) {
if (e.target.status.toString().charAt(0) === '2') {
self.ctx.decodeAudioData(
http.response,
function (buffer) {
if (!buffer) {
self.logger.error('error decode file data: ', options.url);
return cb(new Error('error decode file data'), self);
}
self.buffer = buffer;
self.state.loaded = true;
/////
// audiosprite propagation
if (self.isParentSprite()) {
for (var k in boombox.pool) {
if (!!~k.indexOf(self.name + SPRITE_SEPARATOR)) {
boombox.pool[k].buffer = buffer; // ref buffer
boombox.pool[k].state.loaded = self.state.loaded; // not ref copy
}
}
}
return cb(null, self);
},
function () {
return cb(new Error('fail to decode file data'), self);
}
);
} else {
self.logger.error('fail to load resource: ', options.url);
return cb(new Error('fail to load resource'), self);
}
};
//http.timeout = 1;
var timeout = options.timeout || 15 * 1000;
// communication time-out
setTimeout(function () {
if (http.readyState !== 4) {
http.abort();
cb(new Error('load of web audio file has timed out. timeout:' + timeout), self);
cb = none;
}
}, timeout);
http.open('GET', options.src, true);
http.responseType = 'arraybuffer';
// setInterval(function () {
// console.error(self.name,
// 'playback', self.isPlayback(),
// 'stop:', self.isStop(),
// 'pause:', self.isPause(),
// 'power:', self.state.power
// );
// }, 100);
/////////////////////
/// XHR send!!
http.send();
return this;
};
//////////
/**
* Is use. (apply HTMLAudio)
*
* @memberof WebAudio
* @method
* @name isUse
* @return {Boolean}
*/
WebAudio.prototype.isUse = function () {
return boombox.HTMLAudio.prototype.isUse.apply(this, arguments);
};
/**
* Is playing. (apply HTMLAudio)
*
* @memberof WebAudio
* @method
* @name isPlayback
* @return {Boolean}
*/
WebAudio.prototype.isPlayback = function () {
return !!this.source && !!this.state.time.playback && !this.state.time.pause && (this.source.playbackState === 1 || this.source.playbackState === 2);
};
/**
* Is stoped. (apply HTMLAudio)
*
* @memberof WebAudio
* @method
* @name isStop
* @return {Boolean}
*/
WebAudio.prototype.isStop = function () {
return !this.source;
};
/**
* Is paused. (apply HTMLAudio)
*
* @memberof WebAudio
* @method
* @name isPause
* @return {Boolean}
*/
WebAudio.prototype.isPause = function () {
return boombox.HTMLAudio.prototype.isPause.apply(this, arguments);
};
/**
* Loop flag (apply HTMLAudio)
*
* @memberof WebAudio
* @method
* @name isLoop
* @return {Interger}
*/
WebAudio.prototype.isLoop = function () {
return boombox.HTMLAudio.prototype.isLoop.apply(this, arguments);
};
/**
* Is sprite of the parent (apply HTMLAudio)
*
* @memberof WebAudio
* @method
* @name isParentSprite
* @return {Boolean}
*/
WebAudio.prototype.isParentSprite = function () {
return boombox.HTMLAudio.prototype.isParentSprite.apply(this, arguments);
};
/**
* Is sprite (apply HTMLAudio)
*
* @memberof WebAudio
* @method
* @name isSprite
* @return {Boolean}
*/
WebAudio.prototype.isSprite = function () {
return boombox.HTMLAudio.prototype.isSprite.apply(this, arguments);
};
/**
* Clear all the setTimeout (apply HTMLAudio)
*
* @memberof WebAudio
* @method
* @name clearTimerAll
* @return {WebAudio}
*/
WebAudio.prototype.clearTimerAll = function () {
return boombox.HTMLAudio.prototype.clearTimerAll.apply(this, arguments);
};
/**
* Clear specified setTimeout (apply HTMLAudio)
*
* @memberof WebAudio
* @method
* @name clearTimer
* @param {String} name
* @return {Interger}
*/
WebAudio.prototype.clearTimer = function (name) {
return boombox.HTMLAudio.prototype.clearTimer.apply(this, arguments);
};
/**
* Save the specified setTimeout (apply HTMLAudio)
*
* @memberof WebAudio
* @method
* @name setTimer
* @param {String} name
* @param {Interger} id setTimeout#id
* @return {Interger}
*/
WebAudio.prototype.setTimer = function (name, id) {
return boombox.HTMLAudio.prototype.setTimer.apply(this, arguments);
};
//////////
/**
* audio play.
*
* @memberof WebAudio
* @method
* @name play
* @return {WebAudio}
*/
WebAudio.prototype.play = function (resume) {
var self = this;
if (!this.isUse()) {
this.logger.debug('skip play:', this.name, 'state can not be used');
return this;
} // skip!!
if (this.isPlayback()) {
this.logger.debug('skip play:', this.name, 'is playing');
return this;
}
if (!resume) {
this.sourceDispose();
}
this.source = this.ctx.createBufferSource();
if (this.state.loop === boombox.LOOP_NATIVE) {
this.source.loop = this.state.loop;
}
this.source.buffer = this.buffer;
this.source.connect(this.gainNode);
this.gainNode.connect(this.ctx.destination);
var type = 'play';
var fn = none;
var start = 0;
this.state.time.playback = Date.now(); // Playback start time (ms)
if (resume && this.state.time.pause) {
// resume
start = this.state.time.pause / 1000; // Start position (sec)
//this.logger.trace('start:', start);
//this.logger.warn('interval:', interval);
if (this.isSprite()) {
var pause_sec = this.state.time.pause / 1000; // (sec)
start = this.sprite.current.start + pause_sec; // Start position (sec)
var interval = Math.ceil((self.sprite.current.term - pause_sec) * 1000); // (ms)
fn = function () {
self.setTimer('play', setTimeout(function () {
self.stop();
self._onEnded(); // fire onended evnet
}, interval));
};
}
this.state.time.pause = undefined;
} else { // zero
if (this.isSprite()) {
start = this.sprite.current.start;
fn = function () {
var interval = Math.ceil(self.sprite.current.term * 1000);
self.setTimer('play', setTimeout(function () {
self.stop();
self._onEnded(); // fire onended evnet
}, interval));
};
}
}
this.logger.debug(type, this.name, 'offset:', start);
fn();
var duration = this.buffer.duration - start;
if (!this.isSprite()) {
if (this.source.hasOwnProperty('onended')) {
this.source.onended = function (e) {
self._onEnded(e);
};
} else {
var interval = Math.ceil(duration * 1000);
this.setTimer('play', setTimeout(function () {
self.stop();
self._onEnded();
}, interval));
}
}
if (this.source.start) {
this.logger.debug('use source.start()', this.name, start, duration);
this.source.start(0, start, this.buffer.duration);
} else {
if (this.isSprite()) {
duration = self.sprite.current.term;
}
this.logger.debug('use source.noteGrainOn()', this.name, start, duration);
this.source.noteGrainOn(0, start, duration);
}
return this;
};
/**
* audio stop.
*
* @memberof WebAudio
* @method
* @name stop
* @return {WebAudio}
*/
WebAudio.prototype.stop = function () {
if (!this.state.loaded || typeof this.state.error !== 'undefined') {
this.logger.debug('skip stop:', this.name, 'state can not be used');
return this;
} // skip!!
this.logger.debug('stop:', this.name);
this.clearTimer('play');
if (this.source) {
if (this.source.stop) {
this.logger.debug('stop: use source.stop()', this.name);
this.source.stop(0);
} else {
this.logger.debug('stop: use source.noteOff()', this.name);
this.source.noteOff(0);
}
}
this.sourceDispose();
return this;
};
/**
* audio pause.
*
* @memberof WebAudio
* @method
* @name pause
* @return {WebAudio}
*/
WebAudio.prototype.pause = function () {
if (!this.isUse()) {
this.logger.debug('skip pause:', this.name, 'state can not be used');
return this;
} // skip!!
if (!this.source) {
this.logger.debug('skip pause, Not playing.');
return this;
}
if (this.state.time.pause) {
this.logger.debug('skip pause, It is already paused.');
return this;
}
var now = Date.now();
var offset = now - this.state.time.playback;
this.state.time.pause = this.state.time.progress + offset; // Pause time(ms)
this.state.time.progress += offset;
this.logger.trace('state.time.pause:', this.state.time.pause, 'now:', now, 'state.time.playback', this.state.time.playback);
this.logger.debug('pause:', this.name);
this.clearTimer('play');
if (this.source) {
if (this.source.stop) {
this.logger.debug('pause: use source.stop()', this.name);
this.source.stop(0);
} else {
this.logger.debug('pause: use source.noteOff()', this.name);
this.source.noteOff(0);
}
}
return this;
};
/**
* audio resume.
*
* @memberof WebAudio
* @method
* @name resume
* @return {WebAudio}
*/
WebAudio.prototype.resume = function () {
if (!this.isUse()) {
this.logger.debug('skip resume:', this.name, 'state can not be used');
return this;
} // skip!!
if (this.state.time.pause) {
this.play(true);
}
return this;
};
/**
* audio re-play.
*
* @memberof WebAudio
* @method
* @name replay
* @return {WebAudio}
*/
WebAudio.prototype.replay = function () {
if (!this.isUse()) {
this.logger.debug('skip replay:', this.name, 'state can not be used');
return this;
} // skip!!
this.logger.debug('replay:', this.name);
this.clearTimer('play');
this.sourceDispose();
this.play();
return this;
};
/**
* audio change volume.
*
* @memberof WebAudio
* @method
* @name volume
* @return {WebAudio}
*/
WebAudio.prototype.volume = function (v) {
this.logger.trace('volume:', this.name, 'volume:', v);
this.gainNode.gain.value = v;
};
//////////
/**
* Audio.ended events
*
* @memberof WebAudio
* @method
* @name _onEnded
* @param {Event} e event
*/
WebAudio.prototype._onEnded = function (e) {
// check dispose
if (this.isDisposed()) {
return;
}
var self = this;
var now = Date.now();
// skip if sounds is not ended
if (self.source && Math.abs((now - self.state.time.playback + self.state.time.progress) / 1000 - self.source.buffer.duration) >= boombox.THRESHOLD) {
self.logger.debug('skip if sounds is not ended', self.name);
return;
}
this.logger.trace('onended fire!', this.name);
this.state.time.playback = undefined;
this.onEnded(e); // fire user ended event!!
// check dispose
if (this.isDisposed()) {
return;
}
if (this.state.loop && typeof this.state.time.pause === 'undefined') {
this.logger.trace('onended loop play.');
this.play();
} else {
this.sourceDispose();
}
};
/**
* Override Audio.ended events
*
* @memberof WebAudio
* @method
* @name onEnded
* @param {Event} e event
*/
WebAudio.prototype.onEnded = none;
//////////
/**
* Set loop flag
*
* @memberof WebAudio
* @method
* @name setLoop
* @param {Interger} loop loop flag (boombox.LOOP_XXX)
* @return {WebAudio}
*/
WebAudio.prototype.setLoop = function (loop) {
if (!this.isUse()) { return this; } // skip!!
this.state.loop = loop;
if (loop === boombox.LOOP_NOT) {
if (this.source) {
this.source.loop = boombox.LOOP_NOT;
}
//} else if (loop === boombox.LOOP_ORIGINAL) {
} else if (loop === boombox.LOOP_NATIVE) {
if (this.source) {
this.source.loop = loop;
}
}
return this;
};
/**
* Change power on/off (apply HTMLAudio)
*
* @memberof WebAudio
* @method
* @name power
* @param {Boolean} p power on/off. boombox.(POWER_ON|POWER_OFF)
* @return {WebAudio}
*/
WebAudio.prototype.power = function (p) {
return boombox.HTMLAudio.prototype.power.apply(this, arguments);
};
//////////
/**
* Dispose AudioBufferSourceNode
*
* @memberof WebAudio
* @method
* @name sourceDispose
*/
WebAudio.prototype.sourceDispose = function () {
this.logger.trace('source dispose', this.name);
this.source && this.source.disconnect();
this.source = undefined;
this.state.time.playback = undefined;
this.state.time.pause = undefined;
this.state.time.progress = 0;
};
/**
* Check disposed
* @memberof WebAudio
* @method
* @name isDisposed
*/
WebAudio.prototype.isDisposed = function () {
this.logger.trace('check dispose flag', !!this.state);
return !this.state;
};
/**
* Dispose
*
* @memberof WebAudio
* @method
* @name dispose
*/
WebAudio.prototype.dispose = function () {
this.logger.trace('WebAudio dispose', this.name);
delete this.buffer;
//delete this.state.time.playback;
//delete this.state.time.pause;
//delete this.source;
this.sourceDispose();
delete this.source;
this.clearTimerAll();
delete this._timer;
delete this.state.time;
delete this.state.loop;
delete this.state.power;
delete this.state.loaded;
delete this.state.error;
delete this.state;
this.parent = null;
delete this.parent;
if (this.sprite && this.sprite.dispose) {
this.sprite.dispose();
}
delete this.sprite;
delete this.name;
this.gainNode && this.gainNode.disconnect && delete this.gainNode;
this.ctx = null;
};
return WebAudio;
})();
var Sprite = (function () {
function Sprite(options, current) {
/**
* logger
* @memberof Sprite
* @type {Logger}
* @name logger
*/
this.logger = new Logger('Sprite ');
/**
* current options
* @memberof Sprite
* @type {Object}
* @name current
*/
this.current = current; // target sprite
/**
* options
* @memberof Sprite
* @name options
* @type {Object}
*/
this.options = options;
if (!current) { // parent
for (var k in this.options) {
this.options[k].term = this.options[k].end - this.options[k].start;
}
}
}
//////////
/**
* Dispose
* @memberof Sprite
* @method
* @name dispose
*/
Sprite.prototype.dispose = function () {
this.options = null;
delete this.options;
delete this.current;
};
return Sprite;
})();
// Building
boombox.HTMLAudio = HTMLAudio;
boombox.HTMLVideo = HTMLVideo;
boombox.WebAudio = WebAudio;
if (isRequire) {
define([], function () {
return boombox;
});
} else {
w.boombox = boombox;
}
})(window);