OSDN Git Service

Version 0.6.176, add X.Script.
[pettanr/clientJs.git] / 0.6.x / js / 07_audio / 02_XHTMLAudio.js
1 \r
2 /*\r
3  * original : uupaa-js HTML5Audio.js\r
4  * https://code.google.com/p/uupaa-js/source/browse/trunk/0.8/src/Audio/HTML5Audio.js?r=568\r
5  * \r
6  * Windows 版 Safari は QuickTime のインストールが必要\r
7  * \r
8  * 1. iOS4(iPod 2G) で ended に達すると音が鳴らなくなる fix で解決\r
9  * 2. iOS6(iPod 4G) で ended に達すると音が鳴らなくなる fix で頻度が改善 emded イベントは発しないので、timeupdate 時に currentTime で判断する\r
10  * 3. WP7(IS12T) で最後の方にある音が鳴らない? mp3 cbr を使えばいい? 裏に回っても音が鳴り続ける\r
11  * 4. Android 3.x で ended に達すると音が鳴らなくなる -> リロード(audio.src='';audio.sr=src)で解決、但し 2.x 4.x より遅延が大きく 1 秒弱程度ある\r
12  * 5. Android 2.x で ended に達すると音が鳴らなくなる -> リロード(audio.src='';audio.src=src;audio.load())でで解決\r
13  * 6. Android 4.4.2- は ended に達した際に currentTime が変更できなくなり、リロードが必要になる, 4.0, 4.1, 4.2, 4.3 で確認\r
14  * 7. Blink5 Opera32 Win8 は HTMLAudio が壊れている、WebAudio は mp3 がデコードに失敗、ogg が動作\r
15  * \r
16  * memo\r
17  * 1. Android4.1 iframe 内の Audio は親に focus が移っても再生を継続する\r
18  */\r
19 \r
20 var X_HTMLAudio_playTrigger =\r
21                 6 <= X_UA[ 'iOS' ] ? 'loadeddata' :\r
22                 X_UA[ 'iOS' ] < 5  ? 'stalled' :\r
23                 X_UA[ 'iOS' ]      ? 'suspend' :\r
24                 X_UA[ 'Safari' ] < 4 ? 'canplaythrough' :\r
25                 X_UA[ 'ChromeWV' ]   ? 'canplaythrough' :\r
26                 // Android 2.3.5(SBM101SH) では stalled は発生しない,,, ので必ず loadeddata もチェックする\r
27                 X_UA[ 'AOSP' ] ? 'stalled' :\r
28                 X_UA[ 'OperaMobile' ] || X_UA[ 'OperaTablet' ] ? 'loadeddata' :\r
29                         'loadeddata', //'canplay',\r
30         X_HTMLAudio,\r
31         \r
32         // ended が発生しない timeupdate 内で play() を呼ぶ (未検証) 不具合確認は iOS4,6\r
33         X_HTMLAudio_endedFixIOS     = X_UA[ 'iOS' ] < 7,\r
34         // Android 2.3.5 で ended 時に audio.src='';audio.src=src;audio.load() を実施。 2.3.4 でも問題なし。\r
35         X_HTMLAudio_endedFixAOSP2   = X_UA[ 'AOSP' ] < 3,\r
36         // Android 3.1 で ended 時に src='';src=src を実施。\r
37         X_HTMLAudio_endedFixAOSP3   = !X_HTMLAudio_endedFixAOSP2 && X_UA[ 'AOSP' ] < 4,\r
38         // ended 時に play() を実施, currentTime が duration に張り付き更新されなければ  src='';src=src を実施。\r
39         X_HTMLAudio_endedFixAOSP4   = 4 <= X_UA[ 'AOSP' ],\r
40         \r
41         // Opera Mobile 12 は 2回目以降の currentTime へのセットで currentTime が更新されなくなるため、タイマーを使用する\r
42         X_HTMLAudio_currentTimeFix  = !!X_UA[ 'OperaMobile' ] || !!X_UA[ 'OperaTablet' ],\r
43 \r
44         X_HTMLAudio_volumeFix       = X_UA[ 'Chrome' ],\r
45         /*\r
46          * win opera12 volume, mute の変更が2度目以降できない\r
47          */\r
48         X_HTMLAudio_volumeEnabled   = !( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ) && !X_UA[ 'Opera' ],\r
49         // Gecko PC + Android でseek時に再生がしばしば止まる問題の修正\r
50         X_HTMLAudio_needPlayForSeek = X_UA[ 'Gecko' ],\r
51         // \r
52         X_HTMLAudio_pauseFix            = ( X_UA[ 'Windows' ] && 12 <= X_UA[ 'Opera' ] && 0 < ' XP XPSP2 2003|XP64'.indexOf( X_UA[ 'Windows' ] ) ), // XP + Opera12 のみ?\r
53         /*\r
54          * durationFix\r
55          *  duration が取得できるタイミングが遅くそれまでは infinity(PC Opera12), NaN(WP9), 0(Android 標準ブラウザ ChromeWebkit 系) が入っている\r
56          * \r
57          *   1. touch が不要の場合、自動で再生を開始して duration を取得するまで再生する\r
58          *        -> 取得後に pause or 通常再生\r
59          *   2. touch が必要な場合、タッチイベント内の audio.play() で duration 取得\r
60          * \r
61          *  PC Opera12\r
62          *   1. loadeddata 等では duration が infinity で、再生後の durationchange 時に duration が判明する\r
63          *   2. duration 判明後には currentTime によるシークと、現在時間の取得が可能になる。\r
64          *   3. Opera12.17 Win32(XP) portable apps は勝手に再生が始まる、、、Win8+Opera では発生しない\r
65          *        -> その際には timeupdate が発行されない、、、 iframe+image+audio で使わないときは破棄する、とか。\r
66          *        -> opera11、10.54 WinXP はまとも、、、 portable が怪しい??\r
67          */\r
68         X_HTMLAudio_need1stTouch        = X_UA[ 'iOS' ] || X_UA[ 'ChromeWV' ] || ( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ),       \r
69         X_HTMLAudio_durationFix     = ( X_UA[ 'Windows' ] && 12 <= X_UA[ 'Opera' ] ) || X_UA[ 'ChromeWV' ] || ( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ),\r
70         \r
71         X_HTMLAudio_shortPlayFix        = X_UA[ 'AOSP' ]; // Android 4.1.1 でも遭遇(ただしm4a, mp3は優秀, oggはシークが乱れる)\r
72         \r
73         \r
74 \r
75 if( X_Audio_constructor ){\r
76         \r
77         X_HTMLAudio = X_AudioBase[ 'inherits' ](\r
78                 'X.HTMLAudio',\r
79                 X_Class.POOL_OBJECT,\r
80                 {\r
81                         _closed               : true,\r
82                         _loaded               : false,\r
83                         _ready            : false,              \r
84                         _src                      : '',\r
85                         \r
86                         _currentFixStart  : 0,\r
87                         _currentFixBegin  : 0,\r
88 \r
89                         _durationFixPhase : X_HTMLAudio_durationFix ? 1 : 0,\r
90                         _durationFixSkip  : X_HTMLAudio_durationFix && !X_HTMLAudio_need1stTouch,                       \r
91                         _lastCurrentTime  : 0,\r
92 \r
93                         _shortPlayFixON   : false,\r
94                         _shortPlayFixTime : 0,\r
95                         \r
96                         _endedFixON               : false,\r
97                         \r
98                         'Constructor' : function( target, source, option ){\r
99                                 var raw;\r
100                                 \r
101                                 this.target  = target || this;\r
102                                 this._closed = false;\r
103                                 this._src       = source;\r
104                                 \r
105                                 if( X_HTMLAudio_shortPlayFix ){\r
106                                         this._shortPlayFixON = X_URL_getEXT( source ) === 'm4a';\r
107                                 };\r
108                                 \r
109                                 this.setState( option );\r
110 \r
111                                 if( option[ 'useVideo' ] ){\r
112                                         raw = document.createElement( 'video' );\r
113                                         raw.preload                   = 'none'; // auto, metadata, none\r
114                                         raw.autoplay              = false, // no-auto\r
115                                         raw.loop                          = false;\r
116                                         raw.muted                         = false;\r
117                                         raw.crossorigin       = option[ 'crossorigin' ] || ''; //crossorigin: "anonymous", X.URL.isSameDomain() で切り替え\r
118                                         raw.style.cssText         = 'position:absolute;bottom:0;left:-50px;width:100px;height:100px;opacity:0;';\r
119                                         raw.controls              = false;\r
120                                         raw.WebKitPlaysInline = true;\r
121                                         raw.src                       = source;\r
122                                         document.body.appendChild( raw );\r
123                                 } else {\r
124                                         raw = X_TEMP.rawAudio || new X_Audio_constructor( source );\r
125                                         // X_Doc_create( 'audio', { src : source } )[ 'appendTo' ]( X.Doc.body );\r
126                                         raw.autobuffer = raw.autoplay = false;\r
127                                 };\r
128                                 \r
129                                 this[ '_rawObject' ] = raw;\r
130                                 \r
131                                 this[ 'listen' ]( [\r
132                                                 X_EVENT_KILL_INSTANCE,\r
133                                                 X_HTMLAudio_playTrigger,\r
134                                                 //'loadstart', 'load',\r
135                                                 'progress', 'error',\r
136                                                 // 'suspend', 'abort', 'emptied', 'stalled',\r
137                                                 // 'play', 'pause', 'seeked', 'ratechange', 'volumechange',\r
138                                                 'loadedmetadata', 'loadeddata', 'canplay', 'canplaythrough',\r
139                                                 'playing', 'waiting', 'seeking',\r
140                                                 'durationchange', 'timeupdate', 'ended' ] );\r
141 \r
142                                 if( X_TEMP.rawAudio ){\r
143                                         raw.src = source;\r
144                                         raw.load(); // AOSP2 で必要\r
145                                         delete X_TEMP.rawAudio;\r
146                                 };\r
147                         },\r
148                         \r
149                         handleEvent : function( e ){\r
150                                 var raw    = this[ '_rawObject' ],\r
151                                         actualEnded = e.type === 'ended',\r
152                                         ended       = actualEnded,\r
153                                         ready       = e.type === X_HTMLAudio_playTrigger,\r
154                                         eventType, duration, end, now;\r
155                                 \r
156                                 // global に公開\r
157                                 //window[ '__rawAudio' ] = this[ '_rawObject' ];\r
158                                 \r
159                                 e.type !== 'timeupdate' && console.log( ' > ' + e.type );\r
160                                         \r
161                                 switch( e.type ){\r
162 \r
163                                         case X_EVENT_KILL_INSTANCE :\r
164                                                 // 【javascript】モバイル向けブラウザでも音を鳴らしたい【WebAudio】\r
165                                                 // http://ingaouhou.com/archives/3633\r
166                                                 // ・使い終わったインスタンスはload()しておくとやや安定\r
167                                                 this.playing && this.actualPause();\r
168                                                 delete this._closed;\r
169                                                 delete this._loaded;\r
170                                                 \r
171                                                 raw.src = '';\r
172                                                 raw.load();\r
173                                                 \r
174                                                 // removeChild for video\r
175                                                 break;\r
176 \r
177                                         //case 'loadstart' :      //    ブラウザがコンテンツの検索を開始した場合に発生\r
178                                                 //break;\r
179                                         case 'progress' :          //   ブラウザがコンテンツの取得を実行した場合に発生\r
180                                                 // console.log( e.loaded + ' ' + e.total * 100 + '%' );\r
181                                                 // iem9 で常に0 raw.networkState;\r
182                                                 // opera Android 12 で buffered.end() へのアクセスはエラー try catch も無効、iem9 は常に end(0) = 0\r
183                                                 //console.log( 'buffered.end ' + raw.buffered && raw.buffered.end(0) ); \r
184                                                 break;\r
185                                         \r
186                                         case 'loadeddata' :      //     コンテンツの表示を現在の再生位置で初めて行えるようになった場合に発生\r
187                                                 if( !this._endedFixON ){\r
188                                                         ready = true;\r
189                                                 };\r
190                                         case 'canplay' :                //      今すぐに再生を再開できるが、バッファリングが不十分でコンテンツを最後まで表示できないと予測している場合に発生\r
191                                                 if( X_HTMLAudio_durationFix && !X_HTMLAudio_need1stTouch && this._durationFixPhase === 1 ){\r
192                                                         console.log( '▲ DurationFix の開始 @' + e.type );\r
193                                                         this._durationFixPhase = 2;\r
194                                                         raw.play();\r
195                                                         raw.currentTime = 0; // 必要!\r
196                                                 };\r
197                                         case 'canplaythrough' : //      今すぐに再生を開始してもバッファリングで停止することなく最後まで表示できると予測している場合に発生\r
198                                                 if( this._endedFixON ){\r
199                                                         console.log( '▽ onEndedFix の終了 @' + e.type  );\r
200                                                         this._endedFixON = false;\r
201                                                         this.actualPlay();\r
202                                                 };\r
203                                         case 'loadedmetadata' : //      ブラウザがメディアリソースの長さと寸法を判定した場合に発生\r
204                                         case 'durationchange' : //  duration属性が更新された場合に発生\r
205                                                 if( !this.duration ){\r
206                                                         duration = raw.duration;\r
207                                                 };\r
208                                                 break;\r
209         \r
210                                         // TODO firefox で 短い音声でtimeupdate, ended が発火しない <- 最後の音に無音部分を追加する\r
211                                         case 'timeupdate' :      //     通常の再生が行われ現在の再生位置の変化が起こった場合に発生\r
212                                                 if( this._durationFixPhase & 3 ){ // 1 or 2\r
213                                                         duration = raw.duration;\r
214                                                 } else\r
215                                                 if( raw.currentTime === this._lastCurrentTime ){\r
216                                                         eventType = X_EVENT_MEDIA_WAITING;\r
217                                                 } else {\r
218                                                         this._lastCurrentTime = raw.currentTime;\r
219 \r
220                                                         if( this.playing ){\r
221                                                                 end = X_Audio_getEndTime( this ) + this._shortPlayFixTime;\r
222                                                                 now = this.getActualCurrentTime();\r
223                                                                 //console.log( now + ' / ' + end );\r
224                                                                 if( 0 + end <= 0 + now ){ // 0+ なぜか iem9 で必要,,,\r
225                                                                         if( this.autoLoop ){\r
226                                                                                 console.log( '☆★☆ 曲の最後に到達 @timeupdate now-end:' + ( now - end ) );\r
227                                                                                 ended = true;\r
228                                                                                 if( X_HTMLAudio_endedFixIOS ) actualEnded = true;\r
229                                                                         } else {\r
230                                                                                 this.actualPause();\r
231                                                                                 eventType = X_EVENT_MEDIA_ENDED;\r
232                                                                         };\r
233                                                                 } else {\r
234                                                                         eventType = X_EVENT_MEDIA_PLAYING;\r
235                                                                 };\r
236                                                         };\r
237                                                 };\r
238                                                 break;\r
239         \r
240                                         //case 'stalled' :              //      ブラウザがコンテンツの取得を試みたが、データがまだ用意されていない場合に発生\r
241                                                 // Android2 で ready 扱い?\r
242                                         //case 'suspend' :              //      ブラウザが意図的にコンテンツの取得を現在行っていない場合に発生(ダウンロードは未完了)\r
243                                                 // iOS で ready 扱い\r
244                                         //case 'emptied' :              //      読み込み中に致命的なエラーが発生したか、実行状態ででload()メソッドが実行された場合に発生\r
245                                         //case 'abort' :                  //    ダウンロードの完了前にコンテンツの取得を停止した場合に発生(この停止はエラーによるものではない)\r
246                                         //      break;\r
247                                                 \r
248                                         case 'error' :            //    コンテンツの取得実行中にエラーが発生した場合に発生\r
249                                                 // Opera12 src = '' で error が発生、無視する\r
250                                                 // eventType = X_EVENT_ERROR;\r
251                                                 break;\r
252                                                 \r
253                                         case 'playing' :                //      再生が開始された場合に発生\r
254                                                 if( X_HTMLAudio_volumeFix ){\r
255                                                         raw.volume = this.gain;\r
256                                                 };\r
257                                                 if( X_HTMLAudio_currentTimeFix ){\r
258                                                         this._currentFixStart = X_Timer_now(); // 正確な再生開始時間に補正\r
259                                                 };\r
260                                                 eventType = !this._durationFixSkip && !this._endedFixON ? X_EVENT_MEDIA_PLAYING : X_EVENT_MEDIA_WAITING;\r
261                                         //case 'play' :            //   再生が開始された。play()メソッドからの復帰後に発生する場合に発生\r
262                                         //case 'pause' :                  //    再生が一時停止された。pauseメソッドからの復帰後に発生する場合に発生\r
263                                         //case 'seeked' : \r
264                                         //case 'ratechange' :    // defaultPlaybackRate属性とplaybackRate属性のどちらかが更新された場合に発生\r
265                                         //case 'volumechange' :   // volume属性とmuted属性のどちらかが変化した場合に発生\r
266                                                 break;\r
267                                         \r
268                                         case 'waiting' :                //      次のフレームが利用不可のため再生を停止したが、そのフレームがやがて利用可能になると想定している場合に発生\r
269                                                 eventType = X_EVENT_MEDIA_WAITING;\r
270                                                 break;\r
271                                         case 'seeking' :                //      シークがtrueに変化し、イベントを発生させるのに十分な時間がシーク操作にかかっている場合に発生\r
272                                                 eventType = X_EVENT_MEDIA_SEEKING;\r
273                                                 break;\r
274                                 };\r
275                                 \r
276                                 // duration は Infinity, NaN, 0 の場合があるため、これを除外する\r
277                                 if( 0 < duration && X_Type_isFinite( duration ) ){\r
278                                         this.duration = duration * 1000;\r
279 \r
280                                         if( this._durationFixPhase === 2 ){\r
281                                                 console.log( '▼ DurationFix の終了 @' + e.type );\r
282                                                 this._durationFixPhase = 4;\r
283                                                 \r
284                                                 ready = true;\r
285                                                 \r
286                                                 if( this.autoplay || this._loaded ){\r
287                                                         console.log( '☆ 再生 <- DurationFix の終了' );\r
288                                                         this._durationFixSkip = false;\r
289                                                         this.actualPlay();\r
290                                                 } else\r
291                                                 if( X_HTMLAudio_pauseFix ){\r
292                                                         console.log( '☆ PAUSE <- DurationFix の終了' );\r
293                                                         //raw.src = '';\r
294                                                         //raw.load();\r
295                                                         this.actualPause();                             \r
296                                                 };\r
297                                         } else\r
298                                         if( this._durationFixPhase ){\r
299                                                 this._durationFixPhase = 4;\r
300                                         };                                      \r
301                                 };\r
302 \r
303                                 this._loaded  = this._loaded || ready;\r
304 \r
305                                 // \r
306                                 if( ended ){\r
307                                         if( !this._closed && this.autoLoop ){\r
308                                                 if( !( this.target[ 'dispatch' ]( X_EVENT_MEDIA_BEFORE_LOOP ) & X_CALLBACK_PREVENT_DEFAULT ) ){\r
309                                                         this.looped = true;\r
310                                                         this.target[ 'dispatch' ]( X_EVENT_MEDIA_LOOPED );\r
311                                                         ( X_HTMLAudio_endedFixAOSP3 || X_HTMLAudio_endedFixAOSP4 || X_HTMLAudio_endedFixIOS ) && actualEnded && console.log( '☆★☆ 音声の継続用の play() @ended' );\r
312                                                         this.actualPlay(\r
313                                                                 ( X_HTMLAudio_endedFixAOSP4 || X_HTMLAudio_endedFixIOS ) && actualEnded,\r
314                                                                 ( X_HTMLAudio_endedFixAOSP3 || X_HTMLAudio_endedFixAOSP2 ) && actualEnded );\r
315                                                 };\r
316                                         } else {\r
317                                                 this.seekTime = 0;\r
318                                                 delete this.playing;\r
319                                                 this.target[ 'dispatch' ]( X_EVENT_MEDIA_ENDED );\r
320                                         };\r
321                                 } else\r
322                                 if( this._loaded && this.duration && !this._ready ){\r
323                                         this._ready = true;\r
324                                         this.autoplay && X_Timer_once( 16, this, this.play );\r
325                                         this.target[ 'asyncDispatch' ]( X_EVENT_READY );\r
326                                         console.log( '> Audio Loaded!! ' + e.type + ' d:' + ( this.duration | 0 ) );\r
327                                 } else\r
328                                 if( eventType ){\r
329                                         this.target[ 'dispatch' ]( eventType );\r
330                                         eventType === X_EVENT_ERROR && this[ 'kill' ]();\r
331                                 };\r
332                         },\r
333 \r
334                         actualPlay : function( forcePlay, forceReload ){\r
335                                 var raw = this[ '_rawObject' ],\r
336                                         begin, end;\r
337                                 \r
338                                 // もし kill 後に autoplayTimer で呼ばれても、_closed==true なので平気\r
339                                 if( this._closed ) return;\r
340                                 \r
341                                 \r
342                                 if( !raw.src ){ // X_HTMLAudio_pauseFix によって src が空になっている\r
343                                         console.log( '○ 削除された audio.src の復帰' );\r
344                                         raw.src = this._src;\r
345                                         //return;\r
346                                 };                              \r
347                                 \r
348                                 if( !this._ready && ( !X_HTMLAudio_durationFix || !X_HTMLAudio_need1stTouch ) ){\r
349                                         this.autoplay = true;\r
350                                         return;\r
351                                 };\r
352 \r
353                                 if( X_HTMLAudio_durationFix && X_HTMLAudio_need1stTouch && this._durationFixPhase === 1 ){\r
354                                         console.log( '▲ DurationFix の開始(タッチ用)' );\r
355                                         this._durationFixPhase = 2;\r
356                                 };\r
357 \r
358                                 end   = X_Audio_getEndTime( this );\r
359                                 begin = X_Audio_getStartTime( this, end, true );\r
360 \r
361                                 this._lastCurrentTime = begin / 1000;\r
362 \r
363                                 if( this._shortPlayFixON ){\r
364                                         this._shortPlayFixTime = ( 1000 < end - begin ) ? 200 : 400;\r
365                                         if( this.duration < end + this._shortPlayFixTime ){\r
366                                                 this._shortPlayFixTime = this.duration - end;\r
367                                         };\r
368                                 };\r
369 \r
370                                 if( this._durationFixSkip || this._endedFixON ){\r
371                                         console.log( '☆ audio.play をスキップ ' + begin + ' -> ' + end + ' crt:' + ( raw.currentTime | 0 ) );\r
372                                 } else {\r
373                                         if( !this.playing ){\r
374                                                 if( X_HTMLAudio_volumeFix ){\r
375                                                         raw.volume = 0;\r
376                                                 } else {\r
377                                                         raw.volume = X_HTMLAudio_volumeEnabled ? this.gain : 1;\r
378                                                 };\r
379                                                 raw.play();\r
380                                                 this.playing = true;\r
381                                         } else\r
382                                         if( X_HTMLAudio_needPlayForSeek || forcePlay ){\r
383                                                 raw.play();\r
384                                                 console.log( '[HTMLAudio] currentTime より先.' );\r
385                                         };\r
386                                         \r
387                                         //http://himaxoff.blog111.fc2.com/blog-entry-97.html\r
388                                         //Firefox3.6では一度も play() していない状態で currentTime = 0 を実行するとエラーになる。\r
389                                         //また、GoogleChrome7 では currentTime = 0 直後に play() すると、pause()した位置前後の音が混ざることがある。(少なくとも自分の環境では)                                                                        \r
390                                         raw.currentTime = this._lastCurrentTime;\r
391                                         console.log( '[HTMLAudio] play ' + begin + ' -> ' + end + ' crt:' + ( raw.currentTime | 0 ) + ' last:' + this._lastCurrentTime );\r
392                                         \r
393                                         // Android4.0.5 で ended イベント時に currentTime が duration に張り付いたまま変更できない\r
394                                         if( forceReload || ( raw.duration && raw.currentTime === raw.duration ) ){\r
395                                                 raw.src          = '';\r
396                                                 raw.src          = this._src;\r
397                                                 this.playing     = false;\r
398                                                 this._endedFixON = true;\r
399                                                 console.log( '△ onEndedFix の開始' );\r
400                                                 raw.currentTime  = this._lastCurrentTime;\r
401                                                 this.target[ 'dispatch' ]( X_EVENT_MEDIA_WAITING );                                                                                             \r
402                                                 X_HTMLAudio_endedFixAOSP2 && raw.load();\r
403                                         };                                                      \r
404                                 };\r
405 \r
406                                 if( X_HTMLAudio_currentTimeFix ){\r
407                                         this._currentFixBegin = begin;\r
408                                         this._currentFixStart = X_Timer_now();\r
409                                 };\r
410                         },\r
411                         \r
412                         actualPause : function(){\r
413                                 console.log( '[HTMLAudio] pause' );\r
414                                 \r
415                                 this.seekTime = this.getActualCurrentTime();\r
416 \r
417                                 delete this._currentFixStart;\r
418 \r
419                                 !this[ '_rawObject' ].error && this[ '_rawObject' ].pause();\r
420                                 \r
421                                 if( X_HTMLAudio_pauseFix ){\r
422                                         this[ '_rawObject' ].src = '';\r
423                                         if( X_HTMLAudio_durationFix ){\r
424                                                 delete this._durationFixPhase;\r
425                                                 delete this._durationFixSkip;\r
426                                         };\r
427                                 };\r
428                                 delete this.playing;\r
429                         },\r
430                         \r
431                         getActualCurrentTime : function(){\r
432                                 return ( X_HTMLAudio_currentTimeFix ?\r
433                                                         X_Timer_now() - this._currentFixStart + this._currentFixBegin :\r
434                                                         this[ '_rawObject' ].currentTime * 1000 | 0 );\r
435                         },\r
436                 /*\r
437                 http://www.w3schools.com/tags/av_prop_error.asp\r
438                 1 = MEDIA_ERR_ABORTED - fetching process aborted by user\r
439                 2 = MEDIA_ERR_NETWORK - error occurred when downloading\r
440                 3 = MEDIA_ERR_DECODE - error occurred when decoding\r
441                 4 = MEDIA_ERR_SRC_NOT_SUPPORTED - audio/video not supported\r
442                 */                      \r
443                         getActualError : function(){\r
444                                 return this[ '_rawObject' ].error || 0;\r
445                         },\r
446                         \r
447                         afterUpdateState : function( result ){\r
448                                 if( result & 3 ){ // seek\r
449                                         this.actualPlay();\r
450                                 } else\r
451                                 if( ( result & 4 ) && X_HTMLAudio_volumeEnabled ){\r
452                                    this[ '_rawObject' ].volume = this.gain;\r
453                                 };                              \r
454                         }\r
455         \r
456                 }\r
457         );\r
458         \r
459         X_HTMLAudio && X_Audio_BACKENDS.push(\r
460                 {\r
461                         backendID   : 2,\r
462                         \r
463                         backendName : 'HTMLAudio',\r
464                         \r
465                         canPlay : X_Audio_codecs,\r
466                 /*\r
467                  * HTML5 の audio 要素と video 要素でサポートされているメディアフォーマット\r
468                  * https://developer.mozilla.org/ja/docs/Web/HTML/Supported_media_formats\r
469                  * \r
470                  * 主要ブラウザのHTML5 audioタグで使えるファイル形式の再生対応状況を調べてみた\r
471                  * http://sothis.blog.so-net.ne.jp/2010-10-27\r
472                  * ダメ元で仕様に含まれていない SHOUTcast もテストしてみました。\r
473                  * \r
474                  * IE9 の HTML5 Audio について\r
475                  * http://kentablog.cluscore.com/2011/05/ie9-html5-audio.html\r
476                  * 1.Audioオブジェクトを作ることができないので、Audioタグを使う\r
477                  * 2.クロスドメインアクセスには、「clientaccesspolicy.xml」か「crossdomain.xml」が必要\r
478                  * 3.wav が不可\r
479                  * \r
480                  * IE9でHTML5 autio タグが無効になる\r
481                  * http://bbs.wankuma.com/index.cgi?mode=al2&namber=64886&KLOG=109\r
482                  *  IEのバージョン9.0.8112.16421では、Audioオブジェクトのnewも対応してました。\r
483                  *  createElement等で動的生成すると、よろしくない\r
484                  * \r
485                  * media-can-play-wav-audio.html\r
486                  * https://github.com/adobe/webkit/blob/master/LayoutTests/media/media-can-play-wav-audio.html\r
487                  * testExpected("audio.canPlayType('audio/wav; codecs=1')", "probably");\r
488                  * \r
489                  * HTML5 audioタグ ブラウザ間の違い\r
490                  * http://wiki.bit-hive.com/tomizoo/pg/HTML5%20audio%A5%BF%A5%B0%20%A5%D6%A5%E9%A5%A6%A5%B6%B4%D6%A4%CE%B0%E3%A4%A4\r
491                  *  - volume, muted iPhone(iOS4-6)、Android(2.3.6)では動作せず。\r
492                  *  - FireFox3.6, Android 2.3.6については、src変更後、load()を呼び出さないと切り替わらなかった。iPhoneはload()が不要。\r
493                  */     \r
494                         detect : function( proxy, source, ext ){\r
495                                 proxy[ 'asyncDispatch' ]( { type : X_EVENT_COMPLETE, canPlay : X_Audio_codecs[ ext ] } );\r
496                         },\r
497                         \r
498                         klass : X_HTMLAudio\r
499                         \r
500                 } );\r
501 \r
502 /*\r
503  * \r
504  * howler.js\r
505  *       codecs = {\r
506           mp3: !!audioTest.canPlayType('audio/mpeg;').replace(/^no$/, ''),\r
507           opus: !!audioTest.canPlayType('audio/ogg; codecs="opus"').replace(/^no$/, ''),\r
508           ogg: !!audioTest.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/, ''),\r
509           wav: !!audioTest.canPlayType('audio/wav; codecs="1"').replace(/^no$/, ''),\r
510           aac: !!audioTest.canPlayType('audio/aac;').replace(/^no$/, ''),\r
511           m4a: !!(audioTest.canPlayType('audio/x-m4a;') || audioTest.canPlayType('audio/m4a;') || audioTest.canPlayType('audio/aac;')).replace(/^no$/, ''),\r
512           mp4: !!(audioTest.canPlayType('audio/x-mp4;') || audioTest.canPlayType('audio/mp4;') || audioTest.canPlayType('audio/aac;')).replace(/^no$/, ''),\r
513           weba: !!audioTest.canPlayType('audio/webm; codecs="vorbis"').replace(/^no$/, '')\r
514         };\r
515  */\r
516         \r
517 };\r
518 \r
519 \r
520 \r
521 \r
522 \r