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=a231e67df97e449945dac7e1a7a939aac6f087cc;hpb=a3d03e96ad8c0392ef683eb6c64421e094b96958;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 a231e67..1c88ae5 100644 --- a/0.6.x/js/07_audio/02_XHTMLAudio.js +++ b/0.6.x/js/07_audio/02_XHTMLAudio.js @@ -8,28 +8,40 @@ * 1. iOS4(iPod 2G) で ended に達すると音が鳴らなくなる fix で解決 * 2. iOS6(iPod 4G) で ended に達すると音が鳴らなくなる fix で頻度が改善 emded イベントは発しないので、timeupdate 時に currentTime で判断する * 3. WP7(IS12T) で最後の方にある音が鳴らない? mp3 cbr を使えばいい? 裏に回っても音が鳴り続ける - * 4. Android 3.x で ended に達すると音が鳴らなくなる -> リロード(audio.src='';audio.sr=src)で解決、但し 2.x 4.x より遅延が大きく 1 秒弱程度ある - * 5. Android 2.x で ended に達すると音が鳴らなくなる -> リロード(audio.src='';audio.src=src;audio.load())でで解決 - * 6. Android 4.4.2- は ended に達した際に currentTime が変更できなくなり、リロードが必要になる, 4.0, 4.1, 4.2, 4.3 で確認 - * 7. Blink5 Opera32 Win8 は HTMLAudio が壊れている、WebAudio は mp3 がデコードに失敗、ogg が動作 + * 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. Android4.1 iframe 内の Audio は親に focus が移っても再生を継続する + * 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_HTMLAudio_playTrigger = - 6 <= X_UA[ 'iOS' ] ? 'loadeddata' : - X_UA[ 'iOS' ] < 5 ? 'stalled' : - X_UA[ 'iOS' ] ? 'suspend' : - X_UA[ 'Safari' ] < 4 ? 'canplaythrough' : - X_UA[ 'ChromeWK' ] ? 'canplaythrough' : - // Android 2.3.5(SBM101SH) では stalled は発生しない,,, ので必ず loadeddata もチェックする - X_UA[ 'AOSP' ] ? 'stalled' : - X_UA[ 'OperaMobile' ] || X_UA[ 'OperaTablet' ] ? 'loadeddata' : - 'loadeddata', //'canplay', +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, @@ -37,40 +49,38 @@ var X_HTMLAudio_playTrigger = 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' ] ), // 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時に再生がしばしば止まる問題の修正 - X_HTMLAudio_needPlayForSeek = X_UA[ 'Gecko' ], + // Gecko PC + Android でseek時に再生がしばしば止まる問題の修正、iOS8でも確認 + X_HTMLAudio_needPlayForSeek = X_UA[ 'iOS' ] || X_UA[ 'Gecko' ], // - X_HTMLAudio_pauseFix = ( X_UA[ 'Windows' ] && 12 <= X_UA[ 'Opera' ] && 0 < ' XP XPSP2 2003|XP64'.indexOf( X_UA[ 'Windows' ] ) ), // XP + Opera12 のみ? - /* - * durationFix - * duration が取得できるタイミングが遅くそれまでは infinity(PC Opera12), NaN(WP9), 0(AOSP Chrome 系) が入っている - * - * 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 が怪しい?? - */ - X_HTMLAudio_need1stTouch = X_UA[ 'iOS' ] || X_UA[ 'ChromeWK' ] || ( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ), - X_HTMLAudio_durationFix = ( X_UA[ 'Windows' ] && 12 <= X_UA[ 'Opera' ] ) || X_UA[ 'ChromeWK' ] || ( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ), - - X_HTMLAudio_shortPlayFix = X_UA[ 'AOSP' ]; // Android 4.1.1 でも遭遇(ただしm4a, mp3は優秀, oggはシークが乱れる) - + 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( X_Audio_constructor ){ @@ -78,29 +88,41 @@ if( X_Audio_constructor ){ 'X.HTMLAudio', X_Class.POOL_OBJECT, { - _closed : true, - _loaded : false, - _ready : false, + // 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, + _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, + _lastCurrentTime : 0, // ms _shortPlayFixON : false, _shortPlayFixTime : 0, _endedFixON : false, - 'Constructor' : function( target, source, option ){ + _seekingFixON : false, + + 'Constructor' : function( disatcher, source, option ){ var raw; - this.target = target || this; - this._closed = false; - this._src = source; + this.disatcher = disatcher || this; + this._src = source; if( X_HTMLAudio_shortPlayFix ){ this._shortPlayFixON = X_URL_getEXT( source ) === 'm4a'; @@ -118,12 +140,11 @@ if( X_Audio_constructor ){ raw.style.cssText = 'position:absolute;bottom:0;left:-50px;width:100px;height:100px;opacity:0;'; raw.controls = false; raw.WebKitPlaysInline = true; - raw.src = source; - document.body.appendChild( raw ); + X_elmBody.appendChild( raw ); } else { - raw = X_TEMP.rawAudio || new X_Audio_constructor( source ); - // X_Doc_create( 'audio', { src : source } )[ 'appendTo' ]( X.Doc.body ); - raw.autobuffer = raw.autoplay = false; + raw = X_TEMP.rawAudio || new X_Audio_constructor( '' ); + + if( X_TEMP.rawAudio ) delete X_TEMP.rawAudio; }; this[ '_rawObject' ] = raw; @@ -132,42 +153,68 @@ if( X_Audio_constructor ){ X_EVENT_KILL_INSTANCE, X_HTMLAudio_playTrigger, //'loadstart', 'load', - 'progress', 'error', + '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' ] ); - if( X_TEMP.rawAudio ){ + 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 ); + + if( X_HTMLAudio_endedFixAOSP2 || X_HTMLAudio_endedFixAOSP4 ){ + raw.loop = true; // loop を使えば ended で止まること回避できる 但し ended イベントが起きなくなる + }; + + if( X_HTMLAudio_need1stTouch ){ raw.src = source; - raw.load(); // AOSP2 で必要 - delete X_TEMP.rawAudio; + } 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 では必要! }; }, + 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, - ready = e.type === X_HTMLAudio_playTrigger, + 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(); @@ -180,21 +227,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 < 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 'loadeddata' : // コンテンツの表示を現在の再生位置で初めて行えるようになった場合に発生 - if( !this._endedFixON ){ - ready = true; + case 'canplaythrough' : // 今すぐに再生を開始してもバッファリングで停止することなく最後まで表示できると予測している場合に発生 + if( !this._endedFixON && !X_HTMLAudio_durationFix && !X_HTMLAudio_need1stTouch ){ + this._readyState |= 1; }; case 'canplay' : // 今すぐに再生を再開できるが、バッファリングが不十分でコンテンツを最後まで表示できないと予測している場合に発生 - if( X_HTMLAudio_durationFix && !X_HTMLAudio_need1stTouch && this._durationFixPhase === 1 ){ - console.log( '▲ DurationFix の開始 @' + e.type ); + if( this._durationFixPhase === 1 && !X_HTMLAudio_need1stTouch ){ // PC Opera12 用 durationFix this._durationFixPhase = 2; - raw.play(); - raw.currentTime = 0; // 必要! + this.actualPlay(); + raw.currentTime = 0; // Win8 + Opera12 で必要 }; - case 'canplaythrough' : // 今すぐに再生を開始してもバッファリングで停止することなく最後まで表示できると予測している場合に発生 if( this._endedFixON ){ console.log( '▽ onEndedFix の終了 @' + e.type ); this._endedFixON = false; @@ -202,38 +254,61 @@ if( X_Audio_constructor ){ }; case 'loadedmetadata' : // ブラウザがメディアリソースの長さと寸法を判定した場合に発生 case 'durationchange' : // duration属性が更新された場合に発生 - if( !this.duration ){ + if( !this.duration || this.duration !== raw.duration * 1000 ){ // Blink28 duration が変わる duration = raw.duration; }; break; // TODO firefox で 短い音声でtimeupdate, ended が発火しない <- 最後の音に無音部分を追加する case 'timeupdate' : // 通常の再生が行われ現在の再生位置の変化が起こった場合に発生 - if( this._durationFixPhase & 3 ){ // 1 or 2 + 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( raw.currentTime === this._lastCurrentTime ){ + if( ( now = this.getActualCurrentTime() ) === this._lastCurrentTime ){ eventType = X_EVENT_MEDIA_WAITING; - } else { - this._lastCurrentTime = raw.currentTime; - - if( this.playing ){ - end = X_Audio_getEndTime( this ) + this._shortPlayFixTime; - now = this.getActualCurrentTime(); - //console.log( now + ' / ' + end ); - 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( 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 { - eventType = X_EVENT_MEDIA_PLAYING; + this.actualPause(); + eventType = X_EVENT_MEDIA_ENDED; }; + } else { + eventType = X_EVENT_MEDIA_PLAYING; }; + this._lastCurrentTime = now; }; break; @@ -245,120 +320,135 @@ if( X_Audio_constructor ){ //case 'abort' : // ダウンロードの完了前にコンテンツの取得を停止した場合に発生(この停止はエラーによるものではない) // break; - case 'error' : // コンテンツの取得実行中にエラーが発生した場合に発生 + //case 'error' : // コンテンツの取得実行中にエラーが発生した場合に発生 // Opera12 src = '' で error が発生、無視する // eventType = X_EVENT_ERROR; - break; + //break; case 'playing' : // 再生が開始された場合に発生 if( X_HTMLAudio_volumeFix ){ raw.volume = this.gain; }; - if( X_HTMLAudio_currentTimeFix ){ - this._currentFixStart = X_Timer_now(); // 正確な再生開始時間に補正 - }; - eventType = !this._durationFixSkip && !this._endedFixON ? X_EVENT_MEDIA_PLAYING : X_EVENT_MEDIA_WAITING; + //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 '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 === 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( 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._closed && this.autoLoop ){ - if( !( this.target[ 'dispatch' ]( X_EVENT_MEDIA_BEFORE_LOOP ) & X_CALLBACK_PREVENT_DEFAULT ) ){ + if( this.autoLoop ){ + if( !( this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_BEFORE_LOOP ) & X_CALLBACK_PREVENT_DEFAULT ) ){ this.looped = true; - this.target[ 'dispatch' ]( X_EVENT_MEDIA_LOOPED ); - ( X_HTMLAudio_endedFixAOSP3 || X_HTMLAudio_endedFixAOSP4 || X_HTMLAudio_endedFixIOS ) && actualEnded && console.log( '☆★☆ 音声の継続用の play() @ended' ); - this.actualPlay( - ( X_HTMLAudio_endedFixAOSP4 || X_HTMLAudio_endedFixIOS ) && actualEnded, - ( X_HTMLAudio_endedFixAOSP3 || X_HTMLAudio_endedFixAOSP2 ) && actualEnded ); + 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.target[ 'dispatch' ]( X_EVENT_MEDIA_ENDED ); + this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_ENDED ); }; } else - if( this._loaded && this.duration && !this._ready ){ - this._ready = true; - this.autoplay && X_Timer_once( 16, this, this.play ); - this.target[ 'asyncDispatch' ]( X_EVENT_READY ); + 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.target[ 'dispatch' ]( eventType ); - eventType === X_EVENT_ERROR && this[ 'kill' ](); + this.disatcher[ 'dispatch' ]( eventType ); }; }, actualPlay : function( forcePlay, forceReload ){ var raw = this[ '_rawObject' ], begin, end; + + if( !raw ) return; - // もし kill 後に autoplayTimer で呼ばれても、_closed==true なので平気 - if( this._closed ) return; - - - if( !raw.src ){ // X_HTMLAudio_pauseFix によって src が空になっている - console.log( '○ 削除された audio.src の復帰' ); - raw.src = this._src; - //return; - }; + this._playReserved = true; - if( !this._ready && ( !X_HTMLAudio_durationFix || !X_HTMLAudio_need1stTouch ) ){ - 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; + }; }; - if( X_HTMLAudio_durationFix && X_HTMLAudio_need1stTouch && this._durationFixPhase === 1 ){ - console.log( '▲ DurationFix の開始(タッチ用)' ); - this._durationFixPhase = 2; + 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; + }; + + delete this._playReserved; + + 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 ); - this._lastCurrentTime = begin / 1000; + this._lastCurrentTime = begin; if( this._shortPlayFixON ){ this._shortPlayFixTime = ( 1000 < end - begin ) ? 200 : 400; @@ -367,7 +457,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 ){ @@ -381,26 +471,25 @@ 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 //Firefox3.6では一度も play() していない状態で currentTime = 0 を実行するとエラーになる。 - //また、GoogleChrome7 では currentTime = 0 直後に play() すると、pause()した位置前後の音が混ざることがある。(少なくとも自分の環境では) - raw.currentTime = this._lastCurrentTime; + //また、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 ); - - // Android4.0.5 で ended イベント時に currentTime が duration に張り付いたまま変更できない - if( forceReload || ( 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.target[ 'dispatch' ]( X_EVENT_MEDIA_WAITING ); - X_HTMLAudio_endedFixAOSP2 && raw.load(); - }; + this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_WAITING ); + }; }; if( X_HTMLAudio_currentTimeFix ){ @@ -410,19 +499,18 @@ if( X_Audio_constructor ){ }, actualPause : function(){ - console.log( '[HTMLAudio] pause' ); + var raw = this[ '_rawObject' ]; - this.seekTime = this.getActualCurrentTime(); + console.log( '[HTMLAudio] pause' ); delete this._currentFixStart; - !this[ '_rawObject' ].error && this[ '_rawObject' ].pause(); + !raw.error && raw.pause(); if( X_HTMLAudio_pauseFix ){ - this[ '_rawObject' ].src = ''; + raw.src = ''; if( X_HTMLAudio_durationFix ){ delete this._durationFixPhase; - delete this._durationFixSkip; }; }; delete this.playing; @@ -431,6 +519,7 @@ if( X_Audio_constructor ){ getActualCurrentTime : function(){ return ( X_HTMLAudio_currentTimeFix ? X_Timer_now() - this._currentFixStart + this._currentFixBegin : + this._seekingFixON ? this._lastCurrentTime : this[ '_rawObject' ].currentTime * 1000 | 0 ); }, /* @@ -491,7 +580,9 @@ if( X_Audio_constructor ){ * - volume, muted iPhone(iOS4-6)、Android(2.3.6)では動作せず。 * - FireFox3.6, Android 2.3.6については、src変更後、load()を呼び出さないと切り替わらなかった。iPhoneはload()が不要。 */ - detect : function( proxy, source, ext ){ + detect : function( proxy, ext, hash ){ + // TODO hash.CBR + // 得意度で返す proxy[ 'asyncDispatch' ]( { type : X_EVENT_COMPLETE, canPlay : X_Audio_codecs[ ext ] } ); },