OSDN Git Service

fix X.UA & X.Audio, add X.KB.
[pettanr/clientJs.git] / 0.6.x / js / 07_audio / 02_XHTMLAudio.js
index 3972841..dd71bde 100644 (file)
@@ -8,14 +8,17 @@ var X_Audio_HTMLAudio_playTrigger =
                6 <= X_UA[ 'iOS' ] ? 'loadeddata' :\r
                X_UA[ 'iOS' ] < 5  ? 'stalled' :\r
                X_UA[ 'iOS' ]      ? 'suspend' :\r
-               X_UA[ 'AndroidBrowser2' ] || X_UA[ 'AndroidBrowser3' ] ? 'stalled' : // Android 2.3.5(SBM101SH) では stalled は発生しない,,,\r
-               X_UA[ 'AndroidBrowser4' ] ? 'loadeddata' : \r
+               X_UA[ 'AndroidChromeBrowser' ] ? 'canplaythrough' :\r
+               // Android 2.3.5(SBM101SH) では stalled は発生しない,,, ので必ず loadeddata もチェックする\r
+               X_UA[ 'AndroidBrowser' ] ? 'stalled' :\r
                X_UA[ 'OperaMobile' ] || X_UA[ 'OperaTablet' ] ? 'loadeddata' :\r
                //X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ? 'canplay' :\r
                        'loadeddata', //'canplay',\r
        X_Audio_HTMLAudioWrapper,\r
        X_Audio_constructor = window[ 'Audio' ] || window.HTMLAudioElement,\r
        X_Audio_rawAudio,\r
+       // onended イベント時に再生を継続する場合、audio.play() を呼ぶ必要がある\r
+       X_Audio_HTMLAudioWrapper_needPlayOnended = !X_UA[ 'AndroidChromeBrowser' ] && X_UA[ 'AndroidBrowser' ],\r
        // Opera Mobile 12 android4.4.4 & 2.3.5 は 2回目以降の currentTime へのセットで currentTime が更新されなくなるため、タイマーを使用する\r
        X_Audio_HTMLAudioWrapper_currentTimeFix  = !!X_UA[ 'OperaMobile' ] || !!X_UA[ 'OperaTablet' ], // || ( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ),\r
        // Android1.6+MobileOpera12では無理っぽい、、、\r
@@ -30,9 +33,10 @@ var X_Audio_HTMLAudio_playTrigger =
        // opera11、10.54 WinXP はまとも、、、\r
        // X_Audio_Sprite_handleEvent でも使用\r
        X_Audio_HTMLAudioWrapper_ieMobile9Fix    = ( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ),\r
-       X_Audio_HTMLAudioWrapper_durationFix     = ( !X_Audio_HTMLAudioWrapper_currentTimeFix && 12 <= X_UA[ 'Opera' ] ),\r
+       X_Audio_HTMLAudioWrapper_durationFix     = ( !X_Audio_HTMLAudioWrapper_currentTimeFix && 12 <= X_UA[ 'Opera' ] ) || X_UA[ 'AndroidChromeBrowser' ],\r
+       \r
+       X_Audio_HTMLAudioWrapper_shortPlayFix    = X_UA[ 'AndroidBrowser' ] && X_UA[ 'AndroidWebkit' ] <= 534.3, // Android 4.1.1 でも遭遇(ただしm4a, mp3は優秀, oggはシークが乱れる)\r
        \r
-       X_Audio_HTMLAudioWrapper_shortPlayFix    = X_UA[ 'AndroidBrowser' ] && X_UA[ 'AndroidWebkit' ] <= 534.3, // Android 4.1.1 でも遭遇\r
        \r
        X_Audio_codecs;\r
 \r
@@ -43,6 +47,7 @@ if( X_Audio_constructor && !X_Audio_HTMLAudioWrapper_badOperaAndroid ){
 \r
        // https://html5experts.jp/miyuki-baba/3766/\r
        // Chrome for Android31 で HE-AAC が低速再生されるバグ\r
+       // TODO Android4 標準ブラウザで ogg のシークが正しくない!\r
        if( X_Audio_rawAudio.canPlayType ){\r
                X_Audio_codecs = {\r
              'mp3'  : X_Audio_rawAudio.canPlayType('audio/mpeg'),\r
@@ -54,25 +59,41 @@ if( X_Audio_constructor && !X_Audio_HTMLAudioWrapper_badOperaAndroid ){
              'mp4'  : X_Audio_rawAudio.canPlayType('audio/x-mp4') + X_Audio_rawAudio.canPlayType('audio/mp4') + X_Audio_rawAudio.canPlayType('audio/aac'),\r
              'weba' : X_Audio_rawAudio.canPlayType('audio/webm; codecs="vorbis"')\r
                };\r
-               (function( k, v ){\r
+               (function( X_Audio_codecs, k, v ){\r
                        for( k in X_Audio_codecs ){\r
-                               if( X_EMPTY_OBJECT[ k ] ) continue;\r
+                               //if( X_EMPTY_OBJECT[ k ] ) continue;\r
                                v = X_Audio_codecs[ k ];\r
-                               X_Audio_codecs[ k ] = v && v.split( 'no' ).join( '' );\r
-                               console.log( k + ' ' + X_Audio_codecs[ k ] );\r
+                               v = v && !!( v.split( 'no' ).join( '' ) );\r
+                               if( v ){\r
+                                       console.log( k + ' ' + X_Audio_codecs[ k ] );\r
+                                       X_Audio_codecs[ k ] = true;\r
+                               } else {\r
+                                       delete X_Audio_codecs[ k ];\r
+                               };\r
                        };\r
-               })();\r
+               })( X_Audio_codecs );\r
        } else {\r
                // iOS3.2.3\r
                X_Audio_codecs = {\r
-             'mp3'  : X_UA[ 'IE' ] || X_UA[ 'Chrome' ] || ( X_UA[ 'Windows' ]  && X_UA[ 'Safari' ]  ),\r
+             'mp3'  : X_UA[ 'IE' ] || X_UA[ 'Chrome' ] || ( X_UA[ 'Windows' ] && X_UA[ 'Safari' ]  ),\r
              'ogg'  : 5 <= X_UA[ 'Gecko' ] || X_UA[ 'Chrome' ] || X_UA[ 'Opera' ] ,\r
-             'wav'  : X_UA[ 'Gecko' ] || X_UA[ 'Opera' ] || ( X_UA[ 'Windows' ]  && X_UA[ 'Safari' ]  ),\r
+             'wav'  : X_UA[ 'Gecko' ] || X_UA[ 'Opera' ] || ( X_UA[ 'Windows' ] && X_UA[ 'Safari' ]  ),\r
              'aac'  : X_UA[ 'IE' ] || X_UA[ 'WebKit' ],\r
              'm4a'  : X_UA[ 'IE' ] || X_UA[ 'WebKit' ],\r
              'mp4'  : X_UA[ 'IE' ] || X_UA[ 'WebKit' ],\r
              'weba' : 2 <= X_UA[ 'Gecko' ] || 10.6 <= X_UA[ 'Opera' ] // firefox4+(Gecko2+)\r
                };\r
+               (function( X_Audio_codecs, k ){\r
+                       for( k in X_Audio_codecs ){\r
+                               //if( X_EMPTY_OBJECT[ k ] ) continue;\r
+                               if( X_Audio_codecs[ k ] ){\r
+                                       console.log( k + ' ' + X_Audio_codecs[ k ] );\r
+                                       X_Audio_codecs[ k ] = true;\r
+                               } else {\r
+                                       delete X_Audio_codecs[ k ];\r
+                               };\r
+                       };\r
+               })( X_Audio_codecs );\r
        };\r
        \r
        X_Audio_HTMLAudioWrapper = X_Audio_AbstractAudioBackend[ 'inherits' ](\r
@@ -87,12 +108,17 @@ if( X_Audio_constructor && !X_Audio_HTMLAudioWrapper_badOperaAndroid ){
                        _lastCurrentTime : 0,\r
                        _src             : '',\r
                        \r
+                       isM4A            : false,\r
+                       shortPlayFix     : 0,\r
+                       \r
                        'Constructor' : function( target, source, option ){\r
                                var raw;\r
                                \r
                                this.target  = target || this;\r
                                this._closed = false;\r
                                \r
+                               this.isM4A   = X_URL_getEXT( source ) === 'm4a';\r
+                               \r
                                this.setState( option );\r
 \r
                                if( option[ 'useVideo' ] ){\r
@@ -169,7 +195,7 @@ if( X_Audio_constructor && !X_Audio_HTMLAudioWrapper_badOperaAndroid ){
                                X_Audio_HTMLAudioWrapper_badOperaAndroid && alert( e.type );\r
                                \r
                                // global に公開\r
-                               window[ '__rawAudio' ] = this[ '_rawObject' ];\r
+                               //window[ '__rawAudio' ] = this[ '_rawObject' ];\r
                                \r
                                /* X_Audio_HTMLAudioWrapper_ieMobile9Fix && */ e.type !== 'timeupdate' && console.log( e.type );\r
                                \r
@@ -184,8 +210,8 @@ if( X_Audio_constructor && !X_Audio_HTMLAudioWrapper_badOperaAndroid ){
                                                break;\r
                                        \r
                                        case 'canplay' :        //      今すぐに再生を再開できるが、バッファリングが不十分でコンテンツを最後まで表示できないと予測している場合に発生\r
-                                               if( X_Audio_HTMLAudioWrapper_durationFix && this._playForDuration === 0 ){\r
-                                                       //console.log( 'DurationFix開始 - ' + this[ '_rawObject' ].duration );\r
+                                               if( X_Audio_HTMLAudioWrapper_durationFix && this._playForDuration === 0 && !X_UA[ 'AndroidChromeBrowser' ] ){\r
+                                                       console.log( '[duration fix]開始 - ' + this[ '_rawObject' ].duration );\r
                                                        this._playForDuration = 1;\r
                                                        this[ '_rawObject' ].play();\r
                                                        this[ '_rawObject' ].currentTime = this._beginTime / 1000; // 必要!\r
@@ -194,6 +220,7 @@ if( X_Audio_constructor && !X_Audio_HTMLAudioWrapper_badOperaAndroid ){
                                        case 'loadedmetadata' : //      ブラウザがメディアリソースの長さと寸法を判定した場合に発生\r
                                        case 'loadeddata' :     //      コンテンツの表示を現在の再生位置で初めて行えるようになった場合に発生\r
                                        case 'canplaythrough' : //      今すぐに再生を開始してもバッファリングで停止することなく最後まで表示できると予測している場合に発生\r
+                                               X_Audio_HTMLAudioWrapper_durationFix && console.log( '[duration fix]' + e.type + ' ' + this._playForDuration );\r
                                                if( X_Audio_HTMLAudioWrapper_durationFix && this._playForDuration !== 2 ) return;\r
                                                this.duration = this.duration || this[ '_rawObject' ].duration * 1000;\r
                                                break;\r
@@ -235,8 +262,9 @@ if( X_Audio_constructor && !X_Audio_HTMLAudioWrapper_badOperaAndroid ){
                                                        if( !( this.target[ 'dispatch' ]( X_EVENT_MEDIA_BEFORE_LOOP ) & X_CALLBACK_PREVENT_DEFAULT ) ){\r
                                                                this.looped = true;\r
                                                                this.target[ 'dispatch' ]( X_EVENT_MEDIA_LOOPED );\r
-                                                               this.actualPlay();\r
+                                                               this.actualPlay( X_Audio_HTMLAudioWrapper_needPlayOnended );\r
                                                        };\r
+                                                       // Android4.1.1 ended 後に曲の再生が継続できない\r
                                                        return;\r
                                                };\r
                                                type = X_EVENT_MEDIA_ENDED;\r
@@ -249,11 +277,10 @@ if( X_Audio_constructor && !X_Audio_HTMLAudioWrapper_badOperaAndroid ){
                                                if( X_Audio_HTMLAudioWrapper_ieMobile9Fix ){\r
                                                        if( this._playForDuration === 1 ){\r
                                                                console.log( 'tu ' + this[ '_rawObject' ].duration );\r
-                                                               if( !this.duration && X_Type_isFinite( this[ '_rawObject' ].duration ) ){\r
+                                                               if( !this.duration && X_Type_isFinite( this[ '_rawObject' ].duration ) && 0 < this[ '_rawObject' ].duration ){\r
                                                                        this.duration = this.duration || this[ '_rawObject' ].duration * 1000;\r
                                                                        this._playForDuration = 2;\r
                                                        loaded = true;\r
-                                                       //console.log( 'durationFix が完了' + this.duration );\r
                                                        break;\r
                                                                } else {\r
                                                                        this[ '_rawObject' ].currentTime = this._beginTime / 1000; // 必要!\r
@@ -261,7 +288,6 @@ if( X_Audio_constructor && !X_Audio_HTMLAudioWrapper_badOperaAndroid ){
                                                                };\r
                                                        } else\r
                                                        if( this[ '_rawObject' ].currentTime === this._lastCurrentTime ){\r
-                                                               //this.target[ 'dispatch' ]( 'seeking' );\r
                                                                this.target[ 'dispatch' ]( X_EVENT_MEDIA_WAITING );\r
                                                                return;\r
                                                        };\r
@@ -270,10 +296,10 @@ if( X_Audio_constructor && !X_Audio_HTMLAudioWrapper_badOperaAndroid ){
                                                this.duration = this.duration || this[ '_rawObject' ].duration * 1000;\r
 \r
                                    if( this.playing ){\r
-                                       end = X_AudioWrapper_getEndTime( this );\r
+                                       end = X_AudioWrapper_getEndTime( this ) + this.shortPlayFix;\r
                                        now = this.getActualCurrentTime();\r
                                        console.log( now + ' / ' + end );\r
-                                       if( 0 + end <= 0 + now ){ // なぜか iem9 で必要,,,\r
+                                       if( 0 + end <= 0 + now ){ // 0+ なぜか iem9 で必要,,,\r
                                                if( this.autoLoop ){\r
                                                        if( !( this.target[ 'dispatch' ]( X_EVENT_MEDIA_BEFORE_LOOP ) & X_CALLBACK_PREVENT_DEFAULT ) ){\r
                                                                this.looped = true;\r
@@ -296,9 +322,10 @@ if( X_Audio_constructor && !X_Audio_HTMLAudioWrapper_badOperaAndroid ){
                                                \r
                                                if( !X_Audio_HTMLAudioWrapper_durationFix ){\r
                                                        this.duration = this[ '_rawObject' ].duration * 1000;\r
+                                                       console.log( 'duration : ' + this.duration );\r
                                                } else\r
-                                               // Desktop Opera では Infinity, IEM9 では NaN\r
-                                               if( !this.duration && X_Type_isFinite( this[ '_rawObject' ].duration ) ){\r
+                                               // Desktop Opera では Infinity, IEM9 では NaN, Android標準ブラウザ(Chrome)では 0\r
+                                               if( !this.duration && X_Type_isFinite( this[ '_rawObject' ].duration ) && 0 < this[ '_rawObject' ].duration ){\r
                                                        \r
                                                        //console.log( this[ '_rawObject' ].duration );\r
                                                        \r
@@ -309,20 +336,21 @@ if( X_Audio_constructor && !X_Audio_HTMLAudioWrapper_badOperaAndroid ){
                                                        if( this._playForDuration === 1 ){\r
                                                                this._playForDuration = 2;\r
                                                                \r
-                                                               console.log( 'Loaded ' + this._loaded );\r
+                                                               console.log( '[duration fix] Loaded ' + this._loaded );\r
                                                                \r
                                                                if( this._loaded ){\r
                                                                        this[ '_rawObject' ].currentTime = this._beginTime / 1000;\r
-                                                                       console.log( '設定 ' + this._beginTime );\r
+                                                                       console.log( '[duration fix] 設定 ' + this._beginTime );\r
                                                                        return;\r
                                                                };\r
 \r
                                                loaded = true;\r
-                                               console.log( 'durationFix が完了' + this.duration );\r
+                                               console.log( '[duration fix] 完了' + this.duration );\r
                                                \r
                                                if( this.autoplay ){\r
                                                                        this[ '_rawObject' ].currentTime = this._beginTime / 1000;      \r
-                                               } else {\r
+                                               } else\r
+                                               if( X_UA[ 'Opera' ] ){\r
                                                        // Opera12.17 WinXP で勝手に再生される不具合\r
                                                        // これで一応再生は止まる、、、\r
                                                                        this[ '_rawObject' ].src = '';\r
@@ -340,17 +368,18 @@ if( X_Audio_constructor && !X_Audio_HTMLAudioWrapper_badOperaAndroid ){
                                        this.autoplay && X_Timer_once( 16, this, this.play );\r
                                        this._loaded = true;\r
                                        this.target[ 'asyncDispatch' ]( X_EVENT_READY );\r
-                                       console.log( 'Loaded! ' + e.type + ' d:' + ( this.duration | 0 ) );\r
+                                       console.log( '> Audio Loaded!! ' + e.type + ' d:' + ( this.duration | 0 ) );\r
                                        return;\r
                                };\r
                                \r
                                if( !loaded && type ){\r
+                                       console.log( '(2) ' + e.type + ' d:' + ( this.duration | 0 ) );\r
                                        this.target[ 'dispatch' ]( type );\r
                                        type === X_EVENT_ERROR && this[ 'kill' ]();\r
                                };\r
                        },\r
 \r
-                       actualPlay : function(){\r
+                       actualPlay : function( forcePlay ){\r
                                var begin, end;\r
                                \r
                                // もし kill 後に autoplayTimer で呼ばれても、_closed==true なので平気\r
@@ -368,9 +397,11 @@ if( X_Audio_constructor && !X_Audio_HTMLAudioWrapper_badOperaAndroid ){
                                end   = X_AudioWrapper_getEndTime( this );\r
                                begin = this._beginTime = X_AudioWrapper_getStartTime( this, end, true );\r
 \r
-                   if( X_Audio_HTMLAudioWrapper_shortPlayFix ){\r
-                       begin -= ( end - begin > 1000 ) ? 200 : 400;\r
-                       begin  = begin < 0 ? 0 : begin;\r
+                   if( X_Audio_HTMLAudioWrapper_shortPlayFix && this.isM4A ){\r
+                       this.shortPlayFix = ( 1000 < end - begin ) ? 200 : 400;\r
+                       if( this.duration < end + this.shortPlayFix ){\r
+                               this.shortPlayFix = this.duration - end;\r
+                       };\r
                    };\r
 \r
                                if( !this[ '_rawObject' ].src ){\r
@@ -379,7 +410,7 @@ if( X_Audio_constructor && !X_Audio_HTMLAudioWrapper_badOperaAndroid ){
                                        delete this._playForDuration;\r
                                };\r
 \r
-                           if( !this.playing ){\r
+                           if( !this.playing || forcePlay ){\r
                                    if( X_UA[ 'Chrome' ] ){ // [CHROME][FIX] volume TODO どの version で 修正される?\r
                                        // [!] delay\r
                                        X_Timer_once( 0, this, this._fixForChrome );\r
@@ -423,7 +454,7 @@ if( X_Audio_constructor && !X_Audio_HTMLAudioWrapper_badOperaAndroid ){
 \r
                        !this[ '_rawObject' ].error && this[ '_rawObject' ].pause();\r
                        \r
-                       if( X_Audio_HTMLAudioWrapper_durationFix ){\r
+                       if( X_Audio_HTMLAudioWrapper_durationFix && X_UA[ 'Opera' ] ){\r
                                this[ '_rawObject' ].src = '';\r
                                // load();\r
                        };\r
@@ -492,41 +523,6 @@ if( X_Audio_constructor && !X_Audio_HTMLAudioWrapper_badOperaAndroid ){
                 *  - FireFox3.6, Android 2.3.6については、src変更後、load()を呼び出さないと切り替わらなかった。iPhoneはload()が不要。\r
                 */     \r
                        detect : function( proxy, source, ext ){\r
-                               /*\r
-                               var ok, mineType = 'audio/' + ext;\r
-                               switch( ext ){\r
-                                       case 'mp3' :\r
-                                               ok = X_UA[ 'IE' ] || X_UA[ 'Chrome' ] || ( X_UA[ 'Windows' ]  && X_UA[ 'Safari' ]  );\r
-                                               mineType = 'audio/mpeg';\r
-                                               //if( X_UA[ 'Android' ] && X_UA[ 'Gecko' ] ) mineType = '';\r
-                                               break;\r
-                                       case 'ogg' :\r
-                                               ok = 15 <= X_UA[ 'Gecko' ] || X_UA[ 'Chrome' ] || X_UA[ 'Opera' ] ;\r
-                                               if( X_UA[ 'AndroidBrowser' ] ) mineType = '';\r
-                                               break;\r
-                                       case 'm4a' :\r
-                                               ok = X_UA[ 'IE' ] || X_UA[ 'WebKit' ];\r
-                                               mineType = 'audio/mp4';\r
-                                               break;\r
-                                       case 'webm' :\r
-                                               ok = 2 <= X_UA[ 'Gecko' ] || 10.6 <= X_UA[ 'Opera' ] ; // firefox4+(Gecko2+)\r
-                                               break;\r
-                                       case 'wav' :\r
-                                               ok = X_UA[ 'Gecko' ] || X_UA[ 'Opera' ] || ( X_UA[ 'Windows' ]  && X_UA[ 'Safari' ]  );\r
-                                               //mineType = 'audio/wav'; // audio/x-wav ?\r
-                                               break;\r
-                                       default :\r
-                                               mineType = '';\r
-                               };\r
-                               \r
-                               if( !ok && mineType ){\r
-                                       if( !X_Audio_rawAudio ) X_Audio_rawAudio = new Audio;\r
-                                       ok = X_Audio_rawAudio.canPlayType( mineType );\r
-                                       //console.log( 'HTML Audio ' + ok + ' ext:' + ext );\r
-                               };\r
-                               console.log( 'HTML Audio ' + ok + ' ext:' + ext );\r
-                               */\r
-                               \r
                                proxy[ 'asyncDispatch' ]( { type : X_EVENT_COMPLETE, canPlay : X_Audio_codecs[ ext ] } );\r
                        },\r
                        \r