OSDN Git Service

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