X-Git-Url: http://git.osdn.jp/view?a=blobdiff_plain;f=0.6.x%2Fjs%2F07_audio%2F02_XHTMLAudio.js;h=03f8ccabd881c09dd68b42e66da070a1c4655ba8;hb=9e04e2a1221a92960a74e550bc3fd809caf3cd1c;hp=4095242f24d9c9f8d24bf5c5ce4a0ccb3d0e1551;hpb=5af7809cfb475642413a4275af29fbf7d783a170;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 4095242..03f8cca 100644 --- a/0.6.x/js/07_audio/02_XHTMLAudio.js +++ b/0.6.x/js/07_audio/02_XHTMLAudio.js @@ -60,17 +60,20 @@ var */ X_HTMLAudio_volumeEnabled = !( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ) && !X_UA[ 'Opera' ], // Gecko PC + Android でseek時に再生がしばしば止まる問題の修正 - X_HTMLAudio_needPlayForSeek = X_UA[ 'Gecko' ], + 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' ] ? 'suspend' : X_UA[ 'Blink' ] < 32 ? '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_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,27 +81,26 @@ if( X_Audio_constructor ){ 'X.HTMLAudio', X_Class.POOL_OBJECT, { - _closed : true, - _loaded : false, - _ready : false, - _src : '', - - // 0: - // 1: touch 要求完了 - // 2: touch による play 中 - // 4: duration 取得完了 currentTime へのセット - // 8: playing || loadeddata or canplaythrought - // 16: READY 発火済 + // 1: canplaythrought|timeupdateに達している、またはdurationFixが終了している + // 2: READY イベント発火済 _readyState : 0, + _src : '', - _touchRequested : false, - _touched : false, + // 0:ok + // 1:touch 要求済 + // 2:touch による play 済 + _touchState : X_HTMLAudio_need1stTouch ? 1 : 0, _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, - _durationFixSkip : X_HTMLAudio_durationFix && !X_HTMLAudio_need1stTouch, _lastCurrentTime : 0, _shortPlayFixON : false, @@ -110,7 +112,6 @@ if( X_Audio_constructor ){ var raw; this.disatcher = disatcher || this; - this._closed = false; this._src = source; if( X_HTMLAudio_shortPlayFix ){ @@ -132,8 +133,6 @@ if( X_Audio_constructor ){ X_elmBody.appendChild( raw ); } else { raw = X_TEMP.rawAudio || new X_Audio_constructor( '' ); - // X_Doc_create( 'audio', { src : source } )[ 'appendTo' ]( X.Doc.body ); - //raw.autoplay = raw.autobuffer = raw.loop = false; // loop を使えば ended で止まること回避できるかも 但し ended イベントが起きなくなる if( X_TEMP.rawAudio ) delete X_TEMP.rawAudio; }; @@ -160,12 +159,18 @@ if( X_Audio_constructor ){ 'playing', 'waiting', 'seeking', 'durationchange', 'timeupdate', 'ended' ], this.onDebug ); + if( X_HTMLAudio_endedFixAOSP2 || X_HTMLAudio_endedFixAOSP4 ){ + raw.loop = true; // loop を使えば ended で止まること回避できるかも 但し ended イベントが起きなくなる + }; + if( X_HTMLAudio_need1stTouch ){ raw.src = source; } else { - raw.preload = 'auto'; - raw.autoplay = true; // Android 4.0-4.1.x で必要 - //raw.autobuffer = true; + // 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 では必要! }; @@ -175,7 +180,7 @@ if( X_Audio_constructor ){ this.disatcher[ 'dispatch' ]( { type : X_EVENT_DEBUG, 'rawEvent' : e.type, - current : this.getActualCurrentTime() | 0, + 'current' : this[ '_rawObject' ].currentTime, duration : this[ '_rawObject' ].duration } ); }, @@ -183,24 +188,22 @@ if( X_Audio_constructor ){ var raw = this[ '_rawObject' ], actualEnded = e.type === 'ended', ended = actualEnded, + i, l, buf, time, ready, eventType, duration, end, now; - // global に公開 - //window[ '__rawAudio' ] = this[ '_rawObject' ]; - - e.type !== 'timeupdate' && console.log( ' > ' + e.type ); + if( !raw ) return; + + //e.type !== 'timeupdate' && console.log( ' > ' + e.type ); switch( e.type ){ case X_EVENT_KILL_INSTANCE : + this.playing && this.actualPause(); + // 【javascript】モバイル向けブラウザでも音を鳴らしたい【WebAudio】 // http://ingaouhou.com/archives/3633 // ・使い終わったインスタンスはload()しておくとやや安定 - this.playing && this.actualPause(); - delete this._closed; - delete this._loaded; - raw.src = ''; raw.load(); @@ -213,18 +216,26 @@ 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 - //console.log( 'buffered.end ' + raw.buffered && raw.buffered.end(0) ); + if( X_HTMLAudio_progressEnabled && this.duration && this._readyState < 2 ){ + buf = raw.buffered; + time = 0; + for( i = 0, l = buf.length; i < l; ++i ){ + time += buf[ 'end' ]( i ) - buf[ 'start' ]( i ); + }; + this.disatcher[ 'dispatch' ]( { type : X_EVENT_PROGRESS, 'percent' : time * 1000 / this.duration } ); + }; break; case 'loadeddata' : // コンテンツの表示を現在の再生位置で初めて行えるようになった場合に発生 case 'canplaythrough' : // 今すぐに再生を開始してもバッファリングで停止することなく最後まで表示できると予測している場合に発生 - if( !this._endedFixON ){ - ready = true; + if( !this._endedFixON && !X_HTMLAudio_durationFix && !X_HTMLAudio_need1stTouch ){ + this._readyState |= 1; }; case 'canplay' : // 今すぐに再生を再開できるが、バッファリングが不十分でコンテンツを最後まで表示できないと予測している場合に発生 - if( X_HTMLAudio_durationFix && !X_HTMLAudio_need1stTouch && this._durationFixPhase === 1 ){ + if( this._durationFixPhase === 1 && !X_HTMLAudio_need1stTouch ){ // PC Opera12 用 durationFix + this._durationFixPhase = 2; this.actualPlay(); - raw.currentTime = 0; // 必要! + raw.currentTime = 0; // Win8 + Opera12 で必要 }; if( this._endedFixON ){ console.log( '▽ onEndedFix の終了 @' + e.type ); @@ -240,32 +251,38 @@ if( X_Audio_constructor ){ // TODO firefox で 短い音声でtimeupdate, ended が発火しない <- 最後の音に無音部分を追加する case 'timeupdate' : // 通常の再生が行われ現在の再生位置の変化が起こった場合に発生 - if( this._durationFixPhase & 3 ){ // 1 or 2 + 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 { - this._lastCurrentTime = now; // *1 rm - - if( this.playing ){ - end = X_Audio_getEndTime( this ) + this._shortPlayFixTime; - //console.log( now + ' / ' + end ); - // || now < this._lastCurrentTime // loop した場合 - if( 0 + end <= 0 + now ){ // 0+ なぜか iem9 で必要,,, - if( this.autoLoop ){ - console.log( '☆★☆ 曲の最後に到達 @timeupdate now-end:' + ( now - end ) ); - ended = true; - if( X_HTMLAudio_endedFixIOS ) actualEnded = true; - } else { - this.actualPause(); - eventType = X_EVENT_MEDIA_ENDED; - }; + } else + if( this.playing ){ + end = X_Audio_getEndTime( this ) + this._shortPlayFixTime; + //console.log( now + ' / ' + end ); + if( ( 0 + end <= 0 + now ) || // 0+ なぜか iem9 で必要,,, + ( now < this._lastCurrentTime ) ){ // loop した場合 + if( this.autoLoop ){ + console.log( '☆★☆ 曲の最後に到達 @timeupdate now-end:' + ( now - end ) ); + ended = true; + //if( X_HTMLAudio_endedFixIOS ) actualEnded = true; } else { - eventType = X_EVENT_MEDIA_PLAYING; - // *1 this._lastCurrentTime = now; + this.actualPause(); + eventType = X_EVENT_MEDIA_ENDED; }; + } else { + eventType = X_EVENT_MEDIA_PLAYING; }; + this._lastCurrentTime = now; }; break; @@ -289,7 +306,7 @@ if( X_Audio_constructor ){ //if( X_HTMLAudio_currentTimeFix && !this._currentFixStart ){ //this._currentFixStart = X_Timer_now(); // 正確な再生開始時間に補正 //}; - eventType = !this._durationFixSkip && !this._endedFixON ? X_EVENT_MEDIA_PLAYING : X_EVENT_MEDIA_WAITING; + eventType = !this._durationFixPhase && !this._endedFixON ? X_EVENT_MEDIA_PLAYING : X_EVENT_MEDIA_WAITING; //case 'play' : // 再生が開始された。play()メソッドからの復帰後に発生する場合に発生 //case 'pause' : // 再生が一時停止された。pauseメソッドからの復帰後に発生する場合に発生 //case 'seeked' : @@ -306,51 +323,41 @@ if( X_Audio_constructor ){ }; // 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 === 2 ){ + if( this._durationFixPhase === 4 ){ console.log( '▼ DurationFix の終了 @' + e.type ); - this._durationFixPhase = 4; - - ready = true; + this._durationFixPhase = 8; - if( this.autoplay || this._loaded ){ + if( this.autoplay || this._playReserved ){ console.log( '☆ 再生 <- DurationFix の終了' ); - this._durationFixSkip = false; this.actualPlay(); } else if( X_HTMLAudio_pauseFix ){ console.log( '☆ PAUSE <- DurationFix の終了' ); - //raw.src = ''; - //raw.load(); - this.actualPause(); + this.actualPause(); }; } else - if( this._durationFixPhase ){ - this._durationFixPhase = 4; + if( this._durationFixPhase & 3 ){ // === 1 | 2 + this._durationFixPhase = 8; }; }; - this._loaded = this._loaded || ready; - // - if( X_HTMLAudio_need1stTouch && !this._touchRequested ){ // !this._readyState + if( this._touchState === 1 ){ if( e.type === X_HTMLAudio_playTrigger ){ - this._touchRequested = true; - this._readyState = 1; - this.disatcher[ 'asyncDispatch' ]( X_EVENT_MEDIA_CAN_TOUCH_LOAD ); + this._touchState = 2; + this.disatcher[ 'asyncDispatch' ]( X_EVENT_MEDIA_TOUCH_FOR_LOAD ); }; } else if( ended ){ - if( !this._closed && this.autoLoop ){ + 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 ); - ( X_HTMLAudio_endedFixAOSP3 || X_HTMLAudio_endedFixAOSP4 || X_HTMLAudio_endedFixCWV || X_HTMLAudio_endedFixIOS ) && actualEnded && console.log( '☆★☆ 音声の継続用の play() @ended' ); - this.actualPlay( - ( X_HTMLAudio_endedFixAOSP4 || X_HTMLAudio_endedFixCWV || X_HTMLAudio_endedFixIOS ) && actualEnded, - ( X_HTMLAudio_endedFixAOSP3 || X_HTMLAudio_endedFixAOSP2 ) && actualEnded ); + this.actualPlay( X_HTMLAudio_endedFixCWV && actualEnded, X_HTMLAudio_endedFixAOSP3 && actualEnded ); }; } else { this.seekTime = 0; @@ -358,49 +365,52 @@ if( X_Audio_constructor ){ this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_ENDED ); }; } else - if( this._loaded && this.duration && !this._ready ){ - this._ready = true; + if( this._readyState === 1 && this.duration ){ + this._readyState = 2; this.disatcher[ 'asyncDispatch' ]( X_EVENT_READY ); - this.autoplay && !X_HTMLAudio_need1stTouch && X_Timer_once( 16, this, this.actualPlay ); console.log( '> Audio Loaded!! ' + e.type + ' d:' + ( this.duration | 0 ) ); } else if( eventType ){ this.disatcher[ 'dispatch' ]( eventType ); - // eventType === X_EVENT_ERROR && this[ 'kill' ](); }; }, actualPlay : function( forcePlay, forceReload ){ var raw = this[ '_rawObject' ], e, begin, end; + + if( !raw ) return; - // もし kill 後に autoplayTimer で呼ばれても、_closed==true なので平気 - if( this._closed ) return; - + this._playReserved = true; - if( !raw.src ){ // X_HTMLAudio_pauseFix によって src が空になっている - console.log( '○ 削除された audio.src の復帰' ); - raw.src = this._src; - //return; - }; - - if( this._touchRequested && !this._touched ){ // this._readyState === 1 + 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 ]; if( !e || !e[ 'pointerType' ] ){ - alert( 'タッチイベント以外での play! ' + e.type ); + alert( 'タッチイベント以外での play! ' + ( e ? e.type : '' ) ); return; }; - this._touched = true; - this._readyState = 2; + this._touchState = 3; } else - if( !this._ready && ( !X_HTMLAudio_durationFix || !X_HTMLAudio_need1stTouch ) ){ // this._readyState < 2 - this.autoplay = true; + if( this._readyState !== 2 && this._durationFixPhase < 2 ){ return; }; - - if( X_HTMLAudio_durationFix && X_HTMLAudio_need1stTouch && this._durationFixPhase === 1 ){ - console.log( '▲ DurationFix の開始(タッチ用)' ); - this._durationFixPhase = 2; + + delete this._playReserved; + + if( this._durationFixPhase & 3 ){ // 1 or 2 + console.log( '▲ DurationFix の開始' ); + this._durationFixPhase = 4; }; end = X_Audio_getEndTime( this ); @@ -415,7 +425,7 @@ if( X_Audio_constructor ){ }; }; - if( this._durationFixSkip || this._endedFixON ){ + if( this._endedFixON ){ console.log( '☆ audio.play をスキップ ' + begin + ' -> ' + end + ' crt:' + ( raw.currentTime | 0 ) ); } else { if( !this.playing ){ @@ -429,7 +439,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 @@ -437,19 +446,17 @@ if( X_Audio_constructor ){ //また、GoogleChrome7 では currentTime = 0 直後に play() すると、pause()した位置前後の音が混ざることがある。(少なくとも自分の環境では) // iOS で duration が 0 の時に触ると error - if( !X_HTMLAudio_durationFix || this.duration ) raw.currentTime = this._lastCurrentTime; // 2 < this._readyState + // 0 or 8 + if( !( this._durationFixPhase % 8 ) && this.duration ) raw.currentTime = this._lastCurrentTime; console.log( '[HTMLAudio] play ' + begin + ' -> ' + end + ' crt:' + ( raw.currentTime | 0 ) + ' last:' + this._lastCurrentTime ); - if( forceReload || ( X_HTMLAudio_endedFixAOSP4 && raw.duration && raw.currentTime === raw.duration ) ){ - raw.src = ''; - raw.src = this._src; + if( forceReload ){ this.playing = false; this._endedFixON = true; + raw.src = this._src; console.log( '△ onEndedFix の開始' ); - raw.currentTime = this._lastCurrentTime; this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_WAITING ); - X_HTMLAudio_endedFixAOSP2 && raw.load(); }; }; @@ -463,8 +470,6 @@ if( X_Audio_constructor ){ var raw = this[ '_rawObject' ]; console.log( '[HTMLAudio] pause' ); - - this.seekTime = this.getActualCurrentTime(); delete this._currentFixStart; @@ -474,7 +479,6 @@ if( X_Audio_constructor ){ raw.src = ''; if( X_HTMLAudio_durationFix ){ delete this._durationFixPhase; - delete this._durationFixSkip; }; }; delete this.playing;