OSDN Git Service

Version 0.6.169, add doc comment.
[pettanr/clientJs.git] / 0.6.x / js / 07_audio / 10_XAudioSprite.js
1 \r
2 /*\r
3  * http://uupaa.hatenablog.com/entry/2011/12/12/213233\r
4  * Mobile Opera11 は Audio をサポートするがイベントが取れない\r
5  * iframe 内で生成して、Audio Sprite の preset で再生できないか?\r
6  */\r
7 var X_Audio_Sprite_shouldUse        = window.HTMLAudioElement && ( X_UA[ 'iOS' ] || X_UA[ 'AndroidBrowser' ] || X_UA[ 'OperaMobile' ] || X_UA[ 'OperaTablet' ] ), // Flash がない\r
8         X_Audio_Sprite_useVideoForMulti = 4 <= X_UA[ 'AndroidBrowser' ] && 534.3 < X_UA[ 'AndroidWebkit' ], // ドスパラパッドはビデオのインライン再生が不可 \r
9         X_Audio_Sprite_needTouchAndroid = X_Audio_Sprite_useVideoForMulti,      \r
10         X_Audio_Sprite_needTouchFirst   = X_UA[ 'iOS' ] || X_Audio_Sprite_needTouchAndroid || ( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ),\r
11         X_Audio_Sprite_enableMultiTrack = !( X_UA[ 'iOS' ] && !X_Audio_WebAudio_context ) && !( X_UA[ 'AndroidBrowser4' ] && X_UA[ 'AndroidWebkit' ] <= 534.3 ) && !( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ),\r
12         X_Audio_Sprite_enableVolume     = window.HTMLAudioElement && ( !X_UA[ 'iOS' ] && !X_UA[ 'AndroidBrowser' ] && !X_UA[ 'OperaMobile' ] && !X_UA[ 'OperaTablet' ] ), // TODO fennec は 25以上\r
13         X_Audio_Sprite_maxTracks        = !X_Audio_Sprite_enableMultiTrack ? 1 : X_Audio_Sprite_useVideoForMulti ? 2 : 9,\r
14         X_Audio_Sprite_lengthSilence    = 10000, // 一番最初の無音部分の長さ\r
15         X_Audio_Sprite_lengthDistance   = 5000,  // 音間の無音の長さ\r
16         X_Audio_Sprite_uid              = 0,\r
17         X_Audio_Sprite_members          = {},\r
18         X_Audio_Sprite_TEMP             = {\r
19                 presets     : {},\r
20                 BGMs        : {},\r
21                 tracks      : [],\r
22                 pauseTracks : [], // X_EVENT_DEACTIVATE によって pause した再生中のトラックたち。\r
23                 volume      : 1,\r
24                 bgmTrack    : null,\r
25                 bgmPosition : 0,\r
26                 bgmName     : '',\r
27                 bgmLooped   : false,\r
28                 bgmPlaying  : false\r
29         },\r
30         X_Audio_Sprite_instance,\r
31         X_Audio_Sprite_numTracks,\r
32         X_Audio_Sprite_useVideo;\r
33 \r
34 X[ 'AudioSprite' ] = function( setting ){\r
35         var tracks  = X_Audio_Sprite_TEMP.tracks,\r
36                 bgms    = X_Audio_Sprite_TEMP.BGMs,\r
37                 presets = X_Audio_Sprite_TEMP.presets,\r
38                 urls    = setting[ 'urls' ],\r
39                 video   = setting[ 'useVideo' ],\r
40                 n       = video ? 1 : setting[ 'numTracks' ] || 1,\r
41                 option  = {\r
42                         volume    : setting[ 'volume' ] || 0.5,\r
43                         autoplay  : false,\r
44                         startTime : 0,\r
45                         endTime   : X_Audio_Sprite_lengthSilence,\r
46                         loop      : true\r
47                 },\r
48                 k, i, v, track; \r
49         \r
50         if( !X_Audio_Sprite_instance ){\r
51                 X_Audio_Sprite_instance = X_Class_override( X_EventDispatcher(), X_Audio_Sprite_members );\r
52                 X_ViewPort[ 'listen' ]( [ X_EVENT_VIEW_ACTIVATE, X_EVENT_VIEW_DEACTIVATE ], X_Audio_Sprite_instance, X_Audio_Sprite_handleEvent );\r
53         };\r
54         \r
55         n = n <= X_Audio_Sprite_maxTracks ? n : X_Audio_Sprite_maxTracks;\r
56         \r
57         for( k in setting ){\r
58                 v = setting[ k ];\r
59                 if( X_Type_isArray( v ) && v !== urls ){\r
60                         v = X_Array_copy( v );\r
61                         for( i = v.length; i; ){\r
62                                 --i;\r
63                                 if( i !== 2 ) v[ i ] = X_AudioWrapper_timeStringToNumber( v[ i ] );\r
64                         };                                      \r
65                         if( v[ 2 ] ) bgms[ k ] = v;\r
66                         presets[ k ] = v;\r
67                 };\r
68         };\r
69         \r
70         X_Audio_startDetectionBackend( X_Audio_BACKENDS[ 0 ], X_Audio_Sprite_instance, X_Array_copy( urls ), option );\r
71 \r
72         X_Audio_Sprite_instance[ 'listenOnce' ]( [ X_EVENT_BACKEND_READY, X_EVENT_BACKEND_NONE ], X_AudioSprite_backendHandler );\r
73         X_Audio_Sprite_instance[ 'listenOnce' ]( X_EVENT_KILL_INSTANCE, X_Audio_Sprite_handleEvent );\r
74         \r
75         X_Audio_Sprite_useVideo  = video;\r
76         X_Audio_Sprite_numTracks = X_Audio_Sprite_instance[ 'numTracks' ] = n;\r
77 \r
78         return X_Audio_Sprite_instance;\r
79 };\r
80 \r
81 X[ 'AudioSprite' ][ 'shouldUse'        ] = X_Audio_Sprite_shouldUse;\r
82 X[ 'AudioSprite' ][ 'needTouchFirst'   ] = X_Audio_Sprite_needTouchFirst;\r
83 X[ 'AudioSprite' ][ 'enableMultiTrack' ] = X_Audio_Sprite_enableMultiTrack;\r
84 \r
85 // 再生が終わっているもの、終わりかけのものを探す\r
86 // TODO 終わりかけのもの、と一番古いもの、どちらを再利用するか?これ以上に細かい実装を望む場合は X.Audio.Sprite は使わず自力で実装\r
87 function X_Audio_Sprite_getTrackEnded(){\r
88         var tracks  = X_Audio_Sprite_TEMP.tracks,\r
89                 l = tracks.length,\r
90                 i = 0, track, state, last = 1 / 0, _last, index;\r
91         \r
92         for( ; i < l; ++i ){\r
93                 track = tracks[ i ];\r
94                 state = track.getState();\r
95                 if( !state.playing ) return track;\r
96                 if( track === X_Audio_Sprite_TEMP.bgmTrack ) continue;\r
97                 if( state.currentTime <= X_Audio_Sprite_lengthSilence + X_Audio_Sprite_lengthDistance ) return track;\r
98                 _last = state.endTime - state.currentTime;\r
99                 if( _last < last ){\r
100                         last  = _last;\r
101                         index = i;\r
102                 };\r
103         };\r
104         return tracks[ index ];\r
105 };\r
106 \r
107 /*\r
108  * {\r
109  *       urls      : [ 'xx.ogg', 'xx.mp3' ],\r
110  *       numTracks : 3,\r
111  *   useVideo  : false,\r
112  *   volume    : 1,\r
113  *       BGM_01 : [ '15.00', '45.500', true, '17.666', '50.999' ],\r
114  *   BGM_02 : [ '56.00', '1:15.230', true ]\r
115  * }\r
116  * \r
117  * X_EVENT_BACKEND_READY\r
118  * X_EVENT_BACKEND_NONE\r
119  * \r
120  * X_EVENT_READY\r
121  * X_EVENT_MEDIA_LOOPED\r
122  * X_EVENT_MEDIA_ENDED\r
123  * \r
124  */\r
125 \r
126 X_Audio_Sprite_members = {\r
127                 \r
128                 'numTracks' : 0,\r
129                 \r
130                 'load' : function(){\r
131                         var tracks = X_Audio_Sprite_TEMP.tracks,\r
132                                 i = 0, l = tracks.length;\r
133                         for( ; i < l; ++i ){\r
134                                 if( X_UA[ 'WinPhone' ] ){\r
135                                         console.log( 'WinPhone : touch -> play()' );\r
136                                         //tracks[ i ].play( 0, X_Audio_Sprite_lengthSilence, true, 0, X_Audio_Sprite_lengthSilence ).seek( 0 );\r
137                                         this[ 'pause' ]( i );\r
138                                 } else {\r
139                                         tracks[ i ][ '_rawObject' ].load();\r
140                                 };\r
141                         };\r
142                 },\r
143                 \r
144                 /*\r
145                  * @return uid Number\r
146                  */\r
147                 'play' : function( name ){\r
148                         var bgm     = X_Audio_Sprite_TEMP.bgmTrack,\r
149                                 tracks  = X_Audio_Sprite_TEMP.tracks,\r
150                                 bgms    = X_Audio_Sprite_TEMP.BGMs,\r
151                                 presets = X_Audio_Sprite_TEMP.presets,\r
152                                 preset  = presets[ name ],\r
153                                 track, i, k;\r
154                         \r
155                         if( preset ){\r
156                                 if( bgms[ name ] ){\r
157                                         if( name !== X_Audio_Sprite_TEMP.bgmName ){\r
158                                                 // bgm変更\r
159                                                 X_Audio_Sprite_TEMP.bgmName     = name;\r
160                                                 X_Audio_Sprite_TEMP.bgmPosition = preset[ 0 ];\r
161                                                 X_Audio_Sprite_TEMP.bgmLooped   = false;\r
162                                         };\r
163                                         \r
164                                         X_Audio_Sprite_TEMP.bgmPlaying = true;\r
165                                         \r
166                                         if( bgm ){\r
167                                                 track = bgm;\r
168                                         } else\r
169                                         if( 1 < tracks.length ){\r
170                                                 track = X_Audio_Sprite_TEMP.bgmTrack = X_Audio_Sprite_getTrackEnded();\r
171                                         } else {\r
172                                                 track = X_Audio_Sprite_TEMP.bgmTrack = tracks[ 0 ];\r
173                                         };\r
174                                         \r
175                                         if( track[ 'listen' ]( [ X_EVENT_MEDIA_PLAYING, X_EVENT_MEDIA_BEFORE_LOOP ], this, X_Audio_Sprite_handleEvent ).playing ){\r
176                                                 track.setState({\r
177                                                                 'loop'          : true,\r
178                                                                 'looped'        : X_Audio_Sprite_TEMP.bgmLooped,\r
179                                                                 'currentTime'   : X_Audio_Sprite_TEMP.bgmPosition,\r
180                                                                 'startTime'     : preset[ 0 ],\r
181                                                                 'endTime'       : preset[ 1 ],\r
182                                                                 'loopStartTime' : preset[ 3 ],\r
183                                                                 'loopEndTime'   : preset[ 4 ]\r
184                                                         });\r
185                                         } else {\r
186                                                 track.setState( { 'looped' : X_Audio_Sprite_TEMP.bgmLooped } );\r
187                                                 track.play( preset[ 0 ], preset[ 1 ], true, preset[ 3 ], preset[ 4 ] );\r
188                                                 track.seek( X_Audio_Sprite_TEMP.bgmPosition );\r
189                                         };\r
190                                         \r
191                                 } else {\r
192                                         if( 1 < tracks.length ){\r
193                                                 track = X_Audio_Sprite_getTrackEnded( X_Audio_Sprite_TEMP.bgmPlaying );\r
194                                                 track\r
195                                                         [ 'listen' ]( [ X_EVENT_MEDIA_PLAYING, X_EVENT_MEDIA_BEFORE_LOOP ], this, X_Audio_Sprite_handleEvent )\r
196                                                         .setState( { 'looped' : false } );\r
197                                                 track.play( preset[ 0 ], preset[ 1 ], true, 0, X_Audio_Sprite_lengthSilence );\r
198                                         } else {\r
199                                                 // single track, iOS\r
200                                                 if( bgm ){\r
201                                                         X_Audio_Sprite_TEMP.bgmPosition = bgm.currentTime();\r
202                                                         //console.log( 'bgm position : ' + X_Audio_Sprite_TEMP.bgmPosition + ' isPlay:' +  bgm.playing );\r
203                                                         X_Audio_Sprite_TEMP.bgmTrack    = null;\r
204                                                 };\r
205                                                 track = tracks[ 0 ];\r
206                                         \r
207                                                 if( track[ 'listen' ]( [ X_EVENT_MEDIA_PLAYING, X_EVENT_MEDIA_BEFORE_LOOP ], this, X_Audio_Sprite_handleEvent ).playing ){\r
208                                                         track.setState({\r
209                                                                         'loop'          : true,\r
210                                                                         'looped'        : false,\r
211                                                                         //'currentTime'   : preset[ 0 ],\r
212                                                                         'startTime'     : preset[ 0 ],\r
213                                                                         'endTime'       : preset[ 1 ],\r
214                                                                         'loopStartTime' : 0,\r
215                                                                         'loopEndTime'   : X_Audio_Sprite_lengthSilence\r
216                                                                 });\r
217                                                 } else {\r
218                                                         track.play( preset[ 0 ], preset[ 1 ], true, 0, X_Audio_Sprite_lengthSilence );  \r
219                                                 };\r
220                                         };\r
221                                 };\r
222                                 return tracks.indexOf( track );\r
223                         };\r
224                         return -1;\r
225                 },\r
226                 \r
227                 'pause' : function( uid ){\r
228                         var track = X_Audio_Sprite_TEMP.tracks[ uid ];\r
229                         if( X_Audio_Sprite_TEMP.bgmTrack === track ){\r
230                                 X_Audio_Sprite_TEMP.bgmPosition = track.currentTime();\r
231                                 X_Audio_Sprite_TEMP.bgmPlaying  = false;\r
232                                 X_Audio_Sprite_TEMP.bgmTrack    = null;\r
233                         };\r
234                         track && track.play( 0, X_Audio_Sprite_lengthSilence, true, 0, X_Audio_Sprite_lengthSilence );\r
235                         track && track.seek( 0 );\r
236                         this[ 'asyncDispatch' ]( X_EVENT_MEDIA_PAUSED );\r
237                         return this;\r
238                 },\r
239                 \r
240                 'seek' : function( uid, position ){\r
241                         var track = X_Audio_Sprite_TEMP.tracks[ uid ],\r
242                                 end;\r
243                         if( track ){\r
244                                 delete track.seekTime;\r
245                                 end = X_AudioWrapper_getEndTime( track );\r
246                                 position <= end && X_AudioWrapper_getStartTime( track, end ) <= position && track.seek( postion );\r
247                         };\r
248                         return this;\r
249                 },\r
250                 \r
251                 'volume' : function( uid, opt_volume ){\r
252                         var track, i;\r
253                         // TODO uid = 0\r
254                         if( uid === 0 ){\r
255                                 if( opt_volume === undefined ){\r
256                                         return X_Audio_Sprite_TEMP.volume;\r
257                                 };\r
258                                 for( i = X_Audio_Sprite_TEMP.tracks.length; i; ){\r
259                                         X_Audio_Sprite_TEMP.tracks[ --i ].volume( opt_volume );\r
260                                 };\r
261                                 return this;\r
262                         };\r
263                         track = X_Audio_Sprite_TEMP.tracks[ uid ];\r
264                         if( opt_volume === undefined ){\r
265                                 return track ? track.gain : -1;\r
266                         };\r
267                         track && track.volume( opt_volume );\r
268                         return this;\r
269                 },\r
270                 \r
271                 'state' : function( uid, opt_obj ){\r
272                         var track = X_Audio_Sprite_TEMP.tracks[ uid ],\r
273                                 state, start, end;\r
274                         // TODO uid = 0\r
275                         if( opt_obj === undefined ){\r
276                                 // TODO pause\r
277                                 if( track ){\r
278                                         state = track.getState();\r
279                                         start = state.startTime;\r
280                                         return {\r
281                                         'currentTime' : state.currentTime - start,\r
282                                         'playing'     : start <= state.currentTime && state.currentTime <= state.endTime,\r
283                                         'duration'    : state.endTime - start,\r
284                                         'volume'      : X_Audio_Sprite_TEMP.volume\r
285                                         };\r
286                                 };\r
287                                 return { 'volume' : X_Audio_Sprite_TEMP.volume, 'playing' : false };\r
288                         };\r
289                         track && track.setState( opt_obj );\r
290                         return this;\r
291                 }\r
292 };\r
293 \r
294 function X_AudioSprite_backendHandler( e ){\r
295         var i, backend, option, src, name, last, _e;\r
296         \r
297         switch( e.type ){\r
298                 case X_EVENT_BACKEND_READY :\r
299                 \r
300                         backend = X_Audio_BACKENDS[ e[ 'backendID' ] ];\r
301                         option  = e[ 'option' ];\r
302                         \r
303                         this[ 'unlisten' ]( X_EVENT_BACKEND_NONE, X_AudioSprite_backendHandler );\r
304                         this[ 'source' ]      = src = e[ 'source' ];\r
305                         this[ 'backendName' ] = name = backend.backendName;\r
306                 \r
307                         for( i = 0; i < X_Audio_Sprite_numTracks; ++i ){\r
308                                 if( X_Audio_Sprite_useVideo || ( i === 1 && X_Audio_Sprite_useVideoForMulti ) ){\r
309                                         option[ 'useVideo' ] = true;\r
310                                 };\r
311                                 // Audiobackend の owner として null を渡すとAudioBackend 自身へ dispatch する\r
312                                 X_Audio_Sprite_TEMP.tracks.push( last = backend.klass( null, e[ 'source' ], option ) );\r
313                         };\r
314 \r
315                         _e = {\r
316                                 'type'        : X_EVENT_BACKEND_READY,\r
317                                 'source'      : src,\r
318                                 'backendName' : name\r
319                         };\r
320                         \r
321                         if( X_Audio_Sprite_needTouchFirst ){\r
322                                 if( name === 'Web Audio' ){\r
323                                         _e[ 'needTouchForPlay' ] = true;\r
324                                 } else {\r
325                                         _e[ 'needTouchForLoad' ] = true;\r
326                                 };\r
327                         };\r
328                         this[ 'asyncDispatch' ]( _e );\r
329                         \r
330                         last[ 'listenOnce' ]( X_EVENT_READY, this, X_AudioSprite_backendHandler );\r
331 \r
332                         // READY, needTouchForPlay, needTouchForLoad\r
333                         if( X_Audio_HTMLAudioWrapper_durationFix ){\r
334                                 for( i = 0; i < X_Audio_Sprite_TEMP.tracks.length; ++i ){\r
335                                         this[ 'pause' ]( i );\r
336                                 };\r
337                         };\r
338                         \r
339                         return X_CALLBACK_STOP_NOW;\r
340 \r
341                 case X_EVENT_BACKEND_NONE :\r
342                         this[ 'unlisten' ]( X_EVENT_BACKEND_READY, this, X_AudioSprite_backendHandler )\r
343                                 [ 'asyncDispatch' ]( X_EVENT_BACKEND_NONE );\r
344                         return X_CALLBACK_STOP_NOW;\r
345                 \r
346                 case X_EVENT_READY :\r
347                         console.log( 'X.AudioSprite - Ready!' );\r
348                         \r
349                         if( X_Audio_Sprite_needTouchAndroid ){\r
350                                 for( i = 0; i < X_Audio_Sprite_TEMP.tracks.length; ++i ){\r
351                                         this[ 'pause' ]( i );\r
352                                 };\r
353                                 e.target[ 'listenOnce' ]( X_EVENT_MEDIA_PLAYING, this, this.asyncDispatch, [ X_EVENT_READY ] ); // Android 標準ブラウザ\r
354                                 return;\r
355                         };\r
356                         this[ 'asyncDispatch' ]( X_EVENT_READY );\r
357                         break;\r
358         };\r
359 };\r
360 \r
361 \r
362 function X_Audio_Sprite_handleEvent( e ){\r
363         var i, tracks, track, _e, k;\r
364         \r
365         switch( e.type ){\r
366                 case X_EVENT_MEDIA_PLAYING :\r
367                         ( e.target === X_Audio_Sprite_TEMP.bgmTrack || !e.target.looped ) && this[ 'asyncDispatch' ]( X_EVENT_MEDIA_PLAYING );\r
368                         break;\r
369                 \r
370                 case X_EVENT_MEDIA_BEFORE_LOOP :\r
371                         if( e.target === X_Audio_Sprite_TEMP.bgmTrack ){\r
372                                 X_Audio_Sprite_TEMP.bgmLooped = true;\r
373                                 this[ 'asyncDispatch' ]( X_EVENT_MEDIA_LOOPED ); // TODO uid\r
374                         } else {\r
375                                 if( e.target.looped ){\r
376                                         //this[ 'asyncDispatch' ]( X_EVENT_MEDIA_LOOPED ); // TODO uid\r
377                                 } else {\r
378                                         this[ 'asyncDispatch' ]( X_EVENT_MEDIA_ENDED ); // TODO uid\r
379                                 };\r
380                                 \r
381                                 console.log( '[AudioSprite] ' + X_Audio_Sprite_TEMP.bgmPlaying + ' ' + !X_Audio_Sprite_TEMP.bgmTrack );\r
382                                 \r
383                                 // single track | iOS\r
384                                 if( X_Audio_Sprite_TEMP.bgmPlaying && !X_Audio_Sprite_TEMP.bgmTrack ){\r
385                                         X_Audio_Sprite_TEMP.bgmTrack = e.target;\r
386                                         this.play( X_Audio_Sprite_TEMP.bgmName );\r
387                                         return X.Callback.PREVENT_DEFAULT;\r
388                                 };\r
389                         };\r
390                         break;\r
391                 \r
392                 // TODO Android Firefox で アクティブ検出できない!\r
393                 case X_EVENT_VIEW_ACTIVATE :\r
394                         console.log( '■ アクティブ' );\r
395                         // track.play(); or iOS need touch??\r
396                         tracks = X_Audio_Sprite_TEMP.pauseTracks;\r
397                         while( tracks.length ) tracks.pop().actualPlay();\r
398                         break;\r
399 \r
400                 case X_EVENT_VIEW_DEACTIVATE :\r
401                         console.log( '■ デアクティブ' );\r
402                         // track.pause();\r
403                         tracks = X_Audio_Sprite_TEMP.tracks;\r
404                         i      = tracks.length;\r
405                         for( ; i; ){\r
406                                 track = tracks[ --i ];\r
407                                 track.playing && X_Audio_Sprite_TEMP.pauseTracks.push( track ) && track.pause();\r
408                         };\r
409                         break;\r
410                 \r
411                 case X_EVENT_KILL_INSTANCE :\r
412                         \r
413                         while( X_Audio_Sprite_TEMP.tracks.length ){\r
414                                 X_Audio_Sprite_TEMP.tracks.pop()[ 'kill' ]();\r
415                         };\r
416                         \r
417                         for( k in X_Audio_Sprite_TEMP.bgms ){\r
418                                 delete X_Audio_Sprite_TEMP.bgms[ k ];\r
419                         };\r
420                         for( k in X_Audio_Sprite_TEMP.presets ){\r
421                                 delete X_Audio_Sprite_TEMP.presets[ k ];\r
422                         };\r
423                         \r
424                         X_Audio_Sprite_TEMP.bgmTrack    = null;\r
425                         X_Audio_Sprite_TEMP.bgmPosition = 0;\r
426                         X_Audio_Sprite_TEMP.bgmName     = '';\r
427                         X_Audio_Sprite_TEMP.bgmLooped   = false;\r
428                         X_Audio_Sprite_TEMP.bgmPlaying  = false;\r
429                         \r
430                         X_ViewPort[ 'unlisten' ]( [ X_EVENT_VIEW_ACTIVATE, X_EVENT_VIEW_DEACTIVATE ], this, X_Audio_Sprite_handleEvent );\r
431                         break;\r
432         };\r
433 };\r