X-Git-Url: http://git.osdn.jp/view?a=blobdiff_plain;f=0.6.x%2Fjs%2F07_audio%2F02_XHTMLAudio.js;h=1c88ae5cb9c1a49f8744289864f1a46e561c283d;hb=4e4ab3be10850546063d4a4b93250ed142bb8cd2;hp=ee712a58ae2f50f31d836a81d9191b6e6fcc4425;hpb=a09eec2e19c91d656e784e71c73acacb8368f491;p=pettanr%2FclientJs.git

diff --git a/0.6.x/js/07_audio/02_XHTMLAudio.js b/0.6.x/js/07_audio/02_XHTMLAudio.js
index ee712a5..1c88ae5 100644
--- a/0.6.x/js/07_audio/02_XHTMLAudio.js
+++ b/0.6.x/js/07_audio/02_XHTMLAudio.js
@@ -2,387 +2,556 @@
 /*
  * original : uupaa-js HTML5Audio.js
  * https://code.google.com/p/uupaa-js/source/browse/trunk/0.8/src/Audio/HTML5Audio.js?r=568
+ * 
+ * Windows 版 Safari は QuickTime のインストールが必要
+ * 
+ * 1. iOS4(iPod 2G) で ended に達すると音が鳴らなくなる fix で解決
+ * 2. iOS6(iPod 4G) で ended に達すると音が鳴らなくなる fix で頻度が改善 emded イベントは発しないので、timeupdate 時に currentTime で判断する
+ * 3. WP7(IS12T) で最後の方にある音が鳴らない? mp3 cbr を使えばいい? 裏に回っても音が鳴り続ける
+ * 4. AOSP 2.x で ended に達すると音が鳴らなくなる -> リロード(audio.src='';audio.src=src;audio.load())でで解決
+ * 5. AOSP 3.x で ended に達すると音が鳴らなくなる -> リロード(audio.src='';audio.sr=src)で解決、但し 2.x 4.x より遅延が大きく 1 秒弱程度ある
+ * 6. AOSP 4.4.2- は ended に達した際に currentTime が変更できなくなり、リロードが必要になる, 4.0, 4.1, 4.2, 4.3 で確認, play() で頻度低下
+ * 7. Android 4.4.4 Chrome WebView は ended に達した際に play() が必要
+ * 8. BlinkOpera32 Win8 は HTMLAudio が壊れている、WebAudio は mp3 がデコードに失敗、ogg が動作
+ * 
+ * memo
+ * 1. AOSP4.1 iframe 内の Audio は親に focus が移っても再生を継続する
+ * 2. AOSP oggはシークが乱れる m4a, mp3 は優秀
+ * 
+ * http://unolabo.boo.jp/archives/2011/06/13-iphone%E3%81%AEaudio%E5%91%A8%E3%82%8A%E3%81%AE%E3%83%A1%E3%83%A2.html
+ * 【JS】iPhoneのAudio周りのメモ iOS4.0 と 4.2 の違い
  */
+	/*
+	 * durationFix
+	 *  duration が取得できるタイミングが遅くそれまでは infinity(PC Opera12), NaN(WP9), 0(Android 標準ブラウザ ChromeWebView) が入っている
+	 * 
+	 *   1. touch が不要の場合、自動で再生を開始して duration を取得するまで再生する
+	 *	  -> 取得後に pause or 通常再生
+	 *   2. touch が必要な場合、タッチイベント内の audio.play() で duration 取得
+	 * 
+	 *  PC Opera12
+	 *   1. loadeddata 等では duration が infinity で、再生後の durationchange 時に duration が判明する
+	 *   2. duration 判明後には currentTime によるシークと、現在時間の取得が可能になる。
+	 *   3. Opera12.17 Win32(XP) portable apps は勝手に再生が始まる、、、Win8+Opera では発生しない
+	 *	  -> その際には timeupdate が発行されない、、、　iframe+image+audio で使わないときは破棄する、とか。
+	 *	  -> opera11、10.54 WinXP はまとも、、、 portable が怪しい??
+	 */
 
-var X_Audio_HTMLAudio_playTrigger =
-		X_UA.iOS ? 'suspend' :
-		X_UA.AndroidBrowser2 ? 'stalled' : // Android 2.3.5(SBM101SH) では stalled は発生しない,,,
-		X_UA.AndroidBrowser4 ? 'loadeddata' : 'canplay',
-	X_Audio_HTMLAudioWrapper,
-	X_Audio_rawAudio,
-	// Opera Mobile 12 android4.4.4 & 2.3.5 は 2回目以降の currentTime へのセットで currentTime が更新されなくなるため、タイマーを使用する
-	X_Audio_HTMLAudioWrapper_currentTimeFix  = !!X_UA.OperaMobile || !!X_UA.OperaTablet,
-	// 一方 Desktop の Opera12 は、loadeddata 等では duration が infinity で、再生後の durationchange 時に duration が判明する。
-	// duration 判明後には currentTime によるシークと、現在時間の取得が可能になる。
-	// canplay で play() durationchange で duration が取れたら loadedmetadata->loadeddata -> canplay する
-	// boombox.js に書いてあった currentTime の効かないブラウザってこいつのことみたい、、、
-	X_Audio_HTMLAudioWrapper_currentTimeFix2 = !X_Audio_HTMLAudioWrapper_currentTimeFix && X_UA.Opera,
+var
+	X_HTMLAudio,
+	// iOS7.1, 8.3 で確認.seeking -> seeked の間の currentTime の値が全くあてにならないので無視する。
+	X_HTMLAudio_seekingFixIOS   = 7 <= X_UA[ 'iOS' ],
+	// ended が発生しない timeupdate 内で play() を呼ぶ (未検証) 不具合確認は iOS4,6 iOS7.1,8.3ではpause->ended起きてる 但し iOS7.1 でも 6 と同じ症状になることがある
+	X_HTMLAudio_endedFixIOS     = X_UA[ 'iOS' ] < 7,
+	// Android 2.3.5 で ended 時に audio.src='';audio.src=src;audio.load() を実施。 2.3.4 でも問題なし。
+	X_HTMLAudio_endedFixAOSP2   = X_UA[ 'AOSP' ] < 3,
+	// Android 3.1 で ended 時に src='';src=src を実施。
+	X_HTMLAudio_endedFixAOSP3   = !X_HTMLAudio_endedFixAOSP2 && X_UA[ 'AOSP' ] < 4,
+	// ended 時に play() を実施, currentTime が duration に張り付き更新されなければ  src='';src=src を実施。
+	X_HTMLAudio_endedFixAOSP4   = 4 <= X_UA[ 'AOSP' ],
+	// ended 時に play() を実施
+	X_HTMLAudio_endedFixCWV     = X_UA[ 'ChromeWV' ] || ( X_UA[ 'Blink' ] && X_UA[ 'Android' ] ),
 	
-	X_Audio_HTMLAudioWrapper_shortPlayFix    = !!X_UA.AndroidBrowser4;
+	// Opera Mobile 12 は 2回目以降の currentTime へのセットで currentTime が更新されなくなるため、タイマーを使用する
+	X_HTMLAudio_currentTimeFix  = !!X_UA[ 'OperaMobile' ] || !!X_UA[ 'OperaTablet' ],
+	// Firefox44.0.2 で音声の再生開始に難あり...
+	X_HTMLAudio_playStartFix    = X_UA[ 'Windows' ] && X_UA[ 'Gecko' ] === 44,
+
+	X_HTMLAudio_volumeFix	    = X_UA[ 'Chrome' ],
+	/*
+	 * win opera12 volume, mute の変更が2度目以降できない
+	 */
+	X_HTMLAudio_volumeEnabled   = !( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ) && !X_UA[ 'Opera' ],
+	// Gecko PC + Android でseek時に再生がしばしば止まる問題の修正、iOS8でも確認
+	X_HTMLAudio_needPlayForSeek = X_UA[ 'iOS' ] || X_UA[ 'Gecko' ],
+	// 
+	X_HTMLAudio_pauseFix		= 12 <= X_UA[ 'Opera' ] && 0 < ' XP XPSP2 2003|XP64'.indexOf( X_UA[ 'Windows' ] ), // XP + Opera12 のみ?
+
+	X_HTMLAudio_need1stTouch	= X_UA[ 'iOS' ] || 4.2 <= X_UA[ 'AOSP' ] || X_UA[ 'ChromeWV' ] || X_UA[ 'WinPhone' ] || ( X_UA[ 'Blink' ] && X_UA[ 'Android' ] ),
+
+	X_HTMLAudio_playTrigger     = ( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ) ? 'canplay' :
+									X_UA[ 'iOS' ] < 8 ? 'suspend' :    // iOS7.x以下
+									X_UA[ 'iOS' ] ? 'loadedmetadata' : // iOS8以上は
+									X_UA[ 'Blink' ] < 32 ? 'stalled' : 'canplaythrough',
+
+	X_HTMLAudio_durationFix	    = // iOS8.1(シュミレータでは不要)
+								  X_UA[ 'iOS' ] < 8 || X_UA[ 'ChromeWV' ] || ( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ) ||
+								  ( X_UA[ 'Windows' ] && 12 <= X_UA[ 'Opera' ] ) || ( X_UA[ 'Blink' ] < 36 && X_UA[ 'Android' ] ),
+
+	X_HTMLAudio_shortPlayFix	= X_UA[ 'AOSP' ],
 	
+	X_HTMLAudio_progressEnabled = !( X_UA[ 'Opera' ] && X_UA[ 'Android' ] ) && !( X_UA[ 'WinPhones' ] && X_UA[ 'IE9' ] ); // Android 4.1.1 でも遭遇
 
-if( window.HTMLAudioElement ){
+if( X_Audio_constructor ){
 	
-	X_Audio_HTMLAudioWrapper = X.EventDispatcher.inherits(
-		'X.AV.HTML5AudioWrapper',
-		X.Class.POOL_OBJECT,
+	X_HTMLAudio = X_AudioBase[ 'inherits' ](
+		'X.HTMLAudio',
+		X_Class.POOL_OBJECT,
 		{
+			// 1: canplaythrought|timeupdateに達している、またはdurationFixが終了している
+			// 2: READY イベント発火済
+			// 3: 1, 2 が済
+			_readyState       : 0,
+			_src			  : '',
+			
+			// 0:ok
+			// 1:touch 要求済
+			// 2:touch による play 済
+			_touchState       : X_HTMLAudio_need1stTouch ? 1 : 0,
 			
-			proxy           : null,
+			_currentFixStart  : 0,
+			_currentFixBegin  : 0,
+
+			// 0:durationFix不要 または 完了
+			// 1:durationFix未着手(touchState=1なら play() に入れる)
+			// 2:canplay イベント発生 -> play()
+			// 4:play() 実施済
+			// 8:duration 取得済
+			//  :timeupdate イベントで durationFixは完了
+			_durationFixPhase : X_HTMLAudio_durationFix ? 1 : 0,
+			_lastCurrentTime  : 0, // ms
+
+			_shortPlayFixON   : false,
+			_shortPlayFixTime : 0,
 			
-			startTime       : 0,
-			endTime         : -1,
-			loopStartTime   : -1,
-			loopEndTime     : -1,
-			seekTime        : -1,
-			duration        : 0,
+			_endedFixON		  : false,
 			
-			playing         : false,
-			error           : 0,			
-			loop            : false,
-			looped          : false,
-			autoplay        : false,
-			volume          : 0.5,
-
-            _timerID         : 0,
-			_playTime        : 0,
-			_closed          : true,
-			_loaded          : false,
-			_playForDuration : false,
-			_currentTimeFix  : 0,
-			_shortFix        : 0,
+			_seekingFixON     : false,
 			
-			Constructor : function( proxy, source, option ){
-				this.proxy   = proxy;
-				this._closed = false;
+			'Constructor' : function( disatcher, source, option ){
+				var raw;
+				
+				this.disatcher = disatcher || this;
+				this._src	   = source;
+				
+				if( X_HTMLAudio_shortPlayFix ){
+					this._shortPlayFixON = X_URL_getEXT( source ) === 'm4a';
+				};
 				
-				X_AudioWrapper_updateStates( this, option );
+				this.setState( option );
 
 				if( option[ 'useVideo' ] ){
-					this._rawObject = document.createElement( 'video' );
-	                this._rawObject.preload           = 'none'; // auto, metadata, none
-	                //this._rawObject.autoplay = false, // no-auto
-	                this._rawObject.loop     = false;
-	                this._rawObject.muted    = false;
-	                //this._rawObject.crossorigin       = option[ 'crossorigin' ] || ''; //crossorigin: "anonymous", X.URL.isSameDomain() で切り替え
-	                this._rawObject.style.cssText     = 'position:absolute;bottom:0;left:-50px;width:100px;height:100px;opacity:0;';
-					this._rawObject.controls          = false;
-					this._rawObject.WebKitPlaysInline = true;
-					this._rawObject.src               = source;
-					//this._rawObject.onclick  = "alert('play');this.play();";
-					document.body.appendChild( this._rawObject );
-					//this._rawObject.load();
+					raw = document.createElement( 'video' );
+					raw.preload		      = 'none'; // auto, metadata, none
+					raw.autoplay		  = false, // no-auto
+					raw.loop			  = false;
+					raw.muted			  = false;
+					raw.crossorigin	      = option[ 'crossorigin' ] || ''; //crossorigin: "anonymous", X.URL.isSameDomain() で切り替え
+					raw.style.cssText	  = 'position:absolute;bottom:0;left:-50px;width:100px;height:100px;opacity:0;';
+					raw.controls		  = false;
+					raw.WebKitPlaysInline = true;
+					X_elmBody.appendChild( raw );
 				} else {
-					this._rawObject = X_Audio_rawAudio || new Audio( source );// X_Doc_create( 'audio', { src : source } ).appendToRoot();//( X.X_Node_systemNode );
+					raw = X_TEMP.rawAudio || new X_Audio_constructor( '' );
+					
+					if( X_TEMP.rawAudio ) delete X_TEMP.rawAudio;
 				};
 				
-				this.listen( [
-						'loadstart', 'load', 'progress', 'suspend', 'abort', 'error', 'emptied', 'stalled', 'play', 'pause', 'loadedmetadata',
-						'loadeddata', 'waiting', 'playing', 'canplay', 'canplaythrough', 'seeking', 'seeked', 'timeupdate', 'ended',
-						'ratechange', 'durationchange', 'volumechange' ], this.handleEventProxy );				
+				this[ '_rawObject' ] = raw;
 				
-				if( X_Audio_rawAudio === this._rawObject ){
-					X_Audio_rawAudio.src = source;
-					/*!X_Audio_Sprite_needTouchFirst && */ X_Audio_rawAudio.load(); // 要る?
-					X_Audio_rawAudio = null;
-				};
+				this[ 'listen' ]( [
+						X_EVENT_KILL_INSTANCE,
+						X_HTMLAudio_playTrigger,
+						//'loadstart', 'load',
+						'progress', //'error',
+						// 'suspend', 'abort', 'emptied', 'stalled',
+						// 'play', 'pause', 'ratechange', 'volumechange',
+						'seeked',
+						'loadedmetadata', 'loadeddata', 'canplay', 'canplaythrough',
+						'playing', 'waiting', 'seeking',
+						'durationchange', 'timeupdate', 'ended' ] );
 
-				//document.body.appendChild( this._rawObject );
+				this[ 'listen' ]( [
+						'loadstart', 'load',
+						'progress', 'error',
+						'suspend', 'abort', 'emptied', 'stalled',
+						'play', 'pause', 'seeked', 'ratechange', 'volumechange',
+						'loadedmetadata', 'loadeddata', 'canplay', 'canplaythrough',
+						'playing', 'waiting', 'seeking',
+						'durationchange', 'timeupdate', 'ended' ], this.onDebug );
 
-				this._rawObject.autoplay = false;
-				
-				this.listenOnce( X.Event.KILL_INSTANCE );
-			},
-			
-			handleEvent : function( e ){
-				switch( e.type ){
+				if( X_HTMLAudio_endedFixAOSP2 || X_HTMLAudio_endedFixAOSP4 ){
+					raw.loop = true; // loop を使えば ended で止まること回避できる 但し ended イベントが起きなくなる
+				};
 
-					case X.Event.KILL_INSTANCE :
-						break;
+				if( X_HTMLAudio_need1stTouch ){
+					raw.src = source;
+				} else {
+					if( this.autoplay ){
+						raw.preload  = 'auto';
+						raw.autoplay = true; // Android 4.0-4.1.x で必要
+						//raw.autobuffer = true;
+					};
+					raw.src = source;
+					raw.load(); // Android4.1.1 HTL21 では必要!
 				};
 			},
-			/*
-			 * http://uguisu.skr.jp/html/table3.html
-			 */
-			handleEventProxy : function( e ){
-				var loaded;
-				console.log( 'HTMLAudio ' + e.type );
+			
+			onDebug : function( e ){
+				this.disatcher[ 'dispatch' ]( {
+					type       : X_EVENT_DEBUG,
+					'rawEvent' : e.type,
+					'current'  : this[ '_rawObject' ].currentTime,
+					duration   : this[ '_rawObject' ].duration } );
+			},
+			
+			handleEvent : function( e ){
+				var raw	   = this[ '_rawObject' ],
+					actualEnded = e.type === 'ended',
+					ended       = actualEnded,
+					i, l, buf, time,
+					ready,
+					eventType, duration, end, now;
 				
+				if( !raw ) return;
+
+				// e.type !== 'timeupdate' && console.log( ' > ' + e.type );
+					
 				switch( e.type ){
-					case 'loadstart' :      // 	ブラウザがコンテンツの検索を開始した場合に発生
+
+					case X_EVENT_KILL_INSTANCE :
+						this.playing && this.actualPause();
+						
+						// 【javascript】モバイル向けブラウザでも音を鳴らしたい【WebAudio】
+						// http://ingaouhou.com/archives/3633
+						// ・使い終わったインスタンスはload()しておくとやや安定
+						raw.src = '';
+						raw.load();
+						
+						// removeChild for video
 						break;
-					case 'progress' :       // 	ブラウザがコンテンツの取得を実行した場合に発生
-						console.log( e.loaded + ' ' + e.total * 100 + '%' );
-						//this._rawObject.duration &&
-						//	console.dir( this._rawObject );
-							//console.log( this._rawObject.buffered.end(0) / this._rawObject.duration * 100 + '%' );
+
+					//case 'loadstart' :	  // 	ブラウザがコンテンツの検索を開始した場合に発生
+						//break;
+					case 'progress' :	   // 	ブラウザがコンテンツの取得を実行した場合に発生
+						// console.log( e.loaded + ' ' + e.total * 100 + '%' );
+						// iem9 で常に0 raw.networkState;
+						// opera Android 12 で　buffered.end() へのアクセスはエラー　try catch も無効、iem9 は常に end(0) = 0
+						if( X_HTMLAudio_progressEnabled && this.duration && this._readyState < 3 ){
+							buf  = raw.buffered;
+							for( i = time = 0, l = buf && buf.length; i < l; ++i ){
+								time += buf[ 'end' ]( i ) - buf[ 'start' ]( i );
+							};
+							this.disatcher[ 'dispatch' ]( { type : X_EVENT_PROGRESS, 'percent' : time * 1000 / this.duration * 100 } );
+						};
 						break;
 					
-					case 'canplay' :        // 	今すぐに再生を再開できるが、バッファリングが不十分でコンテンツを最後まで表示できないと予測している場合に発生
-						if( X_Audio_HTMLAudioWrapper_currentTimeFix2 ){
-							console.log( 'play ' + this.duration );
-							this._playForDuration = true;
-							this._rawObject.currentTime = 0;
-							this._rawObject.play();
-							this._rawObject.currentTime = 0;
+					case 'loadeddata' :	 // 	コンテンツの表示を現在の再生位置で初めて行えるようになった場合に発生
+					case 'canplaythrough' : // 	今すぐに再生を開始してもバッファリングで停止することなく最後まで表示できると予測している場合に発生
+						if( !this._endedFixON && !X_HTMLAudio_durationFix && !X_HTMLAudio_need1stTouch ){
+							this._readyState |= 1;
+						};
+					case 'canplay' :		// 	今すぐに再生を再開できるが、バッファリングが不十分でコンテンツを最後まで表示できないと予測している場合に発生
+						if( this._durationFixPhase === 1 && !X_HTMLAudio_need1stTouch ){ // PC Opera12 用 durationFix
+							this._durationFixPhase = 2;
+							this.actualPlay();
+							raw.currentTime = 0; // Win8 + Opera12 で必要
+						};
+						if( this._endedFixON ){
+							console.log( '▽ onEndedFix の終了 @' + e.type  );
+							this._endedFixON = false;
+							this.actualPlay();
 						};
 					case 'loadedmetadata' : // 	ブラウザがメディアリソースの長さと寸法を判定した場合に発生
-					case 'loadeddata' :     // 	コンテンツの表示を現在の再生位置で初めて行えるようになった場合に発生
-					case 'canplaythrough' : // 	今すぐに再生を開始してもバッファリングで停止することなく最後まで表示できると予測している場合に発生
-						if( X_Audio_HTMLAudioWrapper_currentTimeFix2 ) return;
-						this.duration = this._rawObject.duration * 1000;
-						console.log( this.duration );
+					case 'durationchange' : //  duration属性が更新された場合に発生
+						if( !this.duration || this.duration !== raw.duration * 1000 ){ // Blink28 duration が変わる
+							duration = raw.duration;
+						};
 						break;
 	
-					case 'suspend' :        // 	ブラウザが意図的にコンテンツの取得を現在行っていない場合に発生（ダウンロードは未完了）
-					case 'abort' :          // 	ダウンロードの完了前にコンテンツの取得を停止した場合に発生（この停止はエラーによるものではない）
-					case 'error' :          // 	コンテンツの取得実行中にエラーが発生した場合に発生
-					case 'emptied' :        // 	読み込み中に致命的なエラーが発生したか、実行状態ででload()メソッドが実行された場合に発生
-					case 'stalled' :        // 	ブラウザがコンテンツの取得を試みたが、データがまだ用意されていない場合に発生
-						break;
-					
-					
-					case 'play' :           // 	再生が開始された。play()メソッドからの復帰後に発生する場合に発生
-					case 'pause' :          // 	再生が一時停止された。pauseメソッドからの復帰後に発生する場合に発生
-					case 'waiting' :        // 	次のフレームが利用不可のため再生を停止したが、そのフレームがやがて利用可能になると想定している場合に発生
-					case 'playing' :        // 	再生が開始された場合に発生	
-					case 'seeking' :        // 	シークがtrueに変化し、イベントを発生させるのに十分な時間がシーク操作にかかっている場合に発生
-					case 'seeked' :         // 	シークがfalseに変化した場合に発生
-					case 'ratechange' :     // defaultPlaybackRate属性とplaybackRate属性のどちらかが更新された場合に発生
-					case 'volumechange' :   // volume属性とmuted属性のどちらかが変化した場合に発生
-						if( this._playForDuration ) return;
-						break;
-						
-					case 'timeupdate' :     // 	通常の再生が行われ現在の再生位置の変化が起こった場合に発生
-						// console.log( this._rawObject.currentTime );
-						if( this._playForDuration ) return;			
-						this._onEnded();
-						break;
-					
-					case 'ended' :
-						if( X_Audio_HTMLAudioWrapper_currentTimeFix2 ){
-							delete this._currentTimeFix;
-						};
-						if( !this._closed && this.loop ){
-							this.looped = true;
-							( this.proxy.dispatch( 'looped' ) & X.Callback.PREVENT_DEFAULT ) || this.play();
-						} else {
-							this._timerID && X.Timer.remove( this._timerID );
-							this.seekTime = 0;
-							delete this._timerID;
-							delete this.playing;
+					// TODO firefox で 短い音声でtimeupdate, ended が発火しない <- 最後の音に無音部分を追加する
+					case 'timeupdate' :	 // 	通常の再生が行われ現在の再生位置の変化が起こった場合に発生
+						if( this._seekingFixON ){
+							eventType = X_EVENT_MEDIA_SEEKING;
+						} else
+						if( this._durationFixPhase === 8 ){
+							this._durationFixPhase = 0;
+							this._readyState |= 1;
+						} else
+						if( this._durationFixPhase === 4 ){ // 1 or 2
+							duration = raw.duration;
+							eventType = X_EVENT_MEDIA_WAITING;
+						} else
+						if( this._touchState === 3 && !X_HTMLAudio_durationFix ){
+							this._touchState  = 0;
+							this._readyState |= 1;
+						} else
+						if( ( now = this.getActualCurrentTime() ) === this._lastCurrentTime ){
+							eventType = X_EVENT_MEDIA_WAITING;
+						} else
+						if( X_HTMLAudio_playStartFix && ( now < this._lastCurrentTime ) ){
+							eventType = X_EVENT_MEDIA_WAITING;
+							//console.log( '@Firefox44.0.2 !! ' + now + ' / ' + this._lastCurrentTime );
+							// Firefox44.0.2 で音声の再生開始に難あり...
+							// 20回程度 currentTime の更新に失敗する....
+							this.actualPlay();
+						} else
+						if( this.playing ){
+							end = X_Audio_getEndTime( this ) + this._shortPlayFixTime;
+
+							//console.log( '@ ' + now + ' / ' + this._lastCurrentTime + ' / ' + end );// Firefox44.0.2 で音声の再生開始に難あり...
+
+							if( ( 0 + end <= 0 + now ) || // 0+ なぜか iem9 で必要,,,
+								( now < this._lastCurrentTime && now < 2000 ) ){
+								//( ( X_HTMLAudio_endedFixAOSP2 || X_HTMLAudio_endedFixAOSP4 ) && ( now < this._lastCurrentTime && now < 1000 ) ) ){
+									// loop して0付近に戻った場合
+									// iOS8.4 ではこのタイミングで now が last より 0.1秒後退している場合がある
+									// iOS7.1 ではもっと小さい場合がある,,,
+								if( this.autoLoop ){
+									console.log( '☆★☆ 曲の最後に到達 @timeupdate now-end:' + ( now - end ) + ' now:' + now + ' last:' + this._lastCurrentTime );
+									ended = true;
+									//if( X_HTMLAudio_endedFixIOS ) actualEnded = true;
+								} else {
+									this.actualPause();
+									eventType = X_EVENT_MEDIA_ENDED;
+								};
+							} else {
+								eventType = X_EVENT_MEDIA_PLAYING;
+							};
+							this._lastCurrentTime = now;
 						};
 						break;
 	
-					case 'durationchange' : // duration属性が更新された場合に発生
-						this.duration = this._rawObject.duration * 1000;
-						// console.log( this._rawObject.duration );
+					//case 'stalled' :		// 	ブラウザがコンテンツの取得を試みたが、データがまだ用意されていない場合に発生
+						// Android2 で ready 扱い?
+					//case 'suspend' :		// 	ブラウザが意図的にコンテンツの取得を現在行っていない場合に発生（ダウンロードは未完了）
+						// iOS で ready 扱い
+					//case 'emptied' :		// 	読み込み中に致命的なエラーが発生したか、実行状態ででload()メソッドが実行された場合に発生
+					//case 'abort' :		  // 	ダウンロードの完了前にコンテンツの取得を停止した場合に発生（この停止はエラーによるものではない）
+					//	break;
 						
-						if( this._playForDuration ){
-							this._rawObject.pause();
-							this._rawObject.currentTime = 0.001;
-							delete this._playForDuration;
-							
-			                this.proxy.asyncDispatch( 'loadedmetadata' );
-			                this.proxy.asyncDispatch( 'loadeddata' );
-			                this.proxy.asyncDispatch( 'canplay' );
-			                this.proxy.asyncDispatch( 'canplaythrough' );
-			                loaded = true;
-			                console.log( 'DEsktop Opera のための currentTime と duration の fix が完了' + this.duration );
-						};
-						if( this._currentTimeFix === 1 ){
-							this._currentTimeFix++;
-							this._rawObject.currentTime = this._beginTime / 1000;
-							return;
+					//case 'error' :		  // 	コンテンツの取得実行中にエラーが発生した場合に発生
+						// Opera12 src = '' で error が発生、無視する
+						// eventType = X_EVENT_ERROR;
+						//break;
+						
+					case 'playing' :		// 	再生が開始された場合に発生
+						if( X_HTMLAudio_volumeFix ){
+							raw.volume = this.gain;
 						};
+						//if( X_HTMLAudio_currentTimeFix && !this._currentFixStart ){
+							//this._currentFixStart = X_Timer_now(); // 正確な再生開始時間に補正
+						//};
+						eventType = !this._durationFixPhase && !this._endedFixON ? X_EVENT_MEDIA_PLAYING : X_EVENT_MEDIA_WAITING;
+					//case 'play' :		   // 	再生が開始された。play()メソッドからの復帰後に発生する場合に発生
+					//case 'pause' :		  // 	再生が一時停止された。pauseメソッドからの復帰後に発生する場合に発生
+					//case 'ratechange' :	 // defaultPlaybackRate属性とplaybackRate属性のどちらかが更新された場合に発生
+					//case 'volumechange' :   // volume属性とmuted属性のどちらかが変化した場合に発生
+						break;
+
+					case 'seeking' :		// 	シークがtrueに変化し、イベントを発生させるのに十分な時間がシーク操作にかかっている場合に発生
+						eventType = X_EVENT_MEDIA_SEEKING;
+						if( X_HTMLAudio_seekingFixIOS ) this._seekingFixON = true;
+						break;					
+					case 'seeked' :
+						if( X_HTMLAudio_seekingFixIOS ) this._seekingFixON = false;
 						break;
 					
+					case 'waiting' :		// 	次のフレームが利用不可のため再生を停止したが、そのフレームがやがて利用可能になると想定している場合に発生
+						eventType = X_EVENT_MEDIA_WAITING;
+						break;
 				};
-				//console.log( 'html5 ' + e.type + ' ' + ( this.proxy._listeners && this.proxy._listeners[ e.type ] && this.proxy._listeners[ e.type ].length ) );
-				//e.type === 'canplaythrough' && console.dir( e );
-				loaded || this.proxy.dispatch( e );
 				
-				if( X_Audio_HTMLAudio_playTrigger === e.type || ( X_UA.AndroidBrowser2 && e.type === 'loadeddata' ) || loaded ){
-					!this._loaded && this.autoplay && X.Timer.once( 16, this, this.play );
-					this._loaded = true;
-					console.log( 'Loaded! ' + e.type );
+				// duration は Infinity, NaN, 0 の場合があるため、これを除外する
+				// chrome18 for Android は duration = 100 の間はシークができない? 28 は可能
+				if( 0 < duration && X_Type_isFinite( duration ) && duration !== 100 ){
+					this.duration = duration * 1000;
+
+					if( this._durationFixPhase === 4 ){
+						console.log( '▼ DurationFix の終了 @' + e.type );
+						this._durationFixPhase = 8;
+						
+						if( this.autoplay || this._playReserved ){
+							console.log( '☆ 再生 <- DurationFix の終了' );
+							this.actualPlay();
+						} else
+						if( X_HTMLAudio_pauseFix ){
+							console.log( '☆ PAUSE <- DurationFix の終了' );
+							this.actualPause();
+						};
+					} else
+					if( this._durationFixPhase & 3 ){ // === 1 | 2
+						this._durationFixPhase = 8;
+					};					
+				};
+
+				//
+				if( this._touchState === 1 ){
+					if( e.type === X_HTMLAudio_playTrigger ){
+						this._touchState = 2;
+						this.disatcher[ 'asyncDispatch' ]( X_EVENT_MEDIA_WAIT_FOR_TOUCH );
+					};
+				} else
+				if( ended ){
+					if( this.autoLoop ){
+						if( !( this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_BEFORE_LOOP ) & X_CALLBACK_PREVENT_DEFAULT ) ){
+							this.looped = true;
+							this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_LOOPED );
+							this.actualPlay( X_HTMLAudio_endedFixCWV && actualEnded, X_HTMLAudio_endedFixAOSP3 && actualEnded );
+						};
+					} else {
+						this.seekTime = 0;
+						delete this.playing;
+						this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_ENDED );
+					};
+				} else
+				if( this._readyState === 1 && this.duration ){
+					this._readyState |= 2;
+					this.disatcher[ 'asyncDispatch' ]( X_EVENT_READY );
+					console.log( '> Audio Loaded!! ' + e.type + ' d:' + ( this.duration | 0 ) );
+				} else
+				if( eventType ){
+					this.disatcher[ 'dispatch' ]( eventType );
 				};
 			},
-			
-			close : function(){
-				// 【javascript】モバイル向けブラウザでも音を鳴らしたい【WebAudio】
-				// http://ingaouhou.com/archives/3633
-				// ・使い終わったインスタンスはload()しておくとやや安定
-				this.playing && this.pause();
-				delete this._closed;
-				delete this._loaded;
+
+			actualPlay : function( forcePlay, forceReload ){
+				var raw = this[ '_rawObject' ],
+					begin, end;
+
+				if( !raw ) return;
 				
-				this._rawObject.src = '';
-				this._rawObject.load();
-			},
-			
-			play : function(){
-				var begin, end;
+				this._playReserved = true;
 				
-				// もし kill 後に autoplayTimer で呼ばれても、_closed==true なので平気
-				if( this._closed ) return;
-				if( !this._loaded /* && !X_Audio_Sprite_inTouchAction */ ){
-	            	this.autoplay = true;
-	            	return;
+				if( X_HTMLAudio_pauseFix ){
+					if( !raw.src ){ // X_HTMLAudio_pauseFix によって src が空になっている
+						console.log( '○ 削除された audio.src の復帰' );
+						raw.src = this._src;
+						return;
+					};
+					if( this._durationFixPhase < 2 ){
+						return;
+					};		
 				};
 
-				end   = X_AudioWrapper_getEndTime( this );
-				begin = X_AudioWrapper_getStartTime( this, end, true );
+				if( this._touchState === 2 ){
+					//@dev{
+					var e = X_EventDispatcher_CURRENT_EVENTS[ X_EventDispatcher_CURRENT_EVENTS.length - 1 ];
+					if( !e || !e[ 'pointerType' ] ){
+						alert( 'タッチイベント以外での play! ' + ( e ? e.type : '' ) );
+						return;
+					};
+					//@}
+					this._touchState = 3;
+				} else
+				if( this._readyState !== 3 && this._durationFixPhase < 2 ){
+					return;
+				};
 				
-
-	            if( X_Audio_HTMLAudioWrapper_shortPlayFix ){
-	            	begin -= end - begin > 1000 ? 200 : 400;
-	            	begin  = begin < 0 ? 0 : begin;
-	            };				
+				delete this._playReserved;
 				
-				this._rawObject.currentTime = begin / 1000;
+				if( this._durationFixPhase & 3 ){ // 1 or 2
+					console.log( '▲ DurationFix の開始' );
+					this._durationFixPhase = 4;
+				};
 
+				end   = X_Audio_getEndTime( this );
+				begin = X_Audio_getStartTime( this, end, true );
 
-				if( X_Audio_HTMLAudioWrapper_currentTimeFix2 ){
-					//this._currentTimeFix++;
-					this._beginTime = begin;
+				this._lastCurrentTime = begin;
+
+				if( this._shortPlayFixON ){
+					this._shortPlayFixTime = ( 1000 < end - begin ) ? 200 : 400;
+					if( this.duration < end + this._shortPlayFixTime ){
+						this._shortPlayFixTime = this.duration - end;
+					};
 				};
 
-			    console.log( '[HTMLAudio] play ' + begin + ' -> ' + end );
-			    
-			    if( !this.playing ){
-				    if( X_UA.Chrome ){ // [CHROME][FIX] volume TODO どの version で 修正される？
-				        // [!] delay
-				        X.Timer.once( 0, this, this._fixForChrome );
-				        this._rawObject.volume = 0;
-				    } else {
-				    	this._rawObject.volume = this.volume;
-				    };
-			    	this._rawObject.play();
-			    	this.playing = true;
-			    };
-	            
-	            if( X_Audio_HTMLAudioWrapper_currentTimeFix ){
-	            	//this._timerID && X.Timer.remove( this._timerID );
-                	this._beginTime = begin;
-                	this._playTime  = X_Timer_now();
-                		            	
-	                if( end < this.duration ){
-						//this._timerID   = X.Timer.once( end - begin, this, this._onEnded );
-	                } else {
-	                	delete this._timerID;
-	                };	            	
-	            };
+				if( this._endedFixON ){
+					console.log( '☆ audio.play をスキップ ' + begin + ' -> ' + end + ' crt:' + ( raw.currentTime | 0 ) );
+				} else {
+					if( !this.playing ){
+						if( X_HTMLAudio_volumeFix ){
+							raw.volume = 0;
+						} else {
+							raw.volume = X_HTMLAudio_volumeEnabled ? this.gain : 1;
+						};
+						raw.play();
+						this.playing = true;
+					} else
+					if( X_HTMLAudio_needPlayForSeek || forcePlay ){
+						raw.play();
+					};
+					
+					//http://himaxoff.blog111.fc2.com/blog-entry-97.html
+					//Firefox3.6では一度も play() していない状態で currentTime = 0 を実行するとエラーになる。
+					//また、GoogleChrome7 では currentTime = 0 直後に play() すると、pause()した位置前後の音が混ざることがある。(少なくとも自分の環境では)
+
+					// iOS で duration が 0 の時に触ると error
+					// 0 or 8
+					if( !( this._durationFixPhase % 8 ) && this.duration ) raw.currentTime = this._lastCurrentTime / 1000;
+
+					console.log( '[HTMLAudio] play ' + begin + ' -> ' + end + ' crt:' + ( raw.currentTime | 0 ) + ' last:' + this._lastCurrentTime );
 
+					if( forceReload ){
+						this.playing     = false;
+						this._endedFixON = true;
+						raw.src = this._src;
+						console.log( '△ onEndedFix の開始' );
+						this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_WAITING );
+					};
+				};
+
+				if( X_HTMLAudio_currentTimeFix ){
+					this._currentFixBegin = begin;
+					this._currentFixStart = X_Timer_now();
+				};
 			},
-				
-				// [CHROME][FIX] volume
-				_fixForChrome : X_UA.Chrome && function(){
-					!this._closed && ( this._rawObject.volume = this.volume );
-				},
-				
-				_onEnded : function(){
-					var currentTime, time;
-					
-					delete this._timerID;
-					
-		            if( this.playing ){
-		            	currentTime = X_Audio_HTMLAudioWrapper_currentTimeFix ? X_Timer_now() - this._playTime + this._beginTime : this._rawObject.currentTime * 1000 | 0;
-		            	time        = currentTime - X_AudioWrapper_getEndTime( this );
-
-			            if( X_Audio_HTMLAudioWrapper_shortPlayFix ){
-			            	//time -= this._shortFix;
-			            };
-
-		            	if( time < 0 ){
-	            			console.log( '> onEnd ' + (-time) + ' ' + currentTime + '/' + ( X_AudioWrapper_getEndTime( this ) ) );
-	            			//if( X_Audio_HTMLAudioWrapper_currentTimeFix ) this._timerID = X.Timer.once( -time, this, this._onEnded );
-	            			return;
-		            	};
-		            	
-		            	if( this.loop ){
-		            		this.looped = true;
-		            		( this.proxy.dispatch( 'looped' ) & X.Callback.PREVENT_DEFAULT ) || this.play();
-		            	} else {
-		            		this.pause();
-		            		this.dispatch( 'ended' );
-		            	};
-		            };
-				},
 			
-			pause : function(){
-				if( !this.playing ) return;
-				
-				this.seekTime = this.state().currentTime;
-				
-				if( X_Audio_HTMLAudioWrapper_currentTimeFix2 ){
-					delete this._currentTimeFix;
-				};
+			actualPause : function(){
+				var raw = this[ '_rawObject' ];
 				
-				//this._timerID && X.Timer.remove( this._timerID );
-				//delete this._timerID;
-				delete this._playTime;
+				console.log( '[HTMLAudio] pause' );
 
-		        !this._rawObject.error && this._rawObject.pause();
-		        delete this.playing;
-			},
-	
-			state : function( obj ){
-				var result;
+				delete this._currentFixStart;
+
+				!raw.error && raw.pause();
 				
-				if( obj === undefined ){
-				    return {
-				    	startTime     : this.startTime,
-				    	endTime       : this.endTime < 0 ? this.duration : this.endTime,
-				    	loopStartTime : this.loopStartTime < 0 ? this.startTime : this.loopStartTime,
-				    	loopEndTime   : this.loopEndTime < 0 ? ( this.endTime || this.duration ) : this.loopEndTime,
-				    	
-				        loop          : this.loop,
-				        looped        : this.looped,
-				        volume        : this.volume,
-				        playing       : this.playing, // && !this._rawObject.error && !this._rawObject.paused && !this._rawObject.ended,			        
-				        duration      : this.duration,
-				        
-				    	currentTime   :
-				    		this.playing ?
-				    			( X_Audio_HTMLAudioWrapper_currentTimeFix ?
-				    				X_Timer_now() - this._playTime + this._beginTime :
-				    				this._rawObject.currentTime * 1000 | 0 ) :
-				    			this.seekTime,
-				        /*
-	http://www.w3schools.com/tags/av_prop_error.asp
-	1 = MEDIA_ERR_ABORTED - fetching process aborted by user
-    2 = MEDIA_ERR_NETWORK - error occurred when downloading
-    3 = MEDIA_ERR_DECODE - error occurred when decoding
-    4 = MEDIA_ERR_SRC_NOT_SUPPORTED - audio/video not supported
-    */
-				        error         : this._rawObject.error || 0   // 0, 1 ~ 4 
-				    };					
+				if( X_HTMLAudio_pauseFix ){
+					raw.src = '';
+					if( X_HTMLAudio_durationFix ){
+						delete this._durationFixPhase;
+					};
 				};
+				delete this.playing;
+			},
 			
-				result = X_AudioWrapper_updateStates( this, obj );
-			    
-				if( result & 2 ){ // seek
-	            	this.play();
-				//} else
-				//if( result & 1 ){
-					//if( X_Audio_HTMLAudioWrapper_currentTimeFix ){
-					//	this.play();						
-					//};
-
+			getActualCurrentTime : function(){
+				return ( X_HTMLAudio_currentTimeFix ?
+							X_Timer_now() - this._currentFixStart + this._currentFixBegin :
+							this._seekingFixON ? this._lastCurrentTime :
+							this[ '_rawObject' ].currentTime * 1000 | 0 );
+			},
+		/*
+		http://www.w3schools.com/tags/av_prop_error.asp
+		1 = MEDIA_ERR_ABORTED - fetching process aborted by user
+		2 = MEDIA_ERR_NETWORK - error occurred when downloading
+		3 = MEDIA_ERR_DECODE - error occurred when decoding
+		4 = MEDIA_ERR_SRC_NOT_SUPPORTED - audio/video not supported
+		*/			
+			getActualError : function(){
+				return this[ '_rawObject' ].error || 0;
+			},
+			
+			afterUpdateState : function( result ){
+				if( result & 3 ){ // seek
+					this.actualPlay();
 				} else
-				if( result & 4 ){
-	               this._rawObject.volume = this.volume;
-				};
-			    
+				if( ( result & 4 ) && X_HTMLAudio_volumeEnabled ){
+				   this[ '_rawObject' ].volume = this.gain;
+				};				
 			}
 	
 		}
 	);
 	
-	X_Audio_BACKENDS.push(
+	X_HTMLAudio && X_Audio_BACKENDS.push(
 		{
-			backendName : 'HTML Audio',
+			backendID   : 2,
+			
+			backendName : 'HTMLAudio',
+			
+			canPlay : X_Audio_codecs,
 		/*
 		 * HTML5 の audio 要素と video 要素でサポートされているメディアフォーマット
 		 * https://developer.mozilla.org/ja/docs/Web/HTML/Supported_media_formats
@@ -411,58 +580,29 @@ if( window.HTMLAudioElement ){
 		 *  - volume, muted iPhone(iOS4-6)、Android(2.3.6)では動作せず。
 		 *  - FireFox3.6, Android 2.3.6については、src変更後、load()を呼び出さないと切り替わらなかった。iPhoneはload()が不要。
 		 */	
-			detect : function( proxy, source, ext ){
-				var ok, mineType = 'audio/' + ext;
-				switch( ext ){
-					case 'mp3' :
-						ok = X_UA.IE || X_UA.Chrome || ( X_UA.Windows && X_UA.Safari );
-						mineType = 'audio/mpeg';
-						//if( X_UA.Android && X_UA.Gecko ) mineType = '';
-						break;
-					case 'ogg' :
-						ok = 15 <= X_UA.Gecko || X_UA.Chrome || X_UA.Opera;
-						if( X_UA.AndroidBrowser ) mineType = '';
-						break;
-					case 'm4a' :
-						ok = X_UA.IE || X_UA.WebKit;
-						mineType = 'audio/mp4';
-						break;
-					case 'webm' :
-						ok = 2 <= X_UA.Gecko || 10.6 <= X_UA.Opera; // firefox4+(Gecko2+)
-						break;
-					case 'wav' :
-						ok = X_UA.Gecko || X_UA.Opera || ( X_UA.Windows && X_UA.Safari );
-						//mineType = 'audio/wav'; // audio/x-wav ?
-						break;
-					default :
-						mineType = '';
-				};
-				
-				if( !ok && mineType ){
-					if( !X_Audio_rawAudio ) X_Audio_rawAudio = new Audio;
-					ok = X_Audio_rawAudio.canPlayType( mineType );
-				};
-				
-				proxy.asyncDispatch( ok ? 'support' : 'nosupport' );
+			detect : function( proxy, ext, hash ){
+			// TODO hash.CBR
+			// 得意度で返す
+				proxy[ 'asyncDispatch' ]( { type : X_EVENT_COMPLETE, canPlay : X_Audio_codecs[ ext ] } );
 			},
 			
-			klass : X_Audio_HTMLAudioWrapper
+			klass : X_HTMLAudio
 			
 		} );
 
 /*
  * 
  * howler.js
- *     codecs = {
-      mp3: !!audioTest.canPlayType('audio/mpeg;').replace(/^no$/, ''),
-      opus: !!audioTest.canPlayType('audio/ogg; codecs="opus"').replace(/^no$/, ''),
-      ogg: !!audioTest.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/, ''),
-      wav: !!audioTest.canPlayType('audio/wav; codecs="1"').replace(/^no$/, ''),
-      aac: !!audioTest.canPlayType('audio/aac;').replace(/^no$/, ''),
-      m4a: !!(audioTest.canPlayType('audio/x-m4a;') || audioTest.canPlayType('audio/m4a;') || audioTest.canPlayType('audio/aac;')).replace(/^no$/, ''),
-      mp4: !!(audioTest.canPlayType('audio/x-mp4;') || audioTest.canPlayType('audio/mp4;') || audioTest.canPlayType('audio/aac;')).replace(/^no$/, ''),
-      weba: !!audioTest.canPlayType('audio/webm; codecs="vorbis"').replace(/^no$/, '')
-    };
+ *	 codecs = {
+	  mp3: !!audioTest.canPlayType('audio/mpeg;').replace(/^no$/, ''),
+	  opus: !!audioTest.canPlayType('audio/ogg; codecs="opus"').replace(/^no$/, ''),
+	  ogg: !!audioTest.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/, ''),
+	  wav: !!audioTest.canPlayType('audio/wav; codecs="1"').replace(/^no$/, ''),
+	  aac: !!audioTest.canPlayType('audio/aac;').replace(/^no$/, ''),
+	  m4a: !!(audioTest.canPlayType('audio/x-m4a;') || audioTest.canPlayType('audio/m4a;') || audioTest.canPlayType('audio/aac;')).replace(/^no$/, ''),
+	  mp4: !!(audioTest.canPlayType('audio/x-mp4;') || audioTest.canPlayType('audio/mp4;') || audioTest.canPlayType('audio/aac;')).replace(/^no$/, ''),
+	  weba: !!audioTest.canPlayType('audio/webm; codecs="vorbis"').replace(/^no$/, '')
+	};
  */
 	
 };