OSDN Git Service

fcf91f402d8f8200105501f156af0bfd04f39de7
[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 \r
7 var X_Audio_HTMLAudio_playTrigger =\r
8                 6 <= X_UA[ 'iOS' ] ? 'loadeddata' :\r
9                 X_UA[ 'iOS' ] < 5  ? 'stalled' :\r
10                 X_UA[ 'iOS' ]      ? 'suspend' :\r
11                 X_UA[ 'AndroidBrowser2' ] ? 'stalled' : // Android 2.3.5(SBM101SH) では stalled は発生しない,,,\r
12                 X_UA[ 'AndroidBrowser4' ] ? 'loadeddata' : \r
13                 X_UA[ 'OperaMobile' ] || X_UA[ 'OperaTablet' ] ? 'loadeddata' : 'loadeddata', //'canplay',\r
14         X_Audio_HTMLAudioWrapper,\r
15         X_Audio_constructor = window[ 'Audio' ] || window.HTMLAudioElement,\r
16         X_Audio_rawAudio,\r
17         // Opera Mobile 12 android4.4.4 & 2.3.5 は 2回目以降の currentTime へのセットで currentTime が更新されなくなるため、タイマーを使用する\r
18         X_Audio_HTMLAudioWrapper_currentTimeFix  = !!X_UA[ 'OperaMobile' ] || !!X_UA[ 'OperaTablet' ], // || ( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ),\r
19         // Android1.6+MobileOpera12では無理っぽい、、、\r
20         X_Audio_HTMLAudioWrapper_badOperaAndroid = X_Audio_HTMLAudioWrapper_currentTimeFix && X_UA[ 'Android' ] < 2,\r
21 \r
22         // 一方 Desktop の Opera12 は、loadeddata 等では duration が infinity で、再生後の durationchange 時に duration が判明する。\r
23         // opera12 volume, mute の変更が2度目以降できない\r
24         // duration 判明後には currentTime によるシークと、現在時間の取得が可能になる。\r
25         // canplay で play() durationchange で duration が取れたら loadedmetadata->loadeddata -> canplay する\r
26         // boombox.js に書いてあった currentTime の効かないブラウザってこいつのことみたい、、、\r
27         // Opera12.17 Win32(XP) portable apps は勝手に再生が始まる、、、その際には timeupdate が発行されない、、、 iframe+image+audio で使わないときは破棄する、とか。\r
28         // opera11、10.54 WinXP はまとも、、、\r
29         // X_Audio_Sprite_handleEvent でも使用\r
30         X_Audio_HTMLAudioWrapper_ieMobile9Fix    = ( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ),\r
31         X_Audio_HTMLAudioWrapper_durationFix     = ( !X_Audio_HTMLAudioWrapper_currentTimeFix && 12 <= X_UA[ 'Opera' ] ),\r
32         \r
33         X_Audio_HTMLAudioWrapper_shortPlayFix    = //X_UA[ 'AndroidBrowser2' ],\r
34                                                                                                 X_UA[ 'AndroidBrowser' ] && X_UA[ 'AndroidBrowserWebkit' ] < 534.3, // Android 4.1.1 でも遭遇\r
35         \r
36         X_Audio_codecs;\r
37 \r
38 if( X_Audio_constructor && !X_Audio_HTMLAudioWrapper_badOperaAndroid ){\r
39         //http://himaxoff.blog111.fc2.com/blog-entry-97.html\r
40         //引数なしで new Audio() とすると、Operaでエラーになるそうなので注意。\r
41         X_Audio_rawAudio = new X_Audio_constructor( '' );\r
42 \r
43         if( X_Audio_rawAudio.canPlayType ){\r
44                 X_Audio_codecs = {\r
45               'mp3'  : X_Audio_rawAudio.canPlayType('audio/mpeg'),\r
46               'opus' : X_Audio_rawAudio.canPlayType('audio/ogg; codecs="opus"'),\r
47               'ogg'  : X_Audio_rawAudio.canPlayType('audio/ogg; codecs="vorbis"'),\r
48               'wav'  : X_Audio_rawAudio.canPlayType('audio/wav; codecs="1"'),\r
49               'aac'  : X_Audio_rawAudio.canPlayType('audio/aac'),\r
50               'm4a'  : X_Audio_rawAudio.canPlayType('audio/x-m4a') + X_Audio_rawAudio.canPlayType('audio/m4a') + X_Audio_rawAudio.canPlayType('audio/aac'),\r
51               'mp4'  : X_Audio_rawAudio.canPlayType('audio/x-mp4') + X_Audio_rawAudio.canPlayType('audio/mp4') + X_Audio_rawAudio.canPlayType('audio/aac'),\r
52               'weba' : X_Audio_rawAudio.canPlayType('audio/webm; codecs="vorbis"')\r
53                 };\r
54                 (function( k, v ){\r
55                         for( k in X_Audio_codecs ){\r
56                                 if( X_EMPTY_OBJECT[ k ] ) continue;\r
57                                 v = X_Audio_codecs[ k ];\r
58                                 X_Audio_codecs[ k ] = v && v.split( 'no' ).join( '' );\r
59                                 console.log( k + ' ' + X_Audio_codecs[ k ] );\r
60                         };\r
61                 })();\r
62         } else {\r
63                 // iOS3.2.3\r
64                 X_Audio_codecs = {\r
65               'mp3'  : X_UA[ 'IE' ] || X_UA[ 'Chrome' ] || ( X_UA[ 'Windows' ]  && X_UA[ 'Safari' ]  ),\r
66               'ogg'  : 5 <= X_UA[ 'Gecko' ] || X_UA[ 'Chrome' ] || X_UA[ 'Opera' ] ,\r
67               'wav'  : X_UA[ 'Gecko' ] || X_UA[ 'Opera' ] || ( X_UA[ 'Windows' ]  && X_UA[ 'Safari' ]  ),\r
68               'aac'  : X_UA[ 'IE' ] || X_UA[ 'WebKit' ],\r
69               'm4a'  : X_UA[ 'IE' ] || X_UA[ 'WebKit' ],\r
70               'mp4'  : X_UA[ 'IE' ] || X_UA[ 'WebKit' ],\r
71               'weba' : 2 <= X_UA[ 'Gecko' ] || 10.6 <= X_UA[ 'Opera' ] // firefox4+(Gecko2+)\r
72                 };\r
73         };\r
74         \r
75         X_Audio_HTMLAudioWrapper = X_Audio_AbstractAudioBackend[ 'inherits' ](\r
76                 'X.AV.HTML5AudioWrapper',\r
77                 X_Class.POOL_OBJECT,\r
78                 {\r
79                         _playTime        : 0,\r
80                         _closed          : true,\r
81                         _loaded          : false,\r
82                         _beginTime       : 0,\r
83                         _playForDuration : 0,\r
84                         _lastCurrentTime : 0,\r
85                         _src             : '',\r
86                         \r
87                         Constructor : function( target, source, option ){\r
88                                 var raw;\r
89                                 \r
90                                 this.target  = target || this;\r
91                                 this._closed = false;\r
92                                 \r
93                                 this.setState( option );\r
94 \r
95                                 if( option[ 'useVideo' ] ){\r
96                                         this[ '_rawObject' ]  = raw = document.createElement( 'video' );\r
97                         raw.preload           = 'none'; // auto, metadata, none\r
98                         //raw.autoplay = false, // no-auto\r
99                         raw.loop              = false;\r
100                         raw.muted             = false;\r
101                         raw.crossorigin       = option[ 'crossorigin' ] || ''; //crossorigin: "anonymous", X.URL.isSameDomain() で切り替え\r
102                         raw.style.cssText     = 'position:absolute;bottom:0;left:-50px;width:100px;height:100px;opacity:0;';\r
103                                         raw.controls          = false;\r
104                                         raw.WebKitPlaysInline = true;\r
105                                         raw.src               = source;\r
106                                         //raw.onclick  = "alert('play');this.actualPlay();";\r
107                                         document.body.appendChild( raw );\r
108                                         //raw.load();\r
109                                 } else {\r
110                                         this[ '_rawObject' ] = X_Audio_rawAudio || new X_Audio_constructor( source );\r
111                                         // X_Doc_create( 'audio', { src : source } )[ 'appendTo' ]( X.Doc.body );\r
112                                         this[ '_rawObject' ].autobuffer = false;\r
113                                         this._src = source;\r
114                                 };\r
115                                 \r
116                                 this[ 'listen' ]( [\r
117                                                 'loadstart', 'load', 'progress', 'suspend', 'abort', 'error', 'emptied', 'stalled', 'play', 'pause', 'loadedmetadata',\r
118                                                 'loadeddata', 'waiting', 'playing', 'canplay', 'canplaythrough', 'seeking', 'seeked', 'timeupdate', 'ended',\r
119                                                 'ratechange', 'durationchange', 'volumechange' ], this.handleEventProxy );                              \r
120 \r
121                                 //document.body.appendChild( this[ '_rawObject' ] );\r
122                                 this[ '_rawObject' ].autoplay = false;\r
123 \r
124                                 if( X_Audio_rawAudio === this[ '_rawObject' ] ){\r
125                                         if( X_Audio_HTMLAudioWrapper_badOperaAndroid ){\r
126                                                 X_Audio_HTMLAudioWrapper_badOperaAndroid && alert( 12 );\r
127                                                 X_EventDispatcher_toggleAllEvents( this, false );\r
128                                                 this[ '_rawObject' ] = new X_Audio_constructor( X_URL_toAbsolutePath( source ) );\r
129                                                 //X_EventDispatcher_toggleAllEvents( this, true );\r
130                                         } else {\r
131                                                 X_Audio_rawAudio.src = source;\r
132                                         };\r
133 \r
134                                         //this[ '_rawObject' ] = new X_Audio_constructor( X_URL_toAbsolutePath( source ) );\r
135                                         /*!X_Audio_Sprite_needTouchFirst && */ X_Audio_rawAudio.load(); // 要る?\r
136                                         X_Audio_rawAudio = null;\r
137                                 };\r
138 \r
139                                 this[ 'listenOnce' ]( X_EVENT_KILL_INSTANCE );\r
140                         },\r
141                         \r
142                         handleEvent : function( e ){\r
143                                 switch( e.type ){\r
144 \r
145                                         case X_EVENT_KILL_INSTANCE :\r
146                                                 // 【javascript】モバイル向けブラウザでも音を鳴らしたい【WebAudio】\r
147                                                 // http://ingaouhou.com/archives/3633\r
148                                                 // ・使い終わったインスタンスはload()しておくとやや安定\r
149                                                 this.playing && this.actualPause();\r
150                                                 delete this._closed;\r
151                                                 delete this._loaded;\r
152                                                 \r
153                                                 this[ '_rawObject' ].src = '';\r
154                                                 this[ '_rawObject' ].load();\r
155                                                 \r
156                                                 // removeChild for video\r
157                                                 break;\r
158                                 };\r
159                         },\r
160                         /*\r
161                          * http://uguisu.skr.jp/html/table3.html\r
162                          */\r
163                         handleEventProxy : function( e ){\r
164                                 var type, loaded, end, now;\r
165                                 \r
166                                 X_Audio_HTMLAudioWrapper_badOperaAndroid && alert( e.type );\r
167                                 \r
168                                 //console.log( e.type );\r
169                                 \r
170                                 switch( e.type ){\r
171                                         case 'loadstart' :      //      ブラウザがコンテンツの検索を開始した場合に発生\r
172                                                 break;\r
173                                         case 'progress' :       //      ブラウザがコンテンツの取得を実行した場合に発生\r
174                                                 console.log( e.loaded + ' ' + e.total * 100 + '%' );\r
175                                                 // iem9 で常に0 this[ '_rawObject' ].networkState;\r
176                                                 // opera Android 12 で buffered.end() へのアクセスはエラー try catch も無効、iem9 は常に end(0) = 0\r
177                                                 //console.log( 'buffered.end ' + this[ '_rawObject' ].buffered && this[ '_rawObject' ].buffered.end(0) ); \r
178                                                 break;\r
179                                         \r
180                                         case 'canplay' :        //      今すぐに再生を再開できるが、バッファリングが不十分でコンテンツを最後まで表示できないと予測している場合に発生\r
181                                                 if( X_Audio_HTMLAudioWrapper_durationFix && this._playForDuration === 0 ){\r
182                                                         //console.log( 'DurationFix開始 - ' + this[ '_rawObject' ].duration );\r
183                                                         this._playForDuration = 1;\r
184                                                         this[ '_rawObject' ].play();\r
185                                                         this[ '_rawObject' ].currentTime = this._beginTime / 1000; // 必要!\r
186                                                         return;\r
187                                                 };\r
188                                         case 'loadedmetadata' : //      ブラウザがメディアリソースの長さと寸法を判定した場合に発生\r
189                                         case 'loadeddata' :     //      コンテンツの表示を現在の再生位置で初めて行えるようになった場合に発生\r
190                                         case 'canplaythrough' : //      今すぐに再生を開始してもバッファリングで停止することなく最後まで表示できると予測している場合に発生\r
191                                                 if( X_Audio_HTMLAudioWrapper_durationFix && this._playForDuration !== 2 ) return;\r
192                                                 this.duration = this.duration || this[ '_rawObject' ].duration * 1000;\r
193                                                 break;\r
194         \r
195                                         case 'stalled' :        //      ブラウザがコンテンツの取得を試みたが、データがまだ用意されていない場合に発生\r
196                                                 // Android2 で ready 扱い?\r
197                                         case 'suspend' :        //      ブラウザが意図的にコンテンツの取得を現在行っていない場合に発生(ダウンロードは未完了)\r
198                                                 // iOS で ready 扱い\r
199                                         case 'emptied' :        //      読み込み中に致命的なエラーが発生したか、実行状態ででload()メソッドが実行された場合に発生\r
200                                         case 'abort' :          //      ダウンロードの完了前にコンテンツの取得を停止した場合に発生(この停止はエラーによるものではない)\r
201                                                 break;\r
202                                                 \r
203                                         case 'error' :          //      コンテンツの取得実行中にエラーが発生した場合に発生\r
204                                                 type = X_EVENT_ERROR;\r
205                                                 break;\r
206                                         \r
207                                         case 'playing' :        //      再生が開始された場合に発生\r
208                                                 if( X_Audio_HTMLAudioWrapper_currentTimeFix ){\r
209                                                         this._playTime  = X_Timer_now();\r
210                                                 };\r
211                                                 type = X_EVENT_MEDIA_PLAYING;\r
212                                         case 'play' :           //      再生が開始された。play()メソッドからの復帰後に発生する場合に発生\r
213                                         case 'pause' :          //      再生が一時停止された。pauseメソッドからの復帰後に発生する場合に発生\r
214                                         case 'seeked' :         //      シークがfalseに変化した場合に発生\r
215                                         case 'ratechange' :     // defaultPlaybackRate属性とplaybackRate属性のどちらかが更新された場合に発生\r
216                                         case 'volumechange' :   // volume属性とmuted属性のどちらかが変化した場合に発生\r
217                                                 if( this._playForDuration === 1 ) return;\r
218                                                 break;\r
219                                                 \r
220                                         case 'waiting' :        //      次のフレームが利用不可のため再生を停止したが、そのフレームがやがて利用可能になると想定している場合に発生\r
221                                                 type = X_EVENT_MEDIA_WAITING;\r
222                                         case 'seeking' :        //      シークがtrueに変化し、イベントを発生させるのに十分な時間がシーク操作にかかっている場合に発生\r
223                                                 type = type || X_EVENT_MEDIA_SEEKING;\r
224                                                 if( this._playForDuration === 1 ) return;\r
225                                                 break;\r
226                                                 \r
227                                         case 'ended' :\r
228                                                 if( !this._closed && this.autoLoop ){\r
229                                                         if( !( this.target[ 'dispatch' ]( X_EVENT_MEDIA_BEFORE_LOOP ) & X_Callback_PREVENT_DEFAULT ) ){\r
230                                                                 this.looped = true;\r
231                                                                 this.target[ 'dispatch' ]( X_EVENT_MEDIA_LOOPED );\r
232                                                                 this.actualPlay();\r
233                                                         };\r
234                                                         return;\r
235                                                 };\r
236                                                 type = X_EVENT_MEDIA_ENDED;\r
237                                                 this.seekTime = 0;\r
238                                                 delete this.playing;\r
239                                                 break;\r
240         \r
241                                         case 'timeupdate' :     //      通常の再生が行われ現在の再生位置の変化が起こった場合に発生\r
242                                                 if( X_Audio_HTMLAudioWrapper_ieMobile9Fix ){\r
243                                                         if( this._playForDuration === 1 ){\r
244                                                                 console.log( 'tu ' + this[ '_rawObject' ].duration );\r
245                                                                 if( !this.duration && X_Type_isFinite( this[ '_rawObject' ].duration ) ){\r
246                                                                         this.duration = this.duration || this[ '_rawObject' ].duration * 1000;\r
247                                                                         this._playForDuration = 2;\r
248                                                         loaded = true;\r
249                                                         //console.log( 'durationFix が完了' + this.duration );\r
250                                                         break;\r
251                                                                 } else {\r
252                                                                         this[ '_rawObject' ].currentTime = this._beginTime / 1000; // 必要!\r
253                                                                         return;\r
254                                                                 };\r
255                                                         } else\r
256                                                         if( this[ '_rawObject' ].currentTime === this._lastCurrentTime ){\r
257                                                                 //this.target[ 'dispatch' ]( 'seeking' );\r
258                                                                 this.target[ 'dispatch' ]( X_EVENT_MEDIA_WAITING );\r
259                                                                 return;\r
260                                                         };\r
261                                                         this._lastCurrentTime = this[ '_rawObject' ].currentTime;\r
262                                                 };\r
263                                                 this.duration = this.duration || this[ '_rawObject' ].duration * 1000;\r
264 \r
265                                     if( this.playing ){\r
266                                         end = X_AudioWrapper_getEndTime( this );\r
267                                         now = this.getActualCurrentTime();\r
268                                         //console.log( end + ' / ' + now );\r
269                                         if( 0 + end <= 0 + now ){ // なぜか iem9 で必要,,,\r
270                                                 if( this.autoLoop ){\r
271                                                         if( !( this.target[ 'dispatch' ]( X_EVENT_MEDIA_BEFORE_LOOP ) & X_Callback_PREVENT_DEFAULT ) ){\r
272                                                                 this.looped = true;\r
273                                                                 this.target[ 'dispatch' ]( X_EVENT_MEDIA_LOOPED );\r
274                                                                 this.actualPlay();\r
275                                                         };\r
276                                                 } else {\r
277                                                         this.actualPause();\r
278                                                         this.target[ 'dispatch' ]( X_EVENT_MEDIA_ENDED );\r
279                                                 };\r
280                                                 return;\r
281                                         };\r
282                                     } else {\r
283                                         return;\r
284                                     };\r
285                                     type = X_EVENT_MEDIA_PLAYING;\r
286                                                 break;\r
287                                                 \r
288                                         case 'durationchange' : // duration属性が更新された場合に発生\r
289                                                 \r
290                                                 if( !X_Audio_HTMLAudioWrapper_durationFix ){\r
291                                                         this.duration = this[ '_rawObject' ].duration * 1000;\r
292                                                 } else\r
293                                                 // Desktop Opera では Infinity, IEM9 では NaN\r
294                                                 if( !this.duration && X_Type_isFinite( this[ '_rawObject' ].duration ) ){\r
295                                                         \r
296                                                         //console.log( this[ '_rawObject' ].duration );\r
297                                                         \r
298                                                         this.duration = this[ '_rawObject' ].duration * 1000;\r
299                                                         \r
300                                                         if( this._playForDuration === 0 ) this._playForDuration = 2;\r
301                                                         \r
302                                                         if( this._playForDuration === 1 ){\r
303                                                                 this._playForDuration = 2;\r
304                                                                 \r
305                                                                 console.log( 'Loaded ' + this._loaded );\r
306                                                                 \r
307                                                                 if( this._loaded ){\r
308                                                                         this[ '_rawObject' ].currentTime = this._beginTime / 1000;\r
309                                                                         console.log( '設定 ' + this._beginTime );\r
310                                                                         return;\r
311                                                                 };\r
312 \r
313                                                 loaded = true;\r
314                                                 console.log( 'durationFix が完了' + this.duration );\r
315                                                 \r
316                                                 if( this.autoplay ){\r
317                                                                         this[ '_rawObject' ].currentTime = this._beginTime / 1000;      \r
318                                                 } else {\r
319                                                         // Opera12.17 WinXP で勝手に再生される不具合\r
320                                                         // これで一応再生は止まる、、、\r
321                                                                         this[ '_rawObject' ].src = '';\r
322                                                                         //this[ '_rawObject' ].load();                                          \r
323                                                 };\r
324                                                         };\r
325                                                         \r
326                                                 };\r
327                                                 break;\r
328                                         \r
329                                 };\r
330                                 \r
331                                 \r
332                                 if( !this._loaded && ( loaded || e.type === X_Audio_HTMLAudio_playTrigger || e.type === 'loadeddata' ) ){\r
333                                         this.autoplay && X_Timer_once( 16, this, this.play );\r
334                                         this._loaded = true;\r
335                                         this.target[ 'asyncDispatch' ]( X_EVENT_READY );\r
336                                         console.log( 'Loaded! ' + e.type + ' d:' + ( this.duration | 0 ) );\r
337                                         return;\r
338                                 };\r
339                                 \r
340                                 if( !loaded && type ){\r
341                                         this.target[ 'dispatch' ]( type );\r
342                                         type === X_EVENT_ERROR && this[ 'kill' ]();\r
343                                 };\r
344                         },\r
345 \r
346                         actualPlay : function(){\r
347                                 var begin, end;\r
348                                 \r
349                                 // もし kill 後に autoplayTimer で呼ばれても、_closed==true なので平気\r
350                                 if( this._closed ) return;\r
351                                 if( !this._loaded /* && !X_Audio_Sprite_inTouchAction */ ){\r
352                         this.autoplay = true;\r
353                         return;\r
354                                 };\r
355 \r
356                                 if( X_Audio_HTMLAudioWrapper_ieMobile9Fix && this._playForDuration === 0 ){\r
357                                         console.log( 'DurationFix開始 - ' + this[ '_rawObject' ].duration );\r
358                                         this._playForDuration = 1;\r
359                                 };\r
360 \r
361                                 end   = X_AudioWrapper_getEndTime( this );\r
362                                 begin = this._beginTime = X_AudioWrapper_getStartTime( this, end, true );\r
363 \r
364                     if( X_Audio_HTMLAudioWrapper_shortPlayFix ){\r
365                         begin -= end - begin > 1000 ? 200 : 400;\r
366                         begin  = begin < 0 ? 0 : begin;\r
367                     };\r
368 \r
369                                 if( !this[ '_rawObject' ].src ){\r
370                                         this._beginTime = begin;\r
371                                         this[ '_rawObject' ].src = this._src;\r
372                                         delete this._playForDuration;\r
373                                 };\r
374 \r
375                             if( !this.playing ){\r
376                                     if( X_UA[ 'Chrome' ] ){ // [CHROME][FIX] volume TODO どの version で 修正される?\r
377                                         // [!] delay\r
378                                         X_Timer_once( 0, this, this._fixForChrome );\r
379                                         this[ '_rawObject' ].volume = 0;\r
380                                     } else {\r
381                                         this[ '_rawObject' ].volume = this.gain;\r
382                                     };\r
383                                 this[ '_rawObject' ].play();\r
384                                 this.playing = true;\r
385                             };\r
386                                 //http://himaxoff.blog111.fc2.com/blog-entry-97.html\r
387                                 //Firefox3.6では一度も play() していない状態で currentTime = 0 を実行するとエラーになる。\r
388                                 //また、GoogleChrome7 では currentTime = 0 直後に play() すると、pause()した位置前後の音が混ざることがある。(少なくとも自分の環境では)\r
389                                 this[ '_rawObject' ].currentTime = this._lastCurrentTime = begin / 1000;\r
390 \r
391                             console.log( '[HTMLAudio] play ' + begin + ' -> ' + end );\r
392                     \r
393                     if( X_Audio_HTMLAudioWrapper_currentTimeFix ){\r
394                         this._beginTime = begin;\r
395                         this._playTime  = X_Timer_now();\r
396                     };\r
397 \r
398                         },\r
399                                 \r
400                                 // [CHROME][FIX] volume\r
401                                 _fixForChrome : X_UA[ 'Chrome' ] && function(){\r
402                                         !this._closed && ( this[ '_rawObject' ].volume = this.gain );\r
403                                 },\r
404                         \r
405                         actualPause : function(){\r
406                                 if( !this.playing ) return;\r
407                                 \r
408                                 this.seekTime = this.getActualCurrentTime();\r
409 \r
410                                 delete this._playTime;\r
411 \r
412                         !this[ '_rawObject' ].error && this[ '_rawObject' ].pause();\r
413                         \r
414                         if( X_Audio_HTMLAudioWrapper_durationFix ){\r
415                                 this[ '_rawObject' ].src = '';\r
416                                 // load();\r
417                         };\r
418                         delete this.playing;\r
419                         },\r
420                         \r
421                         getActualCurrentTime : function(){\r
422                                 return ( X_Audio_HTMLAudioWrapper_currentTimeFix ?\r
423                                                                 X_Timer_now() - this._playTime + this._beginTime :\r
424                                                                 this[ '_rawObject' ].currentTime * 1000 | 0 );\r
425                         },\r
426                 /*\r
427                 http://www.w3schools.com/tags/av_prop_error.asp\r
428                 1 = MEDIA_ERR_ABORTED - fetching process aborted by user\r
429             2 = MEDIA_ERR_NETWORK - error occurred when downloading\r
430             3 = MEDIA_ERR_DECODE - error occurred when decoding\r
431             4 = MEDIA_ERR_SRC_NOT_SUPPORTED - audio/video not supported\r
432             */                  \r
433                         getActualError : function(){\r
434                                 return this[ '_rawObject' ].error || 0;\r
435                         },\r
436                         \r
437                         afterUpdateState : function( result ){\r
438                                 if( result & 3 ){ // seek\r
439                         this.actualPlay();\r
440                                 } else\r
441                                 if( result & 4 ){\r
442                        this[ '_rawObject' ].volume = this.gain;\r
443                                 };                              \r
444                         }\r
445         \r
446                 }\r
447         );\r
448         \r
449         X_Audio_BACKENDS.push(\r
450                 {\r
451                         backendName : 'HTML Audio',\r
452                 /*\r
453                  * HTML5 の audio 要素と video 要素でサポートされているメディアフォーマット\r
454                  * https://developer.mozilla.org/ja/docs/Web/HTML/Supported_media_formats\r
455                  * \r
456                  * 主要ブラウザのHTML5 audioタグで使えるファイル形式の再生対応状況を調べてみた\r
457                  * http://sothis.blog.so-net.ne.jp/2010-10-27\r
458                  * ダメ元で仕様に含まれていない SHOUTcast もテストしてみました。\r
459                  * \r
460                  * IE9 の HTML5 Audio について\r
461                  * http://kentablog.cluscore.com/2011/05/ie9-html5-audio.html\r
462                  * 1.Audioオブジェクトを作ることができないので、Audioタグを使う\r
463                  * 2.クロスドメインアクセスには、「clientaccesspolicy.xml」か「crossdomain.xml」が必要\r
464                  * 3.wav が不可\r
465                  * \r
466                  * IE9でHTML5 autio タグが無効になる\r
467                  * http://bbs.wankuma.com/index.cgi?mode=al2&namber=64886&KLOG=109\r
468                  *  IEのバージョン9.0.8112.16421では、Audioオブジェクトのnewも対応してました。\r
469                  *  createElement等で動的生成すると、よろしくない\r
470                  * \r
471                  * media-can-play-wav-audio.html\r
472                  * https://github.com/adobe/webkit/blob/master/LayoutTests/media/media-can-play-wav-audio.html\r
473                  * testExpected("audio.canPlayType('audio/wav; codecs=1')", "probably");\r
474                  * \r
475                  * HTML5 audioタグ ブラウザ間の違い\r
476                  * 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
477                  *  - volume, muted iPhone(iOS4-6)、Android(2.3.6)では動作せず。\r
478                  *  - FireFox3.6, Android 2.3.6については、src変更後、load()を呼び出さないと切り替わらなかった。iPhoneはload()が不要。\r
479                  */     \r
480                         detect : function( proxy, source, ext ){\r
481                                 /*\r
482                                 var ok, mineType = 'audio/' + ext;\r
483                                 switch( ext ){\r
484                                         case 'mp3' :\r
485                                                 ok = X_UA[ 'IE' ] || X_UA[ 'Chrome' ] || ( X_UA[ 'Windows' ]  && X_UA[ 'Safari' ]  );\r
486                                                 mineType = 'audio/mpeg';\r
487                                                 //if( X_UA[ 'Android' ] && X_UA[ 'Gecko' ] ) mineType = '';\r
488                                                 break;\r
489                                         case 'ogg' :\r
490                                                 ok = 15 <= X_UA[ 'Gecko' ] || X_UA[ 'Chrome' ] || X_UA[ 'Opera' ] ;\r
491                                                 if( X_UA[ 'AndroidBrowser' ] ) mineType = '';\r
492                                                 break;\r
493                                         case 'm4a' :\r
494                                                 ok = X_UA[ 'IE' ] || X_UA[ 'WebKit' ];\r
495                                                 mineType = 'audio/mp4';\r
496                                                 break;\r
497                                         case 'webm' :\r
498                                                 ok = 2 <= X_UA[ 'Gecko' ] || 10.6 <= X_UA[ 'Opera' ] ; // firefox4+(Gecko2+)\r
499                                                 break;\r
500                                         case 'wav' :\r
501                                                 ok = X_UA[ 'Gecko' ] || X_UA[ 'Opera' ] || ( X_UA[ 'Windows' ]  && X_UA[ 'Safari' ]  );\r
502                                                 //mineType = 'audio/wav'; // audio/x-wav ?\r
503                                                 break;\r
504                                         default :\r
505                                                 mineType = '';\r
506                                 };\r
507                                 \r
508                                 if( !ok && mineType ){\r
509                                         if( !X_Audio_rawAudio ) X_Audio_rawAudio = new Audio;\r
510                                         ok = X_Audio_rawAudio.canPlayType( mineType );\r
511                                         //console.log( 'HTML Audio ' + ok + ' ext:' + ext );\r
512                                 };\r
513                                 console.log( 'HTML Audio ' + ok + ' ext:' + ext );\r
514                                 */\r
515                                 \r
516                                 proxy[ 'asyncDispatch' ]( { type : X_EVENT_COMPLETE, canPlay : X_Audio_codecs[ ext ] } );\r
517                         },\r
518                         \r
519                         klass : X_Audio_HTMLAudioWrapper\r
520                         \r
521                 } );\r
522 \r
523 /*\r
524  * \r
525  * howler.js\r
526  *     codecs = {\r
527       mp3: !!audioTest.canPlayType('audio/mpeg;').replace(/^no$/, ''),\r
528       opus: !!audioTest.canPlayType('audio/ogg; codecs="opus"').replace(/^no$/, ''),\r
529       ogg: !!audioTest.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/, ''),\r
530       wav: !!audioTest.canPlayType('audio/wav; codecs="1"').replace(/^no$/, ''),\r
531       aac: !!audioTest.canPlayType('audio/aac;').replace(/^no$/, ''),\r
532       m4a: !!(audioTest.canPlayType('audio/x-m4a;') || audioTest.canPlayType('audio/m4a;') || audioTest.canPlayType('audio/aac;')).replace(/^no$/, ''),\r
533       mp4: !!(audioTest.canPlayType('audio/x-mp4;') || audioTest.canPlayType('audio/mp4;') || audioTest.canPlayType('audio/aac;')).replace(/^no$/, ''),\r
534       weba: !!audioTest.canPlayType('audio/webm; codecs="vorbis"').replace(/^no$/, '')\r
535     };\r
536  */\r
537         \r
538 };\r
539 \r
540 \r
541 \r
542 \r
543 \r