\r
var\r
X_HTMLAudio,\r
- \r
- // ended が発生しない timeupdate 内で play() を呼ぶ (未検証) 不具合確認は iOS4,6\r
+ // iOS7.1, 8.3 で確認.seeking -> seeked の間の currentTime の値が全くあてにならないので無視する。\r
+ X_HTMLAudio_seekingFixIOS = 7 <= X_UA[ 'iOS' ],\r
+ // ended が発生しない timeupdate 内で play() を呼ぶ (未検証) 不具合確認は iOS4,6 iOS7.1,8.3ではpause->ended起きてる 但し iOS7.1 でも 6 と同じ症状になることがある\r
X_HTMLAudio_endedFixIOS = X_UA[ 'iOS' ] < 7,\r
// Android 2.3.5 で ended 時に audio.src='';audio.src=src;audio.load() を実施。 2.3.4 でも問題なし。\r
X_HTMLAudio_endedFixAOSP2 = X_UA[ 'AOSP' ] < 3,\r
\r
// Opera Mobile 12 は 2回目以降の currentTime へのセットで currentTime が更新されなくなるため、タイマーを使用する\r
X_HTMLAudio_currentTimeFix = !!X_UA[ 'OperaMobile' ] || !!X_UA[ 'OperaTablet' ],\r
+ // Firefox44.0.2 で音声の再生開始に難あり...\r
+ X_HTMLAudio_playStartFix = X_UA[ 'Windows' ] && X_UA[ 'Gecko' ] === 44,\r
\r
X_HTMLAudio_volumeFix = X_UA[ 'Chrome' ],\r
/*\r
* win opera12 volume, mute の変更が2度目以降できない\r
*/\r
X_HTMLAudio_volumeEnabled = !( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ) && !X_UA[ 'Opera' ],\r
- // Gecko PC + Android でseek時に再生がしばしば止まる問題の修正\r
- X_HTMLAudio_needPlayForSeek = X_UA[ 'Gecko' ],\r
+ // Gecko PC + Android でseek時に再生がしばしば止まる問題の修正、iOS8でも確認\r
+ X_HTMLAudio_needPlayForSeek = X_UA[ 'iOS' ] || X_UA[ 'Gecko' ],\r
// \r
X_HTMLAudio_pauseFix = 12 <= X_UA[ 'Opera' ] && 0 < ' XP XPSP2 2003|XP64'.indexOf( X_UA[ 'Windows' ] ), // XP + Opera12 のみ?\r
\r
X_HTMLAudio_need1stTouch = X_UA[ 'iOS' ] || 4.2 <= X_UA[ 'AOSP' ] || X_UA[ 'ChromeWV' ] || X_UA[ 'WinPhone' ] || ( X_UA[ 'Blink' ] && X_UA[ 'Android' ] ),\r
+\r
+ X_HTMLAudio_playTrigger = ( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ) ? 'canplay' :\r
+ X_UA[ 'iOS' ] < 8 ? 'suspend' : // iOS7.x以下\r
+ X_UA[ 'iOS' ] ? 'loadedmetadata' : // iOS8以上は\r
+ X_UA[ 'Blink' ] < 32 ? 'stalled' : 'canplaythrough',\r
+\r
+ X_HTMLAudio_durationFix = // iOS8.1(シュミレータでは不要)\r
+ X_UA[ 'iOS' ] < 8 || X_UA[ 'ChromeWV' ] || ( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ) ||\r
+ ( X_UA[ 'Windows' ] && 12 <= X_UA[ 'Opera' ] ) || ( X_UA[ 'Blink' ] < 36 && X_UA[ 'Android' ] ),\r
+\r
+ X_HTMLAudio_shortPlayFix = X_UA[ 'AOSP' ],\r
\r
- X_HTMLAudio_playTrigger = ( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ) ? 'canplay' : X_UA[ 'iOS' ] ? 'suspend' : X_UA[ 'Blink' ] ? 'stalled' : 'canplaythrough',\r
- \r
- X_HTMLAudio_durationFix = X_UA[ 'iOS' ] || X_UA[ 'ChromeWV' ] || ( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ) || ( X_UA[ 'Windows' ] && 12 <= X_UA[ 'Opera' ] ),\r
- \r
- X_HTMLAudio_shortPlayFix = X_UA[ 'AOSP' ]; // Android 4.1.1 でも遭遇\r
+ X_HTMLAudio_progressEnabled = !( X_UA[ 'Opera' ] && X_UA[ 'Android' ] ) && !( X_UA[ 'WinPhones' ] && X_UA[ 'IE9' ] ); // Android 4.1.1 でも遭遇\r
\r
if( X_Audio_constructor ){\r
\r
'X.HTMLAudio',\r
X_Class.POOL_OBJECT,\r
{\r
- _closed : true,\r
-\r
// 1: canplaythrought|timeupdateに達している、またはdurationFixが終了している\r
// 2: READY イベント発火済\r
+ // 3: 1, 2 が済\r
_readyState : 0,\r
_src : '',\r
\r
// 8:duration 取得済\r
// :timeupdate イベントで durationFixは完了\r
_durationFixPhase : X_HTMLAudio_durationFix ? 1 : 0,\r
- _lastCurrentTime : 0,\r
+ _lastCurrentTime : 0, // ms\r
\r
_shortPlayFixON : false,\r
_shortPlayFixTime : 0,\r
\r
_endedFixON : false,\r
\r
+ _seekingFixON : false,\r
+ \r
'Constructor' : function( disatcher, source, option ){\r
var raw;\r
\r
this.disatcher = disatcher || this;\r
- this._closed = false;\r
this._src = source;\r
\r
if( X_HTMLAudio_shortPlayFix ){\r
X_elmBody.appendChild( raw );\r
} else {\r
raw = X_TEMP.rawAudio || new X_Audio_constructor( '' );\r
- // raw.loop = false; // loop を使えば ended で止まること回避できるかも 但し ended イベントが起きなくなる\r
\r
if( X_TEMP.rawAudio ) delete X_TEMP.rawAudio;\r
};\r
//'loadstart', 'load',\r
'progress', //'error',\r
// 'suspend', 'abort', 'emptied', 'stalled',\r
- // 'play', 'pause', 'seeked', 'ratechange', 'volumechange',\r
+ // 'play', 'pause', 'ratechange', 'volumechange',\r
+ 'seeked',\r
'loadedmetadata', 'loadeddata', 'canplay', 'canplaythrough',\r
'playing', 'waiting', 'seeking',\r
'durationchange', 'timeupdate', 'ended' ] );\r
'playing', 'waiting', 'seeking',\r
'durationchange', 'timeupdate', 'ended' ], this.onDebug );\r
\r
+ if( X_HTMLAudio_endedFixAOSP2 || X_HTMLAudio_endedFixAOSP4 ){\r
+ raw.loop = true; // loop を使えば ended で止まること回避できる 但し ended イベントが起きなくなる\r
+ };\r
+\r
if( X_HTMLAudio_need1stTouch ){\r
raw.src = source;\r
} else {\r
- // if( this.autoplay ){\r
+ if( this.autoplay ){\r
raw.preload = 'auto';\r
raw.autoplay = true; // Android 4.0-4.1.x で必要\r
- //};\r
- //raw.autobuffer = true;\r
+ //raw.autobuffer = true;\r
+ };\r
raw.src = source;\r
raw.load(); // Android4.1.1 HTL21 では必要!\r
};\r
this.disatcher[ 'dispatch' ]( {\r
type : X_EVENT_DEBUG,\r
'rawEvent' : e.type,\r
- current : this[ '_rawObject' ].currentTime,\r
+ 'current' : this[ '_rawObject' ].currentTime,\r
duration : this[ '_rawObject' ].duration } );\r
},\r
\r
handleEvent : function( e ){\r
- if( !e || !e.type ) alert( 888 );\r
- \r
var raw = this[ '_rawObject' ],\r
actualEnded = e.type === 'ended',\r
ended = actualEnded,\r
+ i, l, buf, time,\r
ready,\r
eventType, duration, end, now;\r
\r
- if( this._closed ) return;\r
- \r
- // global に公開\r
- //window[ '__rawAudio' ] = this[ '_rawObject' ];\r
- \r
- e.type !== 'timeupdate' && console.log( ' > ' + e.type );\r
+ if( !raw ) return;\r
+\r
+ // e.type !== 'timeupdate' && console.log( ' > ' + e.type );\r
\r
switch( e.type ){\r
\r
case X_EVENT_KILL_INSTANCE :\r
- delete this._closed;\r
this.playing && this.actualPause();\r
\r
// 【javascript】モバイル向けブラウザでも音を鳴らしたい【WebAudio】\r
// http://ingaouhou.com/archives/3633\r
- // ・使い終わったインスタンスはload()しておくとやや安定 \r
+ // ・使い終わったインスタンスはload()しておくとやや安定\r
raw.src = '';\r
raw.load();\r
\r
// console.log( e.loaded + ' ' + e.total * 100 + '%' );\r
// iem9 で常に0 raw.networkState;\r
// opera Android 12 で buffered.end() へのアクセスはエラー try catch も無効、iem9 は常に end(0) = 0\r
- //console.log( 'buffered.end ' + raw.buffered && raw.buffered.end(0) ); \r
+ if( X_HTMLAudio_progressEnabled && this.duration && this._readyState < 3 ){\r
+ buf = raw.buffered;\r
+ for( i = time = 0, l = buf && buf.length; i < l; ++i ){\r
+ time += buf[ 'end' ]( i ) - buf[ 'start' ]( i );\r
+ };\r
+ this.disatcher[ 'dispatch' ]( { type : X_EVENT_PROGRESS, 'percent' : time * 1000 / this.duration * 100 } );\r
+ };\r
break;\r
\r
case 'loadeddata' : // コンテンツの表示を現在の再生位置で初めて行えるようになった場合に発生\r
this._readyState |= 1;\r
};\r
case 'canplay' : // 今すぐに再生を再開できるが、バッファリングが不十分でコンテンツを最後まで表示できないと予測している場合に発生\r
- if( this._durationFixPhase === 1 && !X_HTMLAudio_need1stTouch ){\r
+ if( this._durationFixPhase === 1 && !X_HTMLAudio_need1stTouch ){ // PC Opera12 用 durationFix\r
this._durationFixPhase = 2;\r
this.actualPlay();\r
raw.currentTime = 0; // Win8 + Opera12 で必要\r
\r
// TODO firefox で 短い音声でtimeupdate, ended が発火しない <- 最後の音に無音部分を追加する\r
case 'timeupdate' : // 通常の再生が行われ現在の再生位置の変化が起こった場合に発生\r
+ if( this._seekingFixON ){\r
+ eventType = X_EVENT_MEDIA_SEEKING;\r
+ } else\r
if( this._durationFixPhase === 8 ){\r
this._durationFixPhase = 0;\r
this._readyState |= 1;\r
duration = raw.duration;\r
eventType = X_EVENT_MEDIA_WAITING;\r
} else\r
- if( !X_HTMLAudio_durationFix && X_HTMLAudio_need1stTouch && this._touchState === 3 ){\r
+ if( this._touchState === 3 && !X_HTMLAudio_durationFix ){\r
this._touchState = 0;\r
this._readyState |= 1;\r
} else\r
if( ( now = this.getActualCurrentTime() ) === this._lastCurrentTime ){\r
eventType = X_EVENT_MEDIA_WAITING;\r
} else\r
+ if( X_HTMLAudio_playStartFix && ( now < this._lastCurrentTime ) ){\r
+ eventType = X_EVENT_MEDIA_WAITING;\r
+ //console.log( '@Firefox44.0.2 !! ' + now + ' / ' + this._lastCurrentTime );\r
+ // Firefox44.0.2 で音声の再生開始に難あり...\r
+ // 20回程度 currentTime の更新に失敗する....\r
+ this.actualPlay();\r
+ } else\r
if( this.playing ){\r
end = X_Audio_getEndTime( this ) + this._shortPlayFixTime;\r
- //console.log( now + ' / ' + end );\r
- // || now < this._lastCurrentTime // loop した場合\r
- if( 0 + end <= 0 + now ){ // 0+ なぜか iem9 で必要,,,\r
+\r
+ //console.log( '@ ' + now + ' / ' + this._lastCurrentTime + ' / ' + end );// Firefox44.0.2 で音声の再生開始に難あり...\r
+\r
+ if( ( 0 + end <= 0 + now ) || // 0+ なぜか iem9 で必要,,,\r
+ ( now < this._lastCurrentTime && now < 2000 ) ){\r
+ //( ( X_HTMLAudio_endedFixAOSP2 || X_HTMLAudio_endedFixAOSP4 ) && ( now < this._lastCurrentTime && now < 1000 ) ) ){\r
+ // loop して0付近に戻った場合\r
+ // iOS8.4 ではこのタイミングで now が last より 0.1秒後退している場合がある\r
+ // iOS7.1 ではもっと小さい場合がある,,,\r
if( this.autoLoop ){\r
- console.log( '☆★☆ 曲の最後に到達 @timeupdate now-end:' + ( now - end ) );\r
+ console.log( '☆★☆ 曲の最後に到達 @timeupdate now-end:' + ( now - end ) + ' now:' + now + ' last:' + this._lastCurrentTime );\r
ended = true;\r
- if( X_HTMLAudio_endedFixIOS ) actualEnded = true;\r
+ //if( X_HTMLAudio_endedFixIOS ) actualEnded = true;\r
} else {\r
this.actualPause();\r
eventType = X_EVENT_MEDIA_ENDED;\r
eventType = !this._durationFixPhase && !this._endedFixON ? X_EVENT_MEDIA_PLAYING : X_EVENT_MEDIA_WAITING;\r
//case 'play' : // 再生が開始された。play()メソッドからの復帰後に発生する場合に発生\r
//case 'pause' : // 再生が一時停止された。pauseメソッドからの復帰後に発生する場合に発生\r
- //case 'seeked' : \r
//case 'ratechange' : // defaultPlaybackRate属性とplaybackRate属性のどちらかが更新された場合に発生\r
//case 'volumechange' : // volume属性とmuted属性のどちらかが変化した場合に発生\r
break;\r
+\r
+ case 'seeking' : // シークがtrueに変化し、イベントを発生させるのに十分な時間がシーク操作にかかっている場合に発生\r
+ eventType = X_EVENT_MEDIA_SEEKING;\r
+ if( X_HTMLAudio_seekingFixIOS ) this._seekingFixON = true;\r
+ break; \r
+ case 'seeked' :\r
+ if( X_HTMLAudio_seekingFixIOS ) this._seekingFixON = false;\r
+ break;\r
\r
case 'waiting' : // 次のフレームが利用不可のため再生を停止したが、そのフレームがやがて利用可能になると想定している場合に発生\r
eventType = X_EVENT_MEDIA_WAITING;\r
break;\r
- case 'seeking' : // シークがtrueに変化し、イベントを発生させるのに十分な時間がシーク操作にかかっている場合に発生\r
- eventType = X_EVENT_MEDIA_SEEKING;\r
- break;\r
};\r
\r
// duration は Infinity, NaN, 0 の場合があるため、これを除外する\r
- if( 0 < duration && X_Type_isFinite( duration ) ){\r
+ // chrome18 for Android は duration = 100 の間はシークができない? 28 は可能\r
+ if( 0 < duration && X_Type_isFinite( duration ) && duration !== 100 ){\r
this.duration = duration * 1000;\r
\r
if( this._durationFixPhase === 4 ){\r
console.log( '▼ DurationFix の終了 @' + e.type );\r
this._durationFixPhase = 8;\r
\r
- if( this.autoplay ){\r
+ if( this.autoplay || this._playReserved ){\r
console.log( '☆ 再生 <- DurationFix の終了' );\r
this.actualPlay();\r
} else\r
if( X_HTMLAudio_pauseFix ){\r
console.log( '☆ PAUSE <- DurationFix の終了' );\r
- //raw.src = '';\r
- //raw.load();\r
- this.actualPause(); \r
+ this.actualPause();\r
};\r
} else\r
if( this._durationFixPhase & 3 ){ // === 1 | 2\r
if( this._touchState === 1 ){\r
if( e.type === X_HTMLAudio_playTrigger ){\r
this._touchState = 2;\r
- this.disatcher[ 'asyncDispatch' ]( X_EVENT_MEDIA_TOUCH_FOR_LOAD ); \r
+ this.disatcher[ 'asyncDispatch' ]( X_EVENT_MEDIA_WAIT_FOR_TOUCH );\r
};\r
} else\r
if( ended ){\r
if( !( this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_BEFORE_LOOP ) & X_CALLBACK_PREVENT_DEFAULT ) ){\r
this.looped = true;\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_endedFixCWV || X_HTMLAudio_endedFixIOS ) && actualEnded,\r
- ( X_HTMLAudio_endedFixAOSP3 || X_HTMLAudio_endedFixAOSP2 ) && actualEnded );\r
+ this.actualPlay( X_HTMLAudio_endedFixCWV && actualEnded, X_HTMLAudio_endedFixAOSP3 && actualEnded );\r
};\r
} else {\r
this.seekTime = 0;\r
};\r
} else\r
if( this._readyState === 1 && this.duration ){\r
- this._readyState = 3;\r
+ this._readyState |= 2;\r
this.disatcher[ 'asyncDispatch' ]( X_EVENT_READY );\r
- this.autoplay && X_Timer_once( 16, this, this.actualPlay );\r
console.log( '> Audio Loaded!! ' + e.type + ' d:' + ( this.duration | 0 ) );\r
} else\r
if( eventType ){\r
\r
actualPlay : function( forcePlay, forceReload ){\r
var raw = this[ '_rawObject' ],\r
- e, begin, end;\r
+ begin, end;\r
\r
- if( this._closed ) return;\r
+ if( !raw ) return;\r
\r
- if( !raw.src ){ // X_HTMLAudio_pauseFix によって src が空になっている\r
- console.log( '○ 削除された audio.src の復帰' );\r
- raw.src = this._src;\r
- return;\r
- }; \r
+ this._playReserved = true;\r
+ \r
+ if( X_HTMLAudio_pauseFix ){\r
+ if( !raw.src ){ // X_HTMLAudio_pauseFix によって src が空になっている\r
+ console.log( '○ 削除された audio.src の復帰' );\r
+ raw.src = this._src;\r
+ return;\r
+ };\r
+ if( this._durationFixPhase < 2 ){\r
+ return;\r
+ }; \r
+ };\r
\r
if( this._touchState === 2 ){\r
- e = X_EventDispatcher_CURRENT_EVENTS[ X_EventDispatcher_CURRENT_EVENTS.length - 1 ];\r
+ //@dev{\r
+ var e = X_EventDispatcher_CURRENT_EVENTS[ X_EventDispatcher_CURRENT_EVENTS.length - 1 ];\r
if( !e || !e[ 'pointerType' ] ){\r
alert( 'タッチイベント以外での play! ' + ( e ? e.type : '' ) );\r
return;\r
};\r
+ //@}\r
this._touchState = 3;\r
} else\r
if( this._readyState !== 3 && this._durationFixPhase < 2 ){\r
- this.autoplay = true;\r
return;\r
};\r
\r
+ delete this._playReserved;\r
+ \r
if( this._durationFixPhase & 3 ){ // 1 or 2\r
console.log( '▲ DurationFix の開始' );\r
this._durationFixPhase = 4;\r
end = X_Audio_getEndTime( this );\r
begin = X_Audio_getStartTime( this, end, true );\r
\r
- this._lastCurrentTime = begin / 1000;\r
+ this._lastCurrentTime = begin;\r
\r
if( this._shortPlayFixON ){\r
this._shortPlayFixTime = ( 1000 < end - begin ) ? 200 : 400;\r
} else\r
if( X_HTMLAudio_needPlayForSeek || forcePlay ){\r
raw.play();\r
- console.log( '[HTMLAudio] currentTime より先.' );\r
};\r
\r
//http://himaxoff.blog111.fc2.com/blog-entry-97.html\r
\r
// iOS で duration が 0 の時に触ると error\r
// 0 or 8\r
- if( !( this._durationFixPhase % 8 ) && this.duration ) raw.currentTime = this._lastCurrentTime;\r
+ if( !( this._durationFixPhase % 8 ) && this.duration ) raw.currentTime = this._lastCurrentTime / 1000;\r
\r
console.log( '[HTMLAudio] play ' + begin + ' -> ' + end + ' crt:' + ( raw.currentTime | 0 ) + ' last:' + this._lastCurrentTime );\r
\r
- if( forceReload || ( X_HTMLAudio_endedFixAOSP4 && raw.duration && raw.currentTime === raw.duration ) ){\r
- raw.src = '';\r
- raw.src = this._src;\r
+ if( forceReload ){\r
this.playing = false;\r
this._endedFixON = true;\r
+ raw.src = this._src;\r
console.log( '△ onEndedFix の開始' );\r
- raw.currentTime = this._lastCurrentTime;\r
this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_WAITING );\r
- X_HTMLAudio_endedFixAOSP2 && raw.load();\r
};\r
};\r
\r
var raw = this[ '_rawObject' ];\r
\r
console.log( '[HTMLAudio] pause' );\r
- \r
- this.seekTime = this.getActualCurrentTime();\r
\r
delete this._currentFixStart;\r
\r
getActualCurrentTime : function(){\r
return ( X_HTMLAudio_currentTimeFix ?\r
X_Timer_now() - this._currentFixStart + this._currentFixBegin :\r
+ this._seekingFixON ? this._lastCurrentTime :\r
this[ '_rawObject' ].currentTime * 1000 | 0 );\r
},\r
/*\r
* - volume, muted iPhone(iOS4-6)、Android(2.3.6)では動作せず。\r
* - FireFox3.6, Android 2.3.6については、src変更後、load()を呼び出さないと切り替わらなかった。iPhoneはload()が不要。\r
*/ \r
- detect : function( proxy, source, ext ){\r
+ detect : function( proxy, ext, hash ){\r
+ // TODO hash.CBR\r
+ // 得意度で返す\r
proxy[ 'asyncDispatch' ]( { type : X_EVENT_COMPLETE, canPlay : X_Audio_codecs[ ext ] } );\r
},\r
\r
OSDN Git Service
