OSDN Git Service

Version 0.6.179, fix X.Audio & X.AudioSprite.
[pettanr/clientJs.git] / 0.6.x / js / 07_audio / 02_XHTMLAudio.js
index e792bcd..61f3ddd 100644 (file)
@@ -8,23 +8,43 @@
  * 1. iOS4(iPod 2G) で ended に達すると音が鳴らなくなる fix で解決\r
  * 2. iOS6(iPod 4G) で ended に達すると音が鳴らなくなる fix で頻度が改善 emded イベントは発しないので、timeupdate 時に currentTime で判断する\r
  * 3. WP7(IS12T) で最後の方にある音が鳴らない? mp3 cbr を使えばいい? 裏に回っても音が鳴り続ける\r
- * 4. Android 3.x で ended に達すると音が鳴らなくなる -> リロード(audio.src='';audio.sr=src)で解決、但し 2.x 4.x より遅延が大きく 1 秒弱程度ある\r
- * 5. Android 2.x で ended に達すると音が鳴らなくなる -> リロード(audio.src='';audio.src=src;audio.load())でで解決\r
- * 6. Android 4.4.2- は ended に達した際に currentTime が変更できなくなり、リロードが必要になる, 4.0, 4.1, 4.2, 4.3 で確認\r
- * 7. Blink5 Opera32 Win8 は HTMLAudio が壊れている、WebAudio は mp3 がデコードに失敗、ogg が動作\r
+ * 4. AOSP 2.x で ended に達すると音が鳴らなくなる -> リロード(audio.src='';audio.src=src;audio.load())でで解決\r
+ * 5. AOSP 3.x で ended に達すると音が鳴らなくなる -> リロード(audio.src='';audio.sr=src)で解決、但し 2.x 4.x より遅延が大きく 1 秒弱程度ある\r
+ * 6. AOSP 4.4.2- は ended に達した際に currentTime が変更できなくなり、リロードが必要になる, 4.0, 4.1, 4.2, 4.3 で確認, play() で頻度低下\r
+ * 7. Android 4.4.4 Chrome WebView は ended に達した際に play() が必要\r
+ * 8. BlinkOpera32 Win8 は HTMLAudio が壊れている、WebAudio は mp3 がデコードに失敗、ogg が動作\r
  * \r
  * memo\r
- * 1. Android4.1 iframe 内の Audio は親に focus が移っても再生を継続する\r
+ * 1. AOSP4.1 iframe 内の Audio は親に focus が移っても再生を継続する\r
+ * 2. AOSP4.2(Genymotion) どこかのタイミングでタッチによる play を行う\r
+ * 3. AOSP oggはシークが乱れる m4a, mp3 は優秀\r
  */\r
+       /*\r
+        * durationFix\r
+        *  duration が取得できるタイミングが遅くそれまでは infinity(PC Opera12), NaN(WP9), 0(Android 標準ブラウザ ChromeWebView) が入っている\r
+        * \r
+        *   1. touch が不要の場合、自動で再生を開始して duration を取得するまで再生する\r
+        *        -> 取得後に pause or 通常再生\r
+        *   2. touch が必要な場合、タッチイベント内の audio.play() で duration 取得\r
+        * \r
+        *  PC Opera12\r
+        *   1. loadeddata 等では duration が infinity で、再生後の durationchange 時に duration が判明する\r
+        *   2. duration 判明後には currentTime によるシークと、現在時間の取得が可能になる。\r
+        *   3. Opera12.17 Win32(XP) portable apps は勝手に再生が始まる、、、Win8+Opera では発生しない\r
+        *        -> その際には timeupdate が発行されない、、、 iframe+image+audio で使わないときは破棄する、とか。\r
+        *        -> opera11、10.54 WinXP はまとも、、、 portable が怪しい??\r
+        */\r
 \r
 var X_HTMLAudio_playTrigger =\r
-               6 <= X_UA[ 'iOS' ] ? 'loadeddata' :\r
-               X_UA[ 'iOS' ] < 5  ? 'stalled' :\r
-               X_UA[ 'iOS' ]      ? 'suspend' :\r
+               X_UA[ 'iOS' ] < 5    ? 'stalled' :\r
+               X_UA[ 'iOS' ] < 6    ? 'suspend' :\r
+               X_UA[ 'iOS' ] < 7    ? 'suspend' :\r
+               X_UA[ 'iOS' ]        ? 'loadeddata' :\r
                X_UA[ 'Safari' ] < 4 ? 'canplaythrough' :\r
                X_UA[ 'ChromeWV' ]   ? 'canplaythrough' :\r
                // Android 2.3.5(SBM101SH) では stalled は発生しない,,, ので必ず loadeddata もチェックする\r
-               X_UA[ 'AOSP' ] ? 'stalled' :\r
+               //X_UA[ 'AOSP' ] < 3 ? 'stalled' :\r
+               //X_UA[ 'AOSP' ] ? 'playing' :\r
                X_UA[ 'OperaMobile' ] || X_UA[ 'OperaTablet' ] ? 'loadeddata' :\r
                        'loadeddata', //'canplay',\r
        X_HTMLAudio,\r
@@ -37,6 +57,8 @@ var X_HTMLAudio_playTrigger =
        X_HTMLAudio_endedFixAOSP3   = !X_HTMLAudio_endedFixAOSP2 && X_UA[ 'AOSP' ] < 4,\r
        // ended 時に play() を実施, currentTime が duration に張り付き更新されなければ  src='';src=src を実施。\r
        X_HTMLAudio_endedFixAOSP4   = 4 <= X_UA[ 'AOSP' ],\r
+       // ended 時に play() を実施\r
+       X_HTMLAudio_endedFixCWV     = X_UA[ 'ChromeWV' ],\r
        \r
        // Opera Mobile 12 は 2回目以降の currentTime へのセットで currentTime が更新されなくなるため、タイマーを使用する\r
        X_HTMLAudio_currentTimeFix  = !!X_UA[ 'OperaMobile' ] || !!X_UA[ 'OperaTablet' ],\r
@@ -50,25 +72,11 @@ var X_HTMLAudio_playTrigger =
        X_HTMLAudio_needPlayForSeek = X_UA[ 'Gecko' ],\r
        // \r
        X_HTMLAudio_pauseFix            = ( X_UA[ 'Windows' ] && 12 <= X_UA[ 'Opera' ] && 0 < ' XP XPSP2 2003|XP64'.indexOf( X_UA[ 'Windows' ] ) ), // XP + Opera12 のみ?\r
-       /*\r
-        * durationFix\r
-        *  duration が取得できるタイミングが遅くそれまでは infinity(PC Opera12), NaN(WP9), 0(Android 標準ブラウザ ChromeWebkit 系) が入っている\r
-        * \r
-        *   1. touch が不要の場合、自動で再生を開始して duration を取得するまで再生する\r
-        *        -> 取得後に pause or 通常再生\r
-        *   2. touch が必要な場合、タッチイベント内の audio.play() で duration 取得\r
-        * \r
-        *  PC Opera12\r
-        *   1. loadeddata 等では duration が infinity で、再生後の durationchange 時に duration が判明する\r
-        *   2. duration 判明後には currentTime によるシークと、現在時間の取得が可能になる。\r
-        *   3. Opera12.17 Win32(XP) portable apps は勝手に再生が始まる、、、Win8+Opera では発生しない\r
-        *        -> その際には timeupdate が発行されない、、、 iframe+image+audio で使わないときは破棄する、とか。\r
-        *        -> opera11、10.54 WinXP はまとも、、、 portable が怪しい??\r
-        */\r
-       X_HTMLAudio_need1stTouch        = X_UA[ 'iOS' ] || X_UA[ 'ChromeWV' ] || ( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ),       \r
-       X_HTMLAudio_durationFix     = ( X_UA[ 'Windows' ] && 12 <= X_UA[ 'Opera' ] ) || X_UA[ 'ChromeWV' ] || ( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ),\r
+\r
+       X_HTMLAudio_need1stTouch        = X_UA[ 'iOS' ] || 4 <= X_UA[ 'AOSP' ] || X_UA[ 'ChromeWV' ] || X_UA[ 'WinPhone' ],     \r
+       X_HTMLAudio_durationFix     = X_UA[ 'iOS' ] || X_UA[ 'ChromeWV' ] || ( X_UA[ 'Windows' ] && 12 <= X_UA[ 'Opera' ] ) || ( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ),\r
        \r
-       X_HTMLAudio_shortPlayFix        = X_UA[ 'AOSP' ]; // Android 4.1.1 でも遭遇(ただしm4a, mp3は優秀, oggはシークが乱れる)\r
+       X_HTMLAudio_shortPlayFix        = X_UA[ 'AOSP' ]; // Android 4.1.1 でも遭遇\r
        \r
        \r
 \r
@@ -87,7 +95,7 @@ if( X_Audio_constructor ){
                        _currentFixBegin  : 0,\r
 \r
                        _durationFixPhase : X_HTMLAudio_durationFix ? 1 : 0,\r
-                       _durationFixSkip  : X_HTMLAudio_durationFix && !X_HTMLAudio_need1stTouch,                       \r
+                       _durationFixSkip  : X_HTMLAudio_durationFix && !X_HTMLAudio_need1stTouch,\r
                        _lastCurrentTime  : 0,\r
 \r
                        _shortPlayFixON   : false,\r
@@ -95,12 +103,12 @@ if( X_Audio_constructor ){
                        \r
                        _endedFixON               : false,\r
                        \r
-                       'Constructor' : function( target, source, option ){\r
+                       'Constructor' : function( disatcher, source, option ){\r
                                var raw;\r
                                \r
-                               this.target  = target || this;\r
-                               this._closed = false;\r
-                               this._src       = source;\r
+                               this.disatcher = disatcher || this;\r
+                               this._closed   = false;\r
+                               this._src          = source;\r
                                \r
                                if( X_HTMLAudio_shortPlayFix ){\r
                                        this._shortPlayFixON = X_URL_getEXT( source ) === 'm4a';\r
@@ -119,7 +127,7 @@ if( X_Audio_constructor ){
                                        raw.controls              = false;\r
                                        raw.WebKitPlaysInline = true;\r
                                        raw.src                       = source;\r
-                                       document.body.appendChild( raw );\r
+                                       X_elmBody.appendChild( raw );\r
                                } else {\r
                                        raw = X_TEMP.rawAudio || new X_Audio_constructor( source );\r
                                        // X_Doc_create( 'audio', { src : source } )[ 'appendTo' ]( X.Doc.body );\r
@@ -139,13 +147,31 @@ if( X_Audio_constructor ){
                                                'playing', 'waiting', 'seeking',\r
                                                'durationchange', 'timeupdate', 'ended' ] );\r
 \r
+\r
+                               this[ 'listen' ]( [\r
+                                               'loadstart', 'load',\r
+                                               'progress', 'error',\r
+                                               'suspend', 'abort', 'emptied', 'stalled',\r
+                                               'play', 'pause', 'seeked', 'ratechange', 'volumechange',\r
+                                               'loadedmetadata', 'loadeddata', 'canplay', 'canplaythrough',\r
+                                               'playing', 'waiting', 'seeking',\r
+                                               'durationchange', 'timeupdate', 'ended' ], this.onDebug );\r
+\r
                                if( X_TEMP.rawAudio ){\r
                                        raw.src = source;\r
-                                       raw.load(); // AOSP2 で必要\r
+                                       X_UA[ 'AOSP' ] < 3 && raw.load();\r
                                        delete X_TEMP.rawAudio;\r
                                };\r
                        },\r
                        \r
+                       onDebug : function( e ){\r
+                               this.disatcher[ 'dispatch' ]( {\r
+                                       type       : X_EVENT_DEBUG,\r
+                                       'rawEvent' : e.type,\r
+                                       current    : this.getActualCurrentTime() | 0,\r
+                                       duration   : this.duration | 0 } );\r
+                       },\r
+                       \r
                        handleEvent : function( e ){\r
                                var raw    = this[ '_rawObject' ],\r
                                        actualEnded = e.type === 'ended',\r
@@ -212,10 +238,10 @@ if( X_Audio_constructor ){
                                                if( this._durationFixPhase & 3 ){ // 1 or 2\r
                                                        duration = raw.duration;\r
                                                } else\r
-                                               if( raw.currentTime === this._lastCurrentTime ){\r
+                                               if( this.getActualCurrentTime() === this._lastCurrentTime ){\r
                                                        eventType = X_EVENT_MEDIA_WAITING;\r
                                                } else {\r
-                                                       this._lastCurrentTime = raw.currentTime;\r
+                                                       this._lastCurrentTime = this.getActualCurrentTime();\r
 \r
                                                        if( this.playing ){\r
                                                                end = X_Audio_getEndTime( this ) + this._shortPlayFixTime;\r
@@ -254,8 +280,8 @@ if( X_Audio_constructor ){
                                                if( X_HTMLAudio_volumeFix ){\r
                                                        raw.volume = this.gain;\r
                                                };\r
-                                               if( X_HTMLAudio_currentTimeFix ){\r
-                                                       this._currentFixStart = X_Timer_now(); // 正確な再生開始時間に補正\r
+                                               if( X_HTMLAudio_currentTimeFix && !this._currentFixStart ){\r
+                                                       //this._currentFixStart = X_Timer_now(); // 正確な再生開始時間に補正\r
                                                };\r
                                                eventType = !this._durationFixSkip && !this._endedFixON ? X_EVENT_MEDIA_PLAYING : X_EVENT_MEDIA_WAITING;\r
                                        //case 'play' :            //   再生が開始された。play()メソッドからの復帰後に発生する場合に発生\r
@@ -305,28 +331,28 @@ if( X_Audio_constructor ){
                                // \r
                                if( ended ){\r
                                        if( !this._closed && this.autoLoop ){\r
-                                               if( !( this.target[ 'dispatch' ]( X_EVENT_MEDIA_BEFORE_LOOP ) & X_CALLBACK_PREVENT_DEFAULT ) ){\r
+                                               if( !( this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_BEFORE_LOOP ) & X_CALLBACK_PREVENT_DEFAULT ) ){\r
                                                        this.looped = true;\r
-                                                       this.target[ 'dispatch' ]( X_EVENT_MEDIA_LOOPED );\r
-                                                       ( X_HTMLAudio_endedFixAOSP3 || X_HTMLAudio_endedFixAOSP4 || X_HTMLAudio_endedFixIOS ) && actualEnded && console.log( '☆★☆ 音声の継続用の play() @ended' );\r
+                                                       this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_LOOPED );\r
+                                                       ( X_HTMLAudio_endedFixAOSP3 || X_HTMLAudio_endedFixAOSP4 || X_HTMLAudio_endedFixCWV || X_HTMLAudio_endedFixIOS ) && actualEnded && console.log( '☆★☆ 音声の継続用の play() @ended' );\r
                                                        this.actualPlay(\r
-                                                               ( X_HTMLAudio_endedFixAOSP4 || X_HTMLAudio_endedFixIOS ) && actualEnded,\r
+                                                               ( X_HTMLAudio_endedFixAOSP4 || X_HTMLAudio_endedFixCWV || X_HTMLAudio_endedFixIOS ) && actualEnded,\r
                                                                ( X_HTMLAudio_endedFixAOSP3 || X_HTMLAudio_endedFixAOSP2 ) && actualEnded );\r
                                                };\r
                                        } else {\r
                                                this.seekTime = 0;\r
                                                delete this.playing;\r
-                                               this.target[ 'dispatch' ]( X_EVENT_MEDIA_ENDED );\r
+                                               this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_ENDED );\r
                                        };\r
                                } else\r
                                if( this._loaded && this.duration && !this._ready ){\r
                                        this._ready = true;\r
-                                       this.autoplay && X_Timer_once( 16, this, this.play );\r
-                                       this.target[ 'asyncDispatch' ]( X_EVENT_READY );\r
+                                       this.disatcher[ 'asyncDispatch' ]( X_EVENT_READY );\r
+                                       this.autoplay && !X_WebAudio_need1stTouch && X_Timer_once( 16, this, this.play );\r
                                        console.log( '> Audio Loaded!! ' + e.type + ' d:' + ( this.duration | 0 ) );\r
                                } else\r
                                if( eventType ){\r
-                                       this.target[ 'dispatch' ]( eventType );\r
+                                       this.disatcher[ 'dispatch' ]( eventType );\r
                                        eventType === X_EVENT_ERROR && this[ 'kill' ]();\r
                                };\r
                        },\r
@@ -389,18 +415,17 @@ if( X_Audio_constructor ){
                                        //また、GoogleChrome7 では currentTime = 0 直後に play() すると、pause()した位置前後の音が混ざることがある。(少なくとも自分の環境では)                                                                        \r
                                        raw.currentTime = this._lastCurrentTime;\r
                                        console.log( '[HTMLAudio] play ' + begin + ' -> ' + end + ' crt:' + ( raw.currentTime | 0 ) + ' last:' + this._lastCurrentTime );\r
-                                       \r
-                                       // Android4.0.5 で ended イベント時に currentTime が duration に張り付いたまま変更できない\r
-                                       if( forceReload || ( raw.duration && raw.currentTime === raw.duration ) ){\r
+\r
+                                       if( forceReload || ( X_HTMLAudio_endedFixAOSP4 && raw.duration && raw.currentTime === raw.duration ) ){\r
                                                raw.src          = '';\r
                                                raw.src          = this._src;\r
                                                this.playing     = false;\r
                                                this._endedFixON = true;\r
                                                console.log( '△ onEndedFix の開始' );\r
                                                raw.currentTime  = this._lastCurrentTime;\r
-                                               this.target[ 'dispatch' ]( X_EVENT_MEDIA_WAITING );                                                                                             \r
+                                               this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_WAITING );\r
                                                X_HTMLAudio_endedFixAOSP2 && raw.load();\r
-                                       };                                                      \r
+                                       };\r
                                };\r
 \r
                                if( X_HTMLAudio_currentTimeFix ){\r