* 1. iOS4(iPod 2G) で ended に達すると音が鳴らなくなる fix で解決\r
* 2. iOS6(iPod 4G) で ended に達すると音が鳴らなくなる fix で頻度が改善 emded イベントは発しないので、timeupdate 時に currentTime で判断する\r
* 3. WP7(IS12T) で最後の方にある音が鳴らない? mp3 cbr を使えばいい? 裏に回っても音が鳴り続ける\r
- * 4. Android 3.x で ended に達すると音が鳴らなくなる -> リロード(audio.src='';audio.sr=src)で解決、但し 2.x 4.x より遅延が大きく 1 秒弱程度ある\r
- * 5. Android 2.x で ended に達すると音が鳴らなくなる -> リロード(audio.src='';audio.src=src;audio.load())でで解決\r
- * 6. Android 4.4.2- は ended に達した際に currentTime が変更できなくなり、リロードが必要になる, 4.0, 4.1, 4.2, 4.3 で確認\r
- * 7. Blink5 Opera32 Win8 は HTMLAudio が壊れている、WebAudio は mp3 がデコードに失敗、ogg が動作\r
+ * 4. AOSP 2.x で ended に達すると音が鳴らなくなる -> リロード(audio.src='';audio.src=src;audio.load())でで解決\r
+ * 5. AOSP 3.x で ended に達すると音が鳴らなくなる -> リロード(audio.src='';audio.sr=src)で解決、但し 2.x 4.x より遅延が大きく 1 秒弱程度ある\r
+ * 6. AOSP 4.4.2- は ended に達した際に currentTime が変更できなくなり、リロードが必要になる, 4.0, 4.1, 4.2, 4.3 で確認, play() で頻度低下\r
+ * 7. Android 4.4.4 Chrome WebView は ended に達した際に play() が必要\r
+ * 8. BlinkOpera32 Win8 は HTMLAudio が壊れている、WebAudio は mp3 がデコードに失敗、ogg が動作\r
* \r
* memo\r
- * 1. Android4.1 iframe 内の Audio は親に focus が移っても再生を継続する\r
+ * 1. AOSP4.1 iframe 内の Audio は親に focus が移っても再生を継続する\r
+ * 2. AOSP oggはシークが乱れる m4a, mp3 は優秀\r
+ * \r
+ * 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\r
+ * 【JS】iPhoneのAudio周りのメモ iOS4.0 と 4.2 の違い\r
*/\r
+ /*\r
+ * durationFix\r
+ * duration が取得できるタイミングが遅くそれまでは infinity(PC Opera12), NaN(WP9), 0(Android 標準ブラウザ ChromeWebView) が入っている\r
+ * \r
+ * 1. touch が不要の場合、自動で再生を開始して duration を取得するまで再生する\r
+ * -> 取得後に pause or 通常再生\r
+ * 2. touch が必要な場合、タッチイベント内の audio.play() で duration 取得\r
+ * \r
+ * PC Opera12\r
+ * 1. loadeddata 等では duration が infinity で、再生後の durationchange 時に duration が判明する\r
+ * 2. duration 判明後には currentTime によるシークと、現在時間の取得が可能になる。\r
+ * 3. Opera12.17 Win32(XP) portable apps は勝手に再生が始まる、、、Win8+Opera では発生しない\r
+ * -> その際には timeupdate が発行されない、、、 iframe+image+audio で使わないときは破棄する、とか。\r
+ * -> opera11、10.54 WinXP はまとも、、、 portable が怪しい??\r
+ */\r
\r
-var X_HTMLAudio_playTrigger =\r
- 6 <= X_UA[ 'iOS' ] ? 'loadeddata' :\r
- X_UA[ 'iOS' ] < 5 ? 'stalled' :\r
- X_UA[ 'iOS' ] ? 'suspend' :\r
- X_UA[ 'Safari' ] < 4 ? 'canplaythrough' :\r
- X_UA[ 'ChromeWK' ] ? 'canplaythrough' :\r
- // Android 2.3.5(SBM101SH) では stalled は発生しない,,, ので必ず loadeddata もチェックする\r
- X_UA[ 'AOSP' ] ? 'stalled' :\r
- X_UA[ 'OperaMobile' ] || X_UA[ 'OperaTablet' ] ? 'loadeddata' :\r
- 'loadeddata', //'canplay',\r
+var\r
X_HTMLAudio,\r
\r
// ended が発生しない timeupdate 内で play() を呼ぶ (未検証) 不具合確認は iOS4,6\r
X_HTMLAudio_endedFixAOSP3 = !X_HTMLAudio_endedFixAOSP2 && X_UA[ 'AOSP' ] < 4,\r
// ended 時に play() を実施, currentTime が duration に張り付き更新されなければ src='';src=src を実施。\r
X_HTMLAudio_endedFixAOSP4 = 4 <= X_UA[ 'AOSP' ],\r
+ // ended 時に play() を実施\r
+ X_HTMLAudio_endedFixCWV = X_UA[ 'ChromeWV' ] || ( X_UA[ 'Blink' ] && X_UA[ 'Android' ] ),\r
\r
// Opera Mobile 12 は 2回目以降の currentTime へのセットで currentTime が更新されなくなるため、タイマーを使用する\r
X_HTMLAudio_currentTimeFix = !!X_UA[ 'OperaMobile' ] || !!X_UA[ 'OperaTablet' ],\r
// Gecko PC + Android でseek時に再生がしばしば止まる問題の修正\r
X_HTMLAudio_needPlayForSeek = X_UA[ 'Gecko' ],\r
// \r
- X_HTMLAudio_pauseFix = ( X_UA[ 'Windows' ] && 12 <= X_UA[ 'Opera' ] && 0 < ' XP XPSP2 2003|XP64'.indexOf( X_UA[ 'Windows' ] ) ), // XP + Opera12 のみ?\r
- /*\r
- * durationFix\r
- * duration が取得できるタイミングが遅くそれまでは infinity(PC Opera12), NaN(WP9), 0(AOSP Chrome 系) が入っている\r
- * \r
- * 1. touch が不要の場合、自動で再生を開始して duration を取得するまで再生する\r
- * -> 取得後に pause or 通常再生\r
- * 2. touch が必要な場合、タッチイベント内の audio.play() で duration 取得\r
- * \r
- * PC Opera12\r
- * 1. loadeddata 等では duration が infinity で、再生後の durationchange 時に duration が判明する\r
- * 2. duration 判明後には currentTime によるシークと、現在時間の取得が可能になる。\r
- * 3. Opera12.17 Win32(XP) portable apps は勝手に再生が始まる、、、Win8+Opera では発生しない\r
- * -> その際には timeupdate が発行されない、、、 iframe+image+audio で使わないときは破棄する、とか。\r
- * -> opera11、10.54 WinXP はまとも、、、 portable が怪しい??\r
- */\r
- X_HTMLAudio_need1stTouch = X_UA[ 'iOS' ] || X_UA[ 'ChromeWK' ] || ( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ), \r
- X_HTMLAudio_durationFix = ( X_UA[ 'Windows' ] && 12 <= X_UA[ 'Opera' ] ) || X_UA[ 'ChromeWK' ] || ( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ),\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_shortPlayFix = X_UA[ 'AOSP' ]; // Android 4.1.1 でも遭遇(ただしm4a, mp3は優秀, oggはシークが乱れる)\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
\r
if( X_Audio_constructor ){\r
\r
{\r
_closed : true,\r
_loaded : false,\r
- _ready : false, \r
+ _ready : false,\r
_src : '',\r
\r
+ // 0:\r
+ // 1: touch 要求完了\r
+ // 2: touch による play 中\r
+ // 4: duration 取得完了 currentTime へのセット\r
+ // 8: playing || loadeddata or canplaythrought\r
+ // 16: READY 発火済\r
+ _readyState : 0,\r
+ \r
+ _touchRequested : false,\r
+ _touched : false,\r
+ \r
_currentFixStart : 0,\r
_currentFixBegin : 0,\r
\r
_durationFixPhase : X_HTMLAudio_durationFix ? 1 : 0,\r
- _durationFixSkip : X_HTMLAudio_durationFix && !X_HTMLAudio_need1stTouch, \r
+ _durationFixSkip : X_HTMLAudio_durationFix && !X_HTMLAudio_need1stTouch,\r
_lastCurrentTime : 0,\r
\r
_shortPlayFixON : false,\r
\r
_endedFixON : false,\r
\r
- 'Constructor' : function( target, source, option ){\r
+ 'Constructor' : function( disatcher, source, option ){\r
var raw;\r
\r
- this.target = target || this;\r
- this._closed = false;\r
- this._src = source;\r
+ this.disatcher = disatcher || this;\r
+ this._closed = false;\r
+ this._src = source;\r
\r
if( X_HTMLAudio_shortPlayFix ){\r
this._shortPlayFixON = X_URL_getEXT( source ) === 'm4a';\r
raw.style.cssText = 'position:absolute;bottom:0;left:-50px;width:100px;height:100px;opacity:0;';\r
raw.controls = false;\r
raw.WebKitPlaysInline = true;\r
- raw.src = source;\r
- document.body.appendChild( raw );\r
+ X_elmBody.appendChild( raw );\r
} else {\r
- raw = X_TEMP.rawAudio || new X_Audio_constructor( source );\r
+ raw = X_TEMP.rawAudio || new X_Audio_constructor( '' );\r
// X_Doc_create( 'audio', { src : source } )[ 'appendTo' ]( X.Doc.body );\r
- raw.autobuffer = raw.autoplay = false;\r
+ //raw.autoplay = raw.autobuffer = raw.loop = false; // loop を使えば ended で止まること回避できるかも 但し ended イベントが起きなくなる\r
+ \r
+ if( X_TEMP.rawAudio ) delete X_TEMP.rawAudio;\r
};\r
\r
this[ '_rawObject' ] = raw;\r
X_EVENT_KILL_INSTANCE,\r
X_HTMLAudio_playTrigger,\r
//'loadstart', 'load',\r
- 'progress', 'error',\r
+ 'progress', //'error',\r
// 'suspend', 'abort', 'emptied', 'stalled',\r
// 'play', 'pause', 'seeked', 'ratechange', 'volumechange',\r
'loadedmetadata', 'loadeddata', 'canplay', 'canplaythrough',\r
'playing', 'waiting', 'seeking',\r
'durationchange', 'timeupdate', 'ended' ] );\r
\r
- if( X_TEMP.rawAudio ){\r
+ this[ 'listen' ]( [\r
+ 'loadstart', 'load',\r
+ 'progress', 'error',\r
+ 'suspend', 'abort', 'emptied', 'stalled',\r
+ 'play', 'pause', 'seeked', 'ratechange', 'volumechange',\r
+ 'loadedmetadata', 'loadeddata', 'canplay', 'canplaythrough',\r
+ 'playing', 'waiting', 'seeking',\r
+ 'durationchange', 'timeupdate', 'ended' ], this.onDebug );\r
+\r
+ if( X_HTMLAudio_need1stTouch ){\r
+ raw.src = source;\r
+ } else {\r
+ raw.preload = 'auto';\r
+ raw.autoplay = true; // Android 4.0-4.1.x で必要\r
+ //raw.autobuffer = true;\r
raw.src = source;\r
- raw.load(); // AOSP2 で必要\r
- delete X_TEMP.rawAudio;\r
+ raw.load(); // Android4.1.1 HTL21 では必要!\r
};\r
},\r
\r
+ onDebug : function( e ){\r
+ this.disatcher[ 'dispatch' ]( {\r
+ type : X_EVENT_DEBUG,\r
+ 'rawEvent' : e.type,\r
+ current : this.getActualCurrentTime() | 0,\r
+ duration : this[ '_rawObject' ].duration } );\r
+ },\r
+ \r
handleEvent : function( e ){\r
var raw = this[ '_rawObject' ],\r
actualEnded = e.type === 'ended',\r
ended = actualEnded,\r
- ready = e.type === X_HTMLAudio_playTrigger,\r
+ ready,\r
eventType, duration, end, now;\r
\r
// global に公開\r
break;\r
\r
case 'loadeddata' : // コンテンツの表示を現在の再生位置で初めて行えるようになった場合に発生\r
+ case 'canplaythrough' : // 今すぐに再生を開始してもバッファリングで停止することなく最後まで表示できると予測している場合に発生\r
if( !this._endedFixON ){\r
ready = true;\r
};\r
case 'canplay' : // 今すぐに再生を再開できるが、バッファリングが不十分でコンテンツを最後まで表示できないと予測している場合に発生\r
if( X_HTMLAudio_durationFix && !X_HTMLAudio_need1stTouch && this._durationFixPhase === 1 ){\r
- console.log( '▲ DurationFix の開始 @' + e.type );\r
- this._durationFixPhase = 2;\r
- raw.play();\r
+ this.actualPlay();\r
raw.currentTime = 0; // 必要!\r
};\r
- case 'canplaythrough' : // 今すぐに再生を開始してもバッファリングで停止することなく最後まで表示できると予測している場合に発生\r
if( this._endedFixON ){\r
console.log( '▽ onEndedFix の終了 @' + e.type );\r
this._endedFixON = false;\r
};\r
case 'loadedmetadata' : // ブラウザがメディアリソースの長さと寸法を判定した場合に発生\r
case 'durationchange' : // duration属性が更新された場合に発生\r
- if( !this.duration ){\r
+ if( !this.duration || this.duration !== raw.duration * 1000 ){ // Blink28 duration が変わる\r
duration = raw.duration;\r
};\r
break;\r
if( this._durationFixPhase & 3 ){ // 1 or 2\r
duration = raw.duration;\r
} else\r
- if( raw.currentTime === this._lastCurrentTime ){\r
+ if( ( now = this.getActualCurrentTime() ) === this._lastCurrentTime ){\r
eventType = X_EVENT_MEDIA_WAITING;\r
} else {\r
- this._lastCurrentTime = raw.currentTime;\r
+ this._lastCurrentTime = now; // *1 rm\r
\r
if( this.playing ){\r
end = X_Audio_getEndTime( this ) + this._shortPlayFixTime;\r
- now = this.getActualCurrentTime();\r
//console.log( now + ' / ' + end );\r
+ // || now < this._lastCurrentTime // loop した場合\r
if( 0 + end <= 0 + now ){ // 0+ なぜか iem9 で必要,,,\r
if( this.autoLoop ){\r
console.log( '☆★☆ 曲の最後に到達 @timeupdate now-end:' + ( now - end ) );\r
};\r
} else {\r
eventType = X_EVENT_MEDIA_PLAYING;\r
+ // *1 this._lastCurrentTime = now;\r
};\r
};\r
};\r
//case 'abort' : // ダウンロードの完了前にコンテンツの取得を停止した場合に発生(この停止はエラーによるものではない)\r
// break;\r
\r
- case 'error' : // コンテンツの取得実行中にエラーが発生した場合に発生\r
+ //case 'error' : // コンテンツの取得実行中にエラーが発生した場合に発生\r
// Opera12 src = '' で error が発生、無視する\r
// eventType = X_EVENT_ERROR;\r
- break;\r
+ //break;\r
\r
case 'playing' : // 再生が開始された場合に発生\r
if( X_HTMLAudio_volumeFix ){\r
raw.volume = this.gain;\r
};\r
- if( X_HTMLAudio_currentTimeFix ){\r
- this._currentFixStart = X_Timer_now(); // 正確な再生開始時間に補正\r
- };\r
+ //if( X_HTMLAudio_currentTimeFix && !this._currentFixStart ){\r
+ //this._currentFixStart = X_Timer_now(); // 正確な再生開始時間に補正\r
+ //};\r
eventType = !this._durationFixSkip && !this._endedFixON ? X_EVENT_MEDIA_PLAYING : X_EVENT_MEDIA_WAITING;\r
//case 'play' : // 再生が開始された。play()メソッドからの復帰後に発生する場合に発生\r
//case 'pause' : // 再生が一時停止された。pauseメソッドからの復帰後に発生する場合に発生\r
\r
this._loaded = this._loaded || ready;\r
\r
- // \r
+ //\r
+ if( X_HTMLAudio_need1stTouch && !this._touchRequested ){ // !this._readyState\r
+ if( e.type === X_HTMLAudio_playTrigger ){\r
+ this._touchRequested = true;\r
+ this._readyState = 1;\r
+ this.disatcher[ 'asyncDispatch' ]( X_EVENT_MEDIA_CAN_TOUCH_LOAD ); \r
+ };\r
+ } else\r
if( ended ){\r
if( !this._closed && this.autoLoop ){\r
- if( !( this.target[ 'dispatch' ]( X_EVENT_MEDIA_BEFORE_LOOP ) & X_CALLBACK_PREVENT_DEFAULT ) ){\r
+ if( !( this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_BEFORE_LOOP ) & X_CALLBACK_PREVENT_DEFAULT ) ){\r
this.looped = true;\r
- this.target[ 'dispatch' ]( X_EVENT_MEDIA_LOOPED );\r
- ( X_HTMLAudio_endedFixAOSP3 || X_HTMLAudio_endedFixAOSP4 || X_HTMLAudio_endedFixIOS ) && actualEnded && console.log( '☆★☆ 音声の継続用の play() @ended' );\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_endedFixIOS ) && actualEnded,\r
+ ( X_HTMLAudio_endedFixAOSP4 || X_HTMLAudio_endedFixCWV || X_HTMLAudio_endedFixIOS ) && actualEnded,\r
( X_HTMLAudio_endedFixAOSP3 || X_HTMLAudio_endedFixAOSP2 ) && actualEnded );\r
};\r
} else {\r
this.seekTime = 0;\r
delete this.playing;\r
- this.target[ 'dispatch' ]( X_EVENT_MEDIA_ENDED );\r
+ this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_ENDED );\r
};\r
} else\r
if( this._loaded && this.duration && !this._ready ){\r
this._ready = true;\r
- this.autoplay && X_Timer_once( 16, this, this.play );\r
- this.target[ 'asyncDispatch' ]( X_EVENT_READY );\r
+ this.disatcher[ 'asyncDispatch' ]( X_EVENT_READY );\r
+ this.autoplay && !X_HTMLAudio_need1stTouch && X_Timer_once( 16, this, this.actualPlay );\r
console.log( '> Audio Loaded!! ' + e.type + ' d:' + ( this.duration | 0 ) );\r
} else\r
if( eventType ){\r
- this.target[ 'dispatch' ]( eventType );\r
- eventType === X_EVENT_ERROR && this[ 'kill' ]();\r
+ this.disatcher[ 'dispatch' ]( eventType );\r
+ // eventType === X_EVENT_ERROR && this[ 'kill' ]();\r
};\r
},\r
\r
actualPlay : function( forcePlay, forceReload ){\r
var raw = this[ '_rawObject' ],\r
- begin, end;\r
+ e, begin, end;\r
\r
// もし kill 後に autoplayTimer で呼ばれても、_closed==true なので平気\r
if( this._closed ) return;\r
//return;\r
}; \r
\r
- if( !this._ready && ( !X_HTMLAudio_durationFix || !X_HTMLAudio_need1stTouch ) ){\r
+ if( this._touchRequested && !this._touched ){ // this._readyState === 1\r
+ e = X_EventDispatcher_CURRENT_EVENTS[ X_EventDispatcher_CURRENT_EVENTS.length - 1 ];\r
+ if( !e || !e[ 'pointerType' ] ){\r
+ alert( 'タッチイベント以外での play! ' + e.type );\r
+ return;\r
+ };\r
+ this._touched = true;\r
+ this._readyState = 2;\r
+ } else\r
+ if( !this._ready && ( !X_HTMLAudio_durationFix || !X_HTMLAudio_need1stTouch ) ){ // this._readyState < 2\r
this.autoplay = true;\r
return;\r
};\r
\r
//http://himaxoff.blog111.fc2.com/blog-entry-97.html\r
//Firefox3.6では一度も play() していない状態で currentTime = 0 を実行するとエラーになる。\r
- //また、GoogleChrome7 では currentTime = 0 直後に play() すると、pause()した位置前後の音が混ざることがある。(少なくとも自分の環境では) \r
- raw.currentTime = this._lastCurrentTime;\r
+ //また、GoogleChrome7 では currentTime = 0 直後に play() すると、pause()した位置前後の音が混ざることがある。(少なくとも自分の環境では)\r
+\r
+ // iOS で duration が 0 の時に触ると error\r
+ if( !X_HTMLAudio_durationFix || this.duration ) raw.currentTime = this._lastCurrentTime; // 2 < this._readyState\r
+\r
console.log( '[HTMLAudio] play ' + begin + ' -> ' + end + ' crt:' + ( raw.currentTime | 0 ) + ' last:' + this._lastCurrentTime );\r
- \r
- // Android4.0.5 で ended イベント時に currentTime が duration に張り付いたまま変更できない\r
- if( forceReload || ( raw.duration && raw.currentTime === raw.duration ) ){\r
+\r
+ if( forceReload || ( X_HTMLAudio_endedFixAOSP4 && raw.duration && raw.currentTime === raw.duration ) ){\r
raw.src = '';\r
raw.src = this._src;\r
this.playing = false;\r
this._endedFixON = true;\r
console.log( '△ onEndedFix の開始' );\r
raw.currentTime = this._lastCurrentTime;\r
- this.target[ 'dispatch' ]( X_EVENT_MEDIA_WAITING ); \r
+ this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_WAITING );\r
X_HTMLAudio_endedFixAOSP2 && raw.load();\r
- }; \r
+ };\r
};\r
\r
if( X_HTMLAudio_currentTimeFix ){\r
},\r
\r
actualPause : function(){\r
+ var raw = this[ '_rawObject' ];\r
+ \r
console.log( '[HTMLAudio] pause' );\r
\r
this.seekTime = this.getActualCurrentTime();\r
\r
delete this._currentFixStart;\r
\r
- !this[ '_rawObject' ].error && this[ '_rawObject' ].pause();\r
+ !raw.error && raw.pause();\r
\r
if( X_HTMLAudio_pauseFix ){\r
- this[ '_rawObject' ].src = '';\r
+ raw.src = '';\r
if( X_HTMLAudio_durationFix ){\r
delete this._durationFixPhase;\r
delete this._durationFixSkip;\r