X-Git-Url: http://git.osdn.jp/view?a=blobdiff_plain;f=0.6.x%2Fjs%2F07_audio%2F02_XHTMLAudio.js;h=ac385713025a126ace208f91612cdbce29196e79;hb=512e08f4d38eab417f9651277e8a50c08535cb07;hp=786f343ba086d2fe5e04e08d2ec0b4562f8a6f54;hpb=3c07e12e13272820cedf983e0d9fe46e5f0a4bd9;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 786f343..ac38571 100644 --- a/0.6.x/js/07_audio/02_XHTMLAudio.js +++ b/0.6.x/js/07_audio/02_XHTMLAudio.js @@ -39,8 +39,9 @@ var X_HTMLAudio, - - // ended が発生しない timeupdate 内で play() を呼ぶ (未検証) 不具合確認は iOS4,6 + // 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, @@ -59,18 +60,25 @@ var * win opera12 volume, mute の変更が2度目以降できない */ X_HTMLAudio_volumeEnabled = !( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ) && !X_UA[ 'Opera' ], - // Gecko PC + Android でseek時に再生がしばしば止まる問題の修正 + // 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_playTrigger = ( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ) ? 'canplay' : X_UA[ 'iOS' ] ? 'suspend' : X_UA[ 'Blink' ] ? 'stalled' : 'canplaythrough', - - X_HTMLAudio_durationFix = X_UA[ 'iOS' ] || X_UA[ 'ChromeWV' ] || ( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ) || ( X_UA[ 'Windows' ] && 12 <= X_UA[ 'Opera' ] ), - - X_HTMLAudio_shortPlayFix = X_UA[ 'AOSP' ]; // Android 4.1.1 でも遭遇 + X_HTMLAudio_progressEnabled = !( X_UA[ 'Opera' ] && X_UA[ 'Android' ] ) && !( X_UA[ 'WinPhones' ] && X_UA[ 'IE9' ] ); // Android 4.1.1 でも遭遇 if( X_Audio_constructor ){ @@ -78,10 +86,9 @@ if( X_Audio_constructor ){ 'X.HTMLAudio', X_Class.POOL_OBJECT, { - _closed : true, - // 1: canplaythrought|timeupdateに達している、またはdurationFixが終了している // 2: READY イベント発火済 + // 3: 1, 2 が済 _readyState : 0, _src : '', @@ -107,11 +114,12 @@ if( X_Audio_constructor ){ _endedFixON : false, + _seekingFixON : false, + 'Constructor' : function( disatcher, source, option ){ var raw; this.disatcher = disatcher || this; - this._closed = false; this._src = source; if( X_HTMLAudio_shortPlayFix ){ @@ -145,7 +153,8 @@ if( X_Audio_constructor ){ //'loadstart', 'load', 'progress', //'error', // 'suspend', 'abort', 'emptied', 'stalled', - // 'play', 'pause', 'seeked', 'ratechange', 'volumechange', + // 'play', 'pause', 'ratechange', 'volumechange', + 'seeked', 'loadedmetadata', 'loadeddata', 'canplay', 'canplaythrough', 'playing', 'waiting', 'seeking', 'durationchange', 'timeupdate', 'ended' ] ); @@ -160,7 +169,7 @@ if( X_Audio_constructor ){ 'durationchange', 'timeupdate', 'ended' ], this.onDebug ); if( X_HTMLAudio_endedFixAOSP2 || X_HTMLAudio_endedFixAOSP4 ){ - raw.loop = true; // loop を使えば ended で止まること回避できるかも 但し ended イベントが起きなくなる + raw.loop = true; // loop を使えば ended で止まること回避できる 但し ended イベントが起きなくなる }; if( X_HTMLAudio_need1stTouch ){ @@ -192,14 +201,13 @@ if( X_Audio_constructor ){ ready, eventType, duration, end, now; - if( this._closed ) return; + if( !raw ) return; //e.type !== 'timeupdate' && console.log( ' > ' + e.type ); switch( e.type ){ case X_EVENT_KILL_INSTANCE : - delete this._closed; this.playing && this.actualPause(); // 【javascript】モバイル向けブラウザでも音を鳴らしたい【WebAudio】 @@ -217,7 +225,7 @@ if( X_Audio_constructor ){ // console.log( e.loaded + ' ' + e.total * 100 + '%' ); // iem9 で常に0 raw.networkState; // opera Android 12 で buffered.end() へのアクセスはエラー try catch も無効、iem9 は常に end(0) = 0 - if( !( X_UA[ 'Opera' ] && X_UA[ 'Android' ] ) && !( X_UA[ 'WinPhones' ] && X_UA[ 'IE9' ] ) && this.duration ){ + if( X_HTMLAudio_progressEnabled && this.duration && this._readyState < 3 ){ buf = raw.buffered; time = 0; for( i = 0, l = buf.length; i < l; ++i ){ @@ -233,7 +241,7 @@ if( X_Audio_constructor ){ this._readyState |= 1; }; case 'canplay' : // 今すぐに再生を再開できるが、バッファリングが不十分でコンテンツを最後まで表示できないと予測している場合に発生 - if( this._durationFixPhase === 1 && !X_HTMLAudio_need1stTouch ){ + if( this._durationFixPhase === 1 && !X_HTMLAudio_need1stTouch ){ // PC Opera12 用 durationFix this._durationFixPhase = 2; this.actualPlay(); raw.currentTime = 0; // Win8 + Opera12 で必要 @@ -252,6 +260,9 @@ if( X_Audio_constructor ){ // 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; @@ -271,9 +282,13 @@ if( X_Audio_constructor ){ end = X_Audio_getEndTime( this ) + this._shortPlayFixTime; //console.log( now + ' / ' + end ); if( ( 0 + end <= 0 + now ) || // 0+ なぜか iem9 で必要,,, - ( now < this._lastCurrentTime ) ){ // loop した場合 + ( 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 ) ); + console.log( '☆★☆ 曲の最後に到達 @timeupdate now-end:' + ( now - end ) + ' now:' + now + ' last:' + this._lastCurrentTime ); ended = true; //if( X_HTMLAudio_endedFixIOS ) actualEnded = true; } else { @@ -310,21 +325,26 @@ if( X_Audio_constructor ){ eventType = !this._durationFixPhase && !this._endedFixON ? X_EVENT_MEDIA_PLAYING : X_EVENT_MEDIA_WAITING; //case 'play' : // 再生が開始された。play()メソッドからの復帰後に発生する場合に発生 //case 'pause' : // 再生が一時停止された。pauseメソッドからの復帰後に発生する場合に発生 - //case 'seeked' : //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; - case 'seeking' : // シークがtrueに変化し、イベントを発生させるのに十分な時間がシーク操作にかかっている場合に発生 - eventType = X_EVENT_MEDIA_SEEKING; - break; }; // duration は Infinity, NaN, 0 の場合があるため、これを除外する - if( 0 < duration && X_Type_isFinite( duration ) ){ + // chrome18 for Android は duration = 100 の間はシークができない? 28 は可能 + if( 0 < duration && X_Type_isFinite( duration ) && duration !== 100 ){ this.duration = duration * 1000; if( this._durationFixPhase === 4 ){ @@ -333,7 +353,6 @@ if( X_Audio_constructor ){ if( this.autoplay || this._playReserved ){ console.log( '☆ 再生 <- DurationFix の終了' ); - delete this._playReserved; this.actualPlay(); } else if( X_HTMLAudio_pauseFix ){ @@ -367,7 +386,7 @@ if( X_Audio_constructor ){ }; } else if( this._readyState === 1 && this.duration ){ - this._readyState = 3; + this._readyState |= 2; this.disatcher[ 'asyncDispatch' ]( X_EVENT_READY ); console.log( '> Audio Loaded!! ' + e.type + ' d:' + ( this.duration | 0 ) ); } else @@ -380,13 +399,20 @@ if( X_Audio_constructor ){ var raw = this[ '_rawObject' ], e, begin, end; - if( this._closed ) return; + if( !raw ) return; - if( !raw.src ){ // X_HTMLAudio_pauseFix によって src が空になっている - console.log( '○ 削除された audio.src の復帰' ); - raw.src = this._src; - return; - }; + this._playReserved = true; + + 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; + }; + }; if( this._touchState === 2 ){ e = X_EventDispatcher_CURRENT_EVENTS[ X_EventDispatcher_CURRENT_EVENTS.length - 1 ]; @@ -397,10 +423,11 @@ if( X_Audio_constructor ){ this._touchState = 3; } else if( this._readyState !== 3 && this._durationFixPhase < 2 ){ - this._playReserved = true; return; }; + delete this._playReserved; + if( this._durationFixPhase & 3 ){ // 1 or 2 console.log( '▲ DurationFix の開始' ); this._durationFixPhase = 4; @@ -432,7 +459,6 @@ if( X_Audio_constructor ){ } else if( X_HTMLAudio_needPlayForSeek || forcePlay ){ raw.play(); - //console.log( '[HTMLAudio] currentTime より先.' ); }; //http://himaxoff.blog111.fc2.com/blog-entry-97.html @@ -481,6 +507,7 @@ if( X_Audio_constructor ){ getActualCurrentTime : function(){ return ( X_HTMLAudio_currentTimeFix ? X_Timer_now() - this._currentFixStart + this._currentFixBegin : + this._seekingFixON ? this._lastCurrentTime * 1000 : this[ '_rawObject' ].currentTime * 1000 | 0 ); }, /*