/*\r
* original : uupaa-js HTML5Audio.js\r
* https://code.google.com/p/uupaa-js/source/browse/trunk/0.8/src/Audio/HTML5Audio.js?r=568\r
+ * \r
+ * Windows 版 Safari は QuickTime のインストールが必要\r
+ * \r
+ * 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
+ * \r
+ * memo\r
+ * 1. Android4.1 iframe 内の Audio は親に focus が移っても再生を継続する\r
*/\r
\r
-var X_Audio_HTMLAudio_playTrigger =\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[ 'AndroidBrowser2' ] ? 'stalled' : // Android 2.3.5(SBM101SH) では stalled は発生しない,,,\r
- X_UA[ 'AndroidBrowser4' ] ? 'loadeddata' : \r
- X_UA[ 'OperaMobile' ] || X_UA[ 'OperaTablet' ] ? 'loadeddata' : 'loadeddata', //'canplay',\r
- X_Audio_HTMLAudioWrapper,\r
- X_Audio_constructor = window[ 'Audio' ] || window.HTMLAudioElement,\r
- X_Audio_rawAudio,\r
- // Opera Mobile 12 android4.4.4 & 2.3.5 は 2回目以降の currentTime へのセットで currentTime が更新されなくなるため、タイマーを使用する\r
- X_Audio_HTMLAudioWrapper_currentTimeFix = !!X_UA[ 'OperaMobile' ] || !!X_UA[ 'OperaTablet' ], // || ( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ),\r
- // Android1.6+MobileOpera12では無理っぽい、、、\r
- X_Audio_HTMLAudioWrapper_badOperaAndroid = X_Audio_HTMLAudioWrapper_currentTimeFix && X_UA[ 'Android' ] < 2,\r
-\r
- // 一方 Desktop の Opera12 は、loadeddata 等では duration が infinity で、再生後の durationchange 時に duration が判明する。\r
- // opera12 volume, mute の変更が2度目以降できない\r
- // duration 判明後には currentTime によるシークと、現在時間の取得が可能になる。\r
- // canplay で play() durationchange で duration が取れたら loadedmetadata->loadeddata -> canplay する\r
- // boombox.js に書いてあった currentTime の効かないブラウザってこいつのことみたい、、、\r
- // Opera12.17 Win32(XP) portable apps は勝手に再生が始まる、、、その際には timeupdate が発行されない、、、 iframe+image+audio で使わないときは破棄する、とか。\r
- // opera11、10.54 WinXP はまとも、、、\r
- // X_Audio_Sprite_handleEvent でも使用\r
- X_Audio_HTMLAudioWrapper_ieMobile9Fix = ( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ),\r
- X_Audio_HTMLAudioWrapper_durationFix = ( !X_Audio_HTMLAudioWrapper_currentTimeFix && 12 <= X_UA[ 'Opera' ] ),\r
+ X_UA[ 'iOS' ] ? 'suspend' :\r
+ X_UA[ 'Safari' ] < 4 ? 'canplaythrough' :\r
+ X_UA[ 'ChromeWV' ] ? '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
+ X_HTMLAudio,\r
\r
- X_Audio_HTMLAudioWrapper_shortPlayFix = X_UA[ 'AndroidBrowser' ] && X_UA[ 'AndroidWebkit' ] <= 534.3, // Android 4.1.1 でも遭遇\r
+ // ended が発生しない timeupdate 内で play() を呼ぶ (未検証) 不具合確認は iOS4,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
+ // Android 3.1 で ended 時に src='';src=src を実施。\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
\r
- X_Audio_codecs;\r
+ // Opera Mobile 12 は 2回目以降の currentTime へのセットで currentTime が更新されなくなるため、タイマーを使用する\r
+ X_HTMLAudio_currentTimeFix = !!X_UA[ 'OperaMobile' ] || !!X_UA[ 'OperaTablet' ],\r
\r
-if( X_Audio_constructor && !X_Audio_HTMLAudioWrapper_badOperaAndroid ){\r
- //http://himaxoff.blog111.fc2.com/blog-entry-97.html\r
- //引数なしで new Audio() とすると、Operaでエラーになるそうなので注意。\r
- X_Audio_rawAudio = new X_Audio_constructor( '' );\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
+ // \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(Android 標準ブラウザ ChromeWebkit 系) が入っている\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[ 'ChromeWV' ] || ( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ), \r
+ X_HTMLAudio_durationFix = ( X_UA[ 'Windows' ] && 12 <= X_UA[ 'Opera' ] ) || X_UA[ 'ChromeWV' ] || ( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ),\r
+ \r
+ X_HTMLAudio_shortPlayFix = X_UA[ 'AOSP' ]; // Android 4.1.1 でも遭遇(ただしm4a, mp3は優秀, oggはシークが乱れる)\r
+ \r
+ \r
\r
- if( X_Audio_rawAudio.canPlayType ){\r
- X_Audio_codecs = {\r
- 'mp3' : X_Audio_rawAudio.canPlayType('audio/mpeg'),\r
- 'opus' : X_Audio_rawAudio.canPlayType('audio/ogg; codecs="opus"'),\r
- 'ogg' : X_Audio_rawAudio.canPlayType('audio/ogg; codecs="vorbis"'),\r
- 'wav' : X_Audio_rawAudio.canPlayType('audio/wav; codecs="1"'),\r
- 'aac' : X_Audio_rawAudio.canPlayType('audio/aac'),\r
- 'm4a' : X_Audio_rawAudio.canPlayType('audio/x-m4a') + X_Audio_rawAudio.canPlayType('audio/m4a') + X_Audio_rawAudio.canPlayType('audio/aac'),\r
- 'mp4' : X_Audio_rawAudio.canPlayType('audio/x-mp4') + X_Audio_rawAudio.canPlayType('audio/mp4') + X_Audio_rawAudio.canPlayType('audio/aac'),\r
- 'weba' : X_Audio_rawAudio.canPlayType('audio/webm; codecs="vorbis"')\r
- };\r
- (function( k, v ){\r
- for( k in X_Audio_codecs ){\r
- if( X_EMPTY_OBJECT[ k ] ) continue;\r
- v = X_Audio_codecs[ k ];\r
- X_Audio_codecs[ k ] = v && v.split( 'no' ).join( '' );\r
- console.log( k + ' ' + X_Audio_codecs[ k ] );\r
- };\r
- })();\r
- } else {\r
- // iOS3.2.3\r
- X_Audio_codecs = {\r
- 'mp3' : X_UA[ 'IE' ] || X_UA[ 'Chrome' ] || ( X_UA[ 'Windows' ] && X_UA[ 'Safari' ] ),\r
- 'ogg' : 5 <= X_UA[ 'Gecko' ] || X_UA[ 'Chrome' ] || X_UA[ 'Opera' ] ,\r
- 'wav' : X_UA[ 'Gecko' ] || X_UA[ 'Opera' ] || ( X_UA[ 'Windows' ] && X_UA[ 'Safari' ] ),\r
- 'aac' : X_UA[ 'IE' ] || X_UA[ 'WebKit' ],\r
- 'm4a' : X_UA[ 'IE' ] || X_UA[ 'WebKit' ],\r
- 'mp4' : X_UA[ 'IE' ] || X_UA[ 'WebKit' ],\r
- 'weba' : 2 <= X_UA[ 'Gecko' ] || 10.6 <= X_UA[ 'Opera' ] // firefox4+(Gecko2+)\r
- };\r
- };\r
+if( X_Audio_constructor ){\r
\r
- X_Audio_HTMLAudioWrapper = X_Audio_AbstractAudioBackend[ 'inherits' ](\r
- 'X.AV.HTML5AudioWrapper',\r
+ X_HTMLAudio = X_AudioBase[ 'inherits' ](\r
+ 'X.HTMLAudio',\r
X_Class.POOL_OBJECT,\r
{\r
- _playTime : 0,\r
- _closed : true,\r
- _loaded : false,\r
- _beginTime : 0,\r
- _playForDuration : 0,\r
- _lastCurrentTime : 0,\r
- _src : '',\r
+ _closed : true,\r
+ _loaded : false,\r
+ _ready : false, \r
+ _src : '',\r
+ \r
+ _currentFixStart : 0,\r
+ _currentFixBegin : 0,\r
+\r
+ _durationFixPhase : X_HTMLAudio_durationFix ? 1 : 0,\r
+ _durationFixSkip : X_HTMLAudio_durationFix && !X_HTMLAudio_need1stTouch, \r
+ _lastCurrentTime : 0,\r
+\r
+ _shortPlayFixON : false,\r
+ _shortPlayFixTime : 0,\r
\r
- Constructor : function( target, source, option ){\r
+ _endedFixON : false,\r
+ \r
+ 'Constructor' : function( target, source, option ){\r
var raw;\r
\r
this.target = target || this;\r
this._closed = false;\r
+ this._src = source;\r
+ \r
+ if( X_HTMLAudio_shortPlayFix ){\r
+ this._shortPlayFixON = X_URL_getEXT( source ) === 'm4a';\r
+ };\r
\r
this.setState( option );\r
\r
if( option[ 'useVideo' ] ){\r
- this[ '_rawObject' ] = raw = document.createElement( 'video' );\r
- raw.preload = 'none'; // auto, metadata, none\r
- //raw.autoplay = false, // no-auto\r
- raw.loop = false;\r
- raw.muted = false;\r
- raw.crossorigin = option[ 'crossorigin' ] || ''; //crossorigin: "anonymous", X.URL.isSameDomain() で切り替え\r
- raw.style.cssText = 'position:absolute;bottom:0;left:-50px;width:100px;height:100px;opacity:0;';\r
- raw.controls = false;\r
+ raw = document.createElement( 'video' );\r
+ raw.preload = 'none'; // auto, metadata, none\r
+ raw.autoplay = false, // no-auto\r
+ raw.loop = false;\r
+ raw.muted = false;\r
+ raw.crossorigin = option[ 'crossorigin' ] || ''; //crossorigin: "anonymous", X.URL.isSameDomain() で切り替え\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
- //raw.onclick = "alert('play');this.actualPlay();";\r
+ raw.src = source;\r
document.body.appendChild( raw );\r
- //raw.load();\r
} else {\r
- this[ '_rawObject' ] = X_Audio_rawAudio || new X_Audio_constructor( source );\r
+ raw = X_TEMP.rawAudio || new X_Audio_constructor( source );\r
// X_Doc_create( 'audio', { src : source } )[ 'appendTo' ]( X.Doc.body );\r
- this[ '_rawObject' ].autobuffer = false;\r
- this._src = source;\r
+ raw.autobuffer = raw.autoplay = false;\r
};\r
\r
+ this[ '_rawObject' ] = raw;\r
+ \r
this[ 'listen' ]( [\r
- 'loadstart', 'load', 'progress', 'suspend', 'abort', 'error', 'emptied', 'stalled', 'play', 'pause', 'loadedmetadata',\r
- 'loadeddata', 'waiting', 'playing', 'canplay', 'canplaythrough', 'seeking', 'seeked', 'timeupdate', 'ended',\r
- 'ratechange', 'durationchange', 'volumechange' ], this.handleEventProxy ); \r
-\r
- //document.body.appendChild( this[ '_rawObject' ] );\r
- this[ '_rawObject' ].autoplay = false;\r
+ X_EVENT_KILL_INSTANCE,\r
+ X_HTMLAudio_playTrigger,\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' ] );\r
\r
- if( X_Audio_rawAudio === this[ '_rawObject' ] ){\r
- if( X_Audio_HTMLAudioWrapper_badOperaAndroid ){\r
- X_Audio_HTMLAudioWrapper_badOperaAndroid && alert( 12 );\r
- X_EventDispatcher_toggleAllEvents( this, false );\r
- this[ '_rawObject' ] = new X_Audio_constructor( X_URL_toAbsolutePath( source ) );\r
- //X_EventDispatcher_toggleAllEvents( this, true );\r
- } else {\r
- X_Audio_rawAudio.src = source;\r
- };\r
-\r
- //this[ '_rawObject' ] = new X_Audio_constructor( X_URL_toAbsolutePath( source ) );\r
- /*!X_Audio_Sprite_needTouchFirst && */ X_Audio_rawAudio.load(); // 要る?\r
- X_Audio_rawAudio = null;\r
+ if( X_TEMP.rawAudio ){\r
+ raw.src = source;\r
+ raw.load(); // AOSP2 で必要\r
+ delete X_TEMP.rawAudio;\r
};\r
-\r
- this[ 'listenOnce' ]( X_EVENT_KILL_INSTANCE );\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
+ eventType, duration, end, now;\r
+ \r
+ // global に公開\r
+ //window[ '__rawAudio' ] = this[ '_rawObject' ];\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
delete this._loaded;\r
\r
- this[ '_rawObject' ].src = '';\r
- this[ '_rawObject' ].load();\r
+ raw.src = '';\r
+ raw.load();\r
\r
// removeChild for video\r
break;\r
- };\r
- },\r
- /*\r
- * http://uguisu.skr.jp/html/table3.html\r
- */\r
- handleEventProxy : function( e ){\r
- var type, loaded, end, now;\r
- \r
- X_Audio_HTMLAudioWrapper_badOperaAndroid && alert( e.type );\r
- \r
- //console.log( e.type );\r
- \r
- switch( e.type ){\r
- case 'loadstart' : // ブラウザがコンテンツの検索を開始した場合に発生\r
- break;\r
- case 'progress' : // ブラウザがコンテンツの取得を実行した場合に発生\r
- console.log( e.loaded + ' ' + e.total * 100 + '%' );\r
- // iem9 で常に0 this[ '_rawObject' ].networkState;\r
+\r
+ //case 'loadstart' : // ブラウザがコンテンツの検索を開始した場合に発生\r
+ //break;\r
+ case 'progress' : // ブラウザがコンテンツの取得を実行した場合に発生\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 ' + this[ '_rawObject' ].buffered && this[ '_rawObject' ].buffered.end(0) ); \r
+ //console.log( 'buffered.end ' + raw.buffered && raw.buffered.end(0) ); \r
break;\r
\r
- case 'canplay' : // 今すぐに再生を再開できるが、バッファリングが不十分でコンテンツを最後まで表示できないと予測している場合に発生\r
- if( X_Audio_HTMLAudioWrapper_durationFix && this._playForDuration === 0 ){\r
- //console.log( 'DurationFix開始 - ' + this[ '_rawObject' ].duration );\r
- this._playForDuration = 1;\r
- this[ '_rawObject' ].play();\r
- this[ '_rawObject' ].currentTime = this._beginTime / 1000; // 必要!\r
- return;\r
+ case 'loadeddata' : // コンテンツの表示を現在の再生位置で初めて行えるようになった場合に発生\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
+ raw.currentTime = 0; // 必要!\r
};\r
- case 'loadedmetadata' : // ブラウザがメディアリソースの長さと寸法を判定した場合に発生\r
- case 'loadeddata' : // コンテンツの表示を現在の再生位置で初めて行えるようになった場合に発生\r
case 'canplaythrough' : // 今すぐに再生を開始してもバッファリングで停止することなく最後まで表示できると予測している場合に発生\r
- if( X_Audio_HTMLAudioWrapper_durationFix && this._playForDuration !== 2 ) return;\r
- this.duration = this.duration || this[ '_rawObject' ].duration * 1000;\r
- break;\r
- \r
- case 'stalled' : // ブラウザがコンテンツの取得を試みたが、データがまだ用意されていない場合に発生\r
- // Android2 で ready 扱い?\r
- case 'suspend' : // ブラウザが意図的にコンテンツの取得を現在行っていない場合に発生(ダウンロードは未完了)\r
- // iOS で ready 扱い\r
- case 'emptied' : // 読み込み中に致命的なエラーが発生したか、実行状態ででload()メソッドが実行された場合に発生\r
- case 'abort' : // ダウンロードの完了前にコンテンツの取得を停止した場合に発生(この停止はエラーによるものではない)\r
- break;\r
- \r
- case 'error' : // コンテンツの取得実行中にエラーが発生した場合に発生\r
- type = X_EVENT_ERROR;\r
- break;\r
- \r
- case 'playing' : // 再生が開始された場合に発生\r
- if( X_Audio_HTMLAudioWrapper_currentTimeFix ){\r
- this._playTime = X_Timer_now();\r
+ if( this._endedFixON ){\r
+ console.log( '▽ onEndedFix の終了 @' + e.type );\r
+ this._endedFixON = false;\r
+ this.actualPlay();\r
};\r
- type = X_EVENT_MEDIA_PLAYING;\r
- case 'play' : // 再生が開始された。play()メソッドからの復帰後に発生する場合に発生\r
- case 'pause' : // 再生が一時停止された。pauseメソッドからの復帰後に発生する場合に発生\r
- case 'seeked' : // シークがfalseに変化した場合に発生\r
- case 'ratechange' : // defaultPlaybackRate属性とplaybackRate属性のどちらかが更新された場合に発生\r
- case 'volumechange' : // volume属性とmuted属性のどちらかが変化した場合に発生\r
- if( this._playForDuration === 1 ) return;\r
- break;\r
- \r
- case 'waiting' : // 次のフレームが利用不可のため再生を停止したが、そのフレームがやがて利用可能になると想定している場合に発生\r
- type = X_EVENT_MEDIA_WAITING;\r
- case 'seeking' : // シークがtrueに変化し、イベントを発生させるのに十分な時間がシーク操作にかかっている場合に発生\r
- type = type || X_EVENT_MEDIA_SEEKING;\r
- if( this._playForDuration === 1 ) return;\r
- break;\r
- \r
- case 'ended' :\r
- if( !this._closed && this.autoLoop ){\r
- if( !( this.target[ 'dispatch' ]( X_EVENT_MEDIA_BEFORE_LOOP ) & X_Callback_PREVENT_DEFAULT ) ){\r
- this.looped = true;\r
- this.target[ 'dispatch' ]( X_EVENT_MEDIA_LOOPED );\r
- this.actualPlay();\r
- };\r
- return;\r
+ case 'loadedmetadata' : // ブラウザがメディアリソースの長さと寸法を判定した場合に発生\r
+ case 'durationchange' : // duration属性が更新された場合に発生\r
+ if( !this.duration ){\r
+ duration = raw.duration;\r
};\r
- type = X_EVENT_MEDIA_ENDED;\r
- this.seekTime = 0;\r
- delete this.playing;\r
break;\r
\r
- case 'timeupdate' : // 通常の再生が行われ現在の再生位置の変化が起こった場合に発生\r
- if( X_Audio_HTMLAudioWrapper_ieMobile9Fix ){\r
- if( this._playForDuration === 1 ){\r
- console.log( 'tu ' + this[ '_rawObject' ].duration );\r
- if( !this.duration && X_Type_isFinite( this[ '_rawObject' ].duration ) ){\r
- this.duration = this.duration || this[ '_rawObject' ].duration * 1000;\r
- this._playForDuration = 2;\r
- loaded = true;\r
- //console.log( 'durationFix が完了' + this.duration );\r
- break;\r
+ // TODO firefox で 短い音声でtimeupdate, ended が発火しない <- 最後の音に無音部分を追加する\r
+ case 'timeupdate' : // 通常の再生が行われ現在の再生位置の変化が起こった場合に発生\r
+ if( this._durationFixPhase & 3 ){ // 1 or 2\r
+ duration = raw.duration;\r
+ } else\r
+ if( raw.currentTime === this._lastCurrentTime ){\r
+ eventType = X_EVENT_MEDIA_WAITING;\r
+ } else {\r
+ this._lastCurrentTime = raw.currentTime;\r
+\r
+ if( this.playing ){\r
+ end = X_Audio_getEndTime( this ) + this._shortPlayFixTime;\r
+ now = this.getActualCurrentTime();\r
+ //console.log( now + ' / ' + end );\r
+ if( 0 + end <= 0 + now ){ // 0+ なぜか iem9 で必要,,,\r
+ if( this.autoLoop ){\r
+ console.log( '☆★☆ 曲の最後に到達 @timeupdate now-end:' + ( now - end ) );\r
+ ended = true;\r
+ if( X_HTMLAudio_endedFixIOS ) actualEnded = true;\r
+ } else {\r
+ this.actualPause();\r
+ eventType = X_EVENT_MEDIA_ENDED;\r
+ };\r
} else {\r
- this[ '_rawObject' ].currentTime = this._beginTime / 1000; // 必要!\r
- return;\r
+ eventType = X_EVENT_MEDIA_PLAYING;\r
};\r
- } else\r
- if( this[ '_rawObject' ].currentTime === this._lastCurrentTime ){\r
- //this.target[ 'dispatch' ]( 'seeking' );\r
- this.target[ 'dispatch' ]( X_EVENT_MEDIA_WAITING );\r
- return;\r
};\r
- this._lastCurrentTime = this[ '_rawObject' ].currentTime;\r
};\r
- this.duration = this.duration || this[ '_rawObject' ].duration * 1000;\r
-\r
- if( this.playing ){\r
- end = X_AudioWrapper_getEndTime( this );\r
- now = this.getActualCurrentTime();\r
- //console.log( end + ' / ' + now );\r
- if( 0 + end <= 0 + now ){ // なぜか iem9 で必要,,,\r
- if( this.autoLoop ){\r
- if( !( this.target[ 'dispatch' ]( X_EVENT_MEDIA_BEFORE_LOOP ) & X_Callback_PREVENT_DEFAULT ) ){\r
- this.looped = true;\r
- this.target[ 'dispatch' ]( X_EVENT_MEDIA_LOOPED );\r
- this.actualPlay();\r
- };\r
- } else {\r
- this.actualPause();\r
- this.target[ 'dispatch' ]( X_EVENT_MEDIA_ENDED );\r
- };\r
- return;\r
- };\r
- } else {\r
- return;\r
- };\r
- type = X_EVENT_MEDIA_PLAYING;\r
break;\r
+ \r
+ //case 'stalled' : // ブラウザがコンテンツの取得を試みたが、データがまだ用意されていない場合に発生\r
+ // Android2 で ready 扱い?\r
+ //case 'suspend' : // ブラウザが意図的にコンテンツの取得を現在行っていない場合に発生(ダウンロードは未完了)\r
+ // iOS で ready 扱い\r
+ //case 'emptied' : // 読み込み中に致命的なエラーが発生したか、実行状態ででload()メソッドが実行された場合に発生\r
+ //case 'abort' : // ダウンロードの完了前にコンテンツの取得を停止した場合に発生(この停止はエラーによるものではない)\r
+ // break;\r
\r
- case 'durationchange' : // duration属性が更新された場合に発生\r
+ case 'error' : // コンテンツの取得実行中にエラーが発生した場合に発生\r
+ // Opera12 src = '' で error が発生、無視する\r
+ // eventType = X_EVENT_ERROR;\r
+ break;\r
\r
- if( !X_Audio_HTMLAudioWrapper_durationFix ){\r
- this.duration = this[ '_rawObject' ].duration * 1000;\r
- } else\r
- // Desktop Opera では Infinity, IEM9 では NaN\r
- if( !this.duration && X_Type_isFinite( this[ '_rawObject' ].duration ) ){\r
- \r
- //console.log( this[ '_rawObject' ].duration );\r
- \r
- this.duration = this[ '_rawObject' ].duration * 1000;\r
- \r
- if( this._playForDuration === 0 ) this._playForDuration = 2;\r
- \r
- if( this._playForDuration === 1 ){\r
- this._playForDuration = 2;\r
- \r
- console.log( 'Loaded ' + this._loaded );\r
- \r
- if( this._loaded ){\r
- this[ '_rawObject' ].currentTime = this._beginTime / 1000;\r
- console.log( '設定 ' + this._beginTime );\r
- return;\r
- };\r
-\r
- loaded = true;\r
- console.log( 'durationFix が完了' + this.duration );\r
- \r
- if( this.autoplay ){\r
- this[ '_rawObject' ].currentTime = this._beginTime / 1000; \r
- } else {\r
- // Opera12.17 WinXP で勝手に再生される不具合\r
- // これで一応再生は止まる、、、\r
- this[ '_rawObject' ].src = '';\r
- //this[ '_rawObject' ].load(); \r
- };\r
- };\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
+ eventType = !this._durationFixSkip && !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 'waiting' : // 次のフレームが利用不可のため再生を停止したが、そのフレームがやがて利用可能になると想定している場合に発生\r
+ eventType = X_EVENT_MEDIA_WAITING;\r
+ break;\r
+ case 'seeking' : // シークがtrueに変化し、イベントを発生させるのに十分な時間がシーク操作にかかっている場合に発生\r
+ eventType = X_EVENT_MEDIA_SEEKING;\r
+ break;\r
};\r
\r
- \r
- if( !this._loaded && ( loaded || e.type === X_Audio_HTMLAudio_playTrigger || e.type === 'loadeddata' ) ){\r
+ // duration は Infinity, NaN, 0 の場合があるため、これを除外する\r
+ if( 0 < duration && X_Type_isFinite( duration ) ){\r
+ this.duration = duration * 1000;\r
+\r
+ if( this._durationFixPhase === 2 ){\r
+ console.log( '▼ DurationFix の終了 @' + e.type );\r
+ this._durationFixPhase = 4;\r
+ \r
+ ready = true;\r
+ \r
+ if( this.autoplay || this._loaded ){\r
+ console.log( '☆ 再生 <- DurationFix の終了' );\r
+ this._durationFixSkip = false;\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
+ };\r
+ } else\r
+ if( this._durationFixPhase ){\r
+ this._durationFixPhase = 4;\r
+ }; \r
+ };\r
+\r
+ this._loaded = this._loaded || ready;\r
+\r
+ // \r
+ if( ended ){\r
+ if( !this._closed && this.autoLoop ){\r
+ if( !( this.target[ '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.actualPlay(\r
+ ( X_HTMLAudio_endedFixAOSP4 || 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
+ };\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._loaded = true;\r
this.target[ 'asyncDispatch' ]( X_EVENT_READY );\r
- console.log( 'Loaded! ' + e.type + ' d:' + ( this.duration | 0 ) );\r
- return;\r
- };\r
- \r
- if( !loaded && type ){\r
- this.target[ 'dispatch' ]( type );\r
- type === X_EVENT_ERROR && this[ 'kill' ]();\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
};\r
},\r
\r
- actualPlay : function(){\r
- var begin, end;\r
+ actualPlay : function( forcePlay, forceReload ){\r
+ var raw = this[ '_rawObject' ],\r
+ begin, end;\r
\r
// もし kill 後に autoplayTimer で呼ばれても、_closed==true なので平気\r
if( this._closed ) return;\r
- if( !this._loaded /* && !X_Audio_Sprite_inTouchAction */ ){\r
- this.autoplay = true;\r
- return;\r
+ \r
+ \r
+ if( !raw.src ){ // X_HTMLAudio_pauseFix によって src が空になっている\r
+ console.log( '○ 削除された audio.src の復帰' );\r
+ raw.src = this._src;\r
+ //return;\r
+ }; \r
+ \r
+ if( !this._ready && ( !X_HTMLAudio_durationFix || !X_HTMLAudio_need1stTouch ) ){\r
+ this.autoplay = true;\r
+ return;\r
};\r
\r
- if( X_Audio_HTMLAudioWrapper_ieMobile9Fix && this._playForDuration === 0 ){\r
- console.log( 'DurationFix開始 - ' + this[ '_rawObject' ].duration );\r
- this._playForDuration = 1;\r
+ if( X_HTMLAudio_durationFix && X_HTMLAudio_need1stTouch && this._durationFixPhase === 1 ){\r
+ console.log( '▲ DurationFix の開始(タッチ用)' );\r
+ this._durationFixPhase = 2;\r
};\r
\r
- end = X_AudioWrapper_getEndTime( this );\r
- begin = this._beginTime = X_AudioWrapper_getStartTime( this, end, true );\r
+ end = X_Audio_getEndTime( this );\r
+ begin = X_Audio_getStartTime( this, end, true );\r
\r
- if( X_Audio_HTMLAudioWrapper_shortPlayFix ){\r
- begin -= end - begin > 1000 ? 200 : 400;\r
- begin = begin < 0 ? 0 : begin;\r
- };\r
+ this._lastCurrentTime = begin / 1000;\r
\r
- if( !this[ '_rawObject' ].src ){\r
- this._beginTime = begin;\r
- this[ '_rawObject' ].src = this._src;\r
- delete this._playForDuration;\r
+ if( this._shortPlayFixON ){\r
+ this._shortPlayFixTime = ( 1000 < end - begin ) ? 200 : 400;\r
+ if( this.duration < end + this._shortPlayFixTime ){\r
+ this._shortPlayFixTime = this.duration - end;\r
+ };\r
};\r
\r
- if( !this.playing ){\r
- if( X_UA[ 'Chrome' ] ){ // [CHROME][FIX] volume TODO どの version で 修正される?\r
- // [!] delay\r
- X_Timer_once( 0, this, this._fixForChrome );\r
- this[ '_rawObject' ].volume = 0;\r
- } else {\r
- this[ '_rawObject' ].volume = this.gain;\r
- };\r
- this[ '_rawObject' ].play();\r
- this.playing = true;\r
- };\r
- //http://himaxoff.blog111.fc2.com/blog-entry-97.html\r
- //Firefox3.6では一度も play() していない状態で currentTime = 0 を実行するとエラーになる。\r
- //また、GoogleChrome7 では currentTime = 0 直後に play() すると、pause()した位置前後の音が混ざることがある。(少なくとも自分の環境では)\r
- this[ '_rawObject' ].currentTime = this._lastCurrentTime = begin / 1000;\r
-\r
- console.log( '[HTMLAudio] play ' + begin + ' -> ' + end );\r
- \r
- if( X_Audio_HTMLAudioWrapper_currentTimeFix ){\r
- this._beginTime = begin;\r
- this._playTime = X_Timer_now();\r
- };\r
+ if( this._durationFixSkip || this._endedFixON ){\r
+ console.log( '☆ audio.play をスキップ ' + begin + ' -> ' + end + ' crt:' + ( raw.currentTime | 0 ) );\r
+ } else {\r
+ if( !this.playing ){\r
+ if( X_HTMLAudio_volumeFix ){\r
+ raw.volume = 0;\r
+ } else {\r
+ raw.volume = X_HTMLAudio_volumeEnabled ? this.gain : 1;\r
+ };\r
+ raw.play();\r
+ this.playing = true;\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
+ //Firefox3.6では一度も play() していない状態で currentTime = 0 を実行するとエラーになる。\r
+ //また、GoogleChrome7 では currentTime = 0 直後に play() すると、pause()した位置前後の音が混ざることがある。(少なくとも自分の環境では) \r
+ raw.currentTime = this._lastCurrentTime;\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
+ 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
+ X_HTMLAudio_endedFixAOSP2 && raw.load();\r
+ }; \r
+ };\r
\r
+ if( X_HTMLAudio_currentTimeFix ){\r
+ this._currentFixBegin = begin;\r
+ this._currentFixStart = X_Timer_now();\r
+ };\r
},\r
- \r
- // [CHROME][FIX] volume\r
- _fixForChrome : X_UA[ 'Chrome' ] && function(){\r
- !this._closed && ( this[ '_rawObject' ].volume = this.gain );\r
- },\r
\r
actualPause : function(){\r
- if( !this.playing ) return;\r
+ console.log( '[HTMLAudio] pause' );\r
\r
this.seekTime = this.getActualCurrentTime();\r
\r
- delete this._playTime;\r
+ delete this._currentFixStart;\r
\r
- !this[ '_rawObject' ].error && this[ '_rawObject' ].pause();\r
- \r
- if( X_Audio_HTMLAudioWrapper_durationFix ){\r
- this[ '_rawObject' ].src = '';\r
- // load();\r
- };\r
- delete this.playing;\r
+ !this[ '_rawObject' ].error && this[ '_rawObject' ].pause();\r
+ \r
+ if( X_HTMLAudio_pauseFix ){\r
+ this[ '_rawObject' ].src = '';\r
+ if( X_HTMLAudio_durationFix ){\r
+ delete this._durationFixPhase;\r
+ delete this._durationFixSkip;\r
+ };\r
+ };\r
+ delete this.playing;\r
},\r
\r
getActualCurrentTime : function(){\r
- return ( X_Audio_HTMLAudioWrapper_currentTimeFix ?\r
- X_Timer_now() - this._playTime + this._beginTime :\r
- this[ '_rawObject' ].currentTime * 1000 | 0 );\r
+ return ( X_HTMLAudio_currentTimeFix ?\r
+ X_Timer_now() - this._currentFixStart + this._currentFixBegin :\r
+ this[ '_rawObject' ].currentTime * 1000 | 0 );\r
},\r
/*\r
http://www.w3schools.com/tags/av_prop_error.asp\r
1 = MEDIA_ERR_ABORTED - fetching process aborted by user\r
- 2 = MEDIA_ERR_NETWORK - error occurred when downloading\r
- 3 = MEDIA_ERR_DECODE - error occurred when decoding\r
- 4 = MEDIA_ERR_SRC_NOT_SUPPORTED - audio/video not supported\r
- */ \r
+ 2 = MEDIA_ERR_NETWORK - error occurred when downloading\r
+ 3 = MEDIA_ERR_DECODE - error occurred when decoding\r
+ 4 = MEDIA_ERR_SRC_NOT_SUPPORTED - audio/video not supported\r
+ */ \r
getActualError : function(){\r
return this[ '_rawObject' ].error || 0;\r
},\r
\r
afterUpdateState : function( result ){\r
if( result & 3 ){ // seek\r
- this.actualPlay();\r
+ this.actualPlay();\r
} else\r
- if( result & 4 ){\r
- this[ '_rawObject' ].volume = this.gain;\r
+ if( ( result & 4 ) && X_HTMLAudio_volumeEnabled ){\r
+ this[ '_rawObject' ].volume = this.gain;\r
}; \r
}\r
\r
}\r
);\r
\r
- X_Audio_BACKENDS.push(\r
+ X_HTMLAudio && X_Audio_BACKENDS.push(\r
{\r
- backendName : 'HTML Audio',\r
+ backendID : 2,\r
+ \r
+ backendName : 'HTMLAudio',\r
+ \r
+ canPlay : X_Audio_codecs,\r
/*\r
* HTML5 の audio 要素と video 要素でサポートされているメディアフォーマット\r
* https://developer.mozilla.org/ja/docs/Web/HTML/Supported_media_formats\r
* - FireFox3.6, Android 2.3.6については、src変更後、load()を呼び出さないと切り替わらなかった。iPhoneはload()が不要。\r
*/ \r
detect : function( proxy, source, ext ){\r
- /*\r
- var ok, mineType = 'audio/' + ext;\r
- switch( ext ){\r
- case 'mp3' :\r
- ok = X_UA[ 'IE' ] || X_UA[ 'Chrome' ] || ( X_UA[ 'Windows' ] && X_UA[ 'Safari' ] );\r
- mineType = 'audio/mpeg';\r
- //if( X_UA[ 'Android' ] && X_UA[ 'Gecko' ] ) mineType = '';\r
- break;\r
- case 'ogg' :\r
- ok = 15 <= X_UA[ 'Gecko' ] || X_UA[ 'Chrome' ] || X_UA[ 'Opera' ] ;\r
- if( X_UA[ 'AndroidBrowser' ] ) mineType = '';\r
- break;\r
- case 'm4a' :\r
- ok = X_UA[ 'IE' ] || X_UA[ 'WebKit' ];\r
- mineType = 'audio/mp4';\r
- break;\r
- case 'webm' :\r
- ok = 2 <= X_UA[ 'Gecko' ] || 10.6 <= X_UA[ 'Opera' ] ; // firefox4+(Gecko2+)\r
- break;\r
- case 'wav' :\r
- ok = X_UA[ 'Gecko' ] || X_UA[ 'Opera' ] || ( X_UA[ 'Windows' ] && X_UA[ 'Safari' ] );\r
- //mineType = 'audio/wav'; // audio/x-wav ?\r
- break;\r
- default :\r
- mineType = '';\r
- };\r
- \r
- if( !ok && mineType ){\r
- if( !X_Audio_rawAudio ) X_Audio_rawAudio = new Audio;\r
- ok = X_Audio_rawAudio.canPlayType( mineType );\r
- //console.log( 'HTML Audio ' + ok + ' ext:' + ext );\r
- };\r
- console.log( 'HTML Audio ' + ok + ' ext:' + ext );\r
- */\r
- \r
proxy[ 'asyncDispatch' ]( { type : X_EVENT_COMPLETE, canPlay : X_Audio_codecs[ ext ] } );\r
},\r
\r
- klass : X_Audio_HTMLAudioWrapper\r
+ klass : X_HTMLAudio\r
\r
} );\r
\r
/*\r
* \r
* howler.js\r
- * codecs = {\r
- mp3: !!audioTest.canPlayType('audio/mpeg;').replace(/^no$/, ''),\r
- opus: !!audioTest.canPlayType('audio/ogg; codecs="opus"').replace(/^no$/, ''),\r
- ogg: !!audioTest.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/, ''),\r
- wav: !!audioTest.canPlayType('audio/wav; codecs="1"').replace(/^no$/, ''),\r
- aac: !!audioTest.canPlayType('audio/aac;').replace(/^no$/, ''),\r
- m4a: !!(audioTest.canPlayType('audio/x-m4a;') || audioTest.canPlayType('audio/m4a;') || audioTest.canPlayType('audio/aac;')).replace(/^no$/, ''),\r
- mp4: !!(audioTest.canPlayType('audio/x-mp4;') || audioTest.canPlayType('audio/mp4;') || audioTest.canPlayType('audio/aac;')).replace(/^no$/, ''),\r
- weba: !!audioTest.canPlayType('audio/webm; codecs="vorbis"').replace(/^no$/, '')\r
- };\r
+ * codecs = {\r
+ mp3: !!audioTest.canPlayType('audio/mpeg;').replace(/^no$/, ''),\r
+ opus: !!audioTest.canPlayType('audio/ogg; codecs="opus"').replace(/^no$/, ''),\r
+ ogg: !!audioTest.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/, ''),\r
+ wav: !!audioTest.canPlayType('audio/wav; codecs="1"').replace(/^no$/, ''),\r
+ aac: !!audioTest.canPlayType('audio/aac;').replace(/^no$/, ''),\r
+ m4a: !!(audioTest.canPlayType('audio/x-m4a;') || audioTest.canPlayType('audio/m4a;') || audioTest.canPlayType('audio/aac;')).replace(/^no$/, ''),\r
+ mp4: !!(audioTest.canPlayType('audio/x-mp4;') || audioTest.canPlayType('audio/mp4;') || audioTest.canPlayType('audio/aac;')).replace(/^no$/, ''),\r
+ weba: !!audioTest.canPlayType('audio/webm; codecs="vorbis"').replace(/^no$/, '')\r
+ };\r
*/\r
\r
};\r