3 * http://uupaa.hatenablog.com/entry/2011/12/12/213233
\r
4 * Mobile Opera11 は Audio をサポートするがイベントが取れない
\r
5 * iframe 内で生成して、Audio Sprite の preset で再生できないか?
\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[ 'AndroidBrowserWebkit' ], // ドスパラパッドはビデオのインライン再生が不可
\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[ 'AndroidBrowserWebkit' ] <= 534.3 ),
\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
22 pauseTracks : [], // X_EVENT_DEACTIVATE によって pause した再生中のトラックたち。
\r
30 X_Audio_Sprite_instance;
\r
32 X[ 'Audio' ][ 'Sprite' ] = {
\r
34 'shouldUse' : X_Audio_Sprite_shouldUse,
\r
36 'needTouchFirst' : X_Audio_Sprite_needTouchFirst,
\r
38 'enableMultiTrack' : X_Audio_Sprite_enableMultiTrack,
\r
40 'create' : function( setting ){
\r
42 if( X_Audio_Sprite_instance ){
\r
43 X_Audio_Sprite_instance.close();
\r
45 X_Audio_Sprite_instance = X_Class_override( X_EventDispatcher(), X_Audio_Sprite_members );
\r
46 X_ViewPort[ 'listen' ]( [ X_EVENT_VIEW_ACTIVATE, X_EVENT_VIEW_DEACTIVATE ], X_Audio_Sprite_instance, X_Audio_Sprite_handleEvent );
\r
48 X_Audio_Sprite_instance.setup( setting );
\r
49 return X_Audio_Sprite_instance;
\r
54 // 再生が終わっているもの、終わりかけのものを探す
\r
55 // TODO 終わりかけのもの、と一番古いもの、どちらを再利用するか?これ以上に細かい実装を望む場合は X.Audio.Sprite は使わず自力で実装
\r
56 function X_Audio_Sprite_getTrackEnded(){
\r
57 var tracks = X_Audio_Sprite_TEMP.tracks,
\r
59 i = 0, track, state, last = 1 / 0, _last, index;
\r
61 for( ; i < l; ++i ){
\r
62 track = tracks[ i ];
\r
63 state = track.state();
\r
64 if( !state.playing ) return track;
\r
65 if( track === X_Audio_Sprite_TEMP.bgmTrack ) continue;
\r
66 if( state.currentTime <= X_Audio_Sprite_lengthSilence + X_Audio_Sprite_lengthDistance ) return track;
\r
67 _last = state.endTime - state.currentTime;
\r
73 return tracks[ index ];
\r
78 * urls : [ 'xx.ogg', 'xx.mp3' ],
\r
82 * BGM_01 : [ '15.00', '45.500', true, '17.666', '50.999' ],
\r
83 * BGM_02 : [ '56.00', '1:15.230', true ]
\r
86 * X_EVENT_BACKEND_READY
\r
87 * X_EVENT_BACKEND_NONE
\r
90 * X_EVENT_MEDIA_LOOPED
\r
91 * X_EVENT_MEDIA_ENDED
\r
95 X_Audio_Sprite_members = {
\r
97 setup : function( setting ){
\r
99 var tracks = X_Audio_Sprite_TEMP.tracks,
\r
100 bgms = X_Audio_Sprite_TEMP.BGMs,
\r
101 presets = X_Audio_Sprite_TEMP.presets,
\r
102 urls = setting[ 'urls' ],
\r
103 video = setting[ 'useVideo' ],
\r
104 n = video ? 1 : setting[ 'numTracks' ] || 1,
\r
106 volume : setting[ 'volume' ] || 0.5,
\r
109 endTime : X_Audio_Sprite_lengthSilence,
\r
114 n = n <= X_Audio_Sprite_maxTracks ? n : X_Audio_Sprite_maxTracks;
\r
116 for( k in setting ){
\r
118 if( X_Type_isArray( v ) && v !== urls ){
\r
119 v = X_Object_cloneArray( v );
\r
120 for( i = v.length; i; ){
\r
122 if( i !== 2 ) v[ i ] = X_AudioWrapper_timeStringToNumber( v[ i ] );
\r
124 if( v[ 2 ] ) bgms[ k ] = v;
\r
129 for( i = 0; i < n; ++i ){
\r
130 if( video || ( i === 1 && X_Audio_Sprite_useVideoForMulti ) ){
\r
131 option[ 'useVideo' ] = true;
\r
133 tracks.push( X.Audio( urls, X_Object_clone( option ) ) );
\r
136 tracks[ n - 1 ][ 'listenOnce' ]( [ X_EVENT_BACKEND_READY, X_EVENT_BACKEND_NONE ], this, X_Audio_Sprite_handleEvent );
\r
138 X_Audio_Sprite_instance.numTracks = n;
\r
141 close : function(){
\r
142 var tracks = X_Audio_Sprite_TEMP.tracks,
\r
143 bgms = X_Audio_Sprite_TEMP.BGMs,
\r
144 presets = X_Audio_Sprite_TEMP.presets,
\r
147 while( tracks.length ){
\r
148 tracks.pop()[ 'kill' ]();
\r
154 for( k in presets ){
\r
155 delete presets[ k ];
\r
158 X_Audio_Sprite_TEMP.bgmTrack = null;
\r
159 X_Audio_Sprite_TEMP.bgmPosition = 0;
\r
160 X_Audio_Sprite_TEMP.bgmName = '';
\r
161 X_Audio_Sprite_TEMP.bgmLooped = false;
\r
162 X_Audio_Sprite_TEMP.bgmPlaying = false;
\r
166 var tracks = X_Audio_Sprite_TEMP.tracks,
\r
167 i = 0, l = tracks.length;
\r
168 for( ; i < l; ++i ){
\r
169 if( X_UA[ 'WinPhone' ] ){
\r
170 console.log( 'touch -> play()' );
\r
171 //tracks[ i ].play( 0, X_Audio_Sprite_lengthSilence, true, 0, X_Audio_Sprite_lengthSilence ).seek( 0 );
\r
174 X_Audio_getAudioWrapper( tracks[ i ] )[ '_rawObject' ].load();
\r
180 * @return uid Number
\r
182 play : function( name ){
\r
183 var bgm = X_Audio_Sprite_TEMP.bgmTrack,
\r
184 tracks = X_Audio_Sprite_TEMP.tracks,
\r
185 bgms = X_Audio_Sprite_TEMP.BGMs,
\r
186 presets = X_Audio_Sprite_TEMP.presets,
\r
187 preset = presets[ name ],
\r
191 if( bgms[ name ] ){
\r
192 if( name !== X_Audio_Sprite_TEMP.bgmName ){
\r
194 X_Audio_Sprite_TEMP.bgmName = name;
\r
195 X_Audio_Sprite_TEMP.bgmPosition = preset[ 0 ];
\r
196 X_Audio_Sprite_TEMP.bgmPlaying = true;
\r
197 X_Audio_Sprite_TEMP.bgmLooped = false;
\r
202 if( 1 < tracks.length ){
\r
203 track = X_Audio_Sprite_TEMP.bgmTrack = X_Audio_Sprite_getTrackEnded();
\r
205 track = X_Audio_Sprite_TEMP.bgmTrack = tracks[ 0 ];
\r
208 if( track[ 'listen' ]( [ X_EVENT_MEDIA_PLAYING, X_EVENT_MEDIA_BEFORE_LOOP ], this, X_Audio_Sprite_handleEvent ).isPlaying() ){
\r
212 looped : X_Audio_Sprite_TEMP.bgmLooped,
\r
213 currentTime : X_Audio_Sprite_TEMP.bgmPosition,
\r
214 startTime : preset[ 0 ],
\r
215 endTime : preset[ 1 ],
\r
216 loopStartTime : preset[ 3 ],
\r
217 loopEndTime : preset[ 4 ]
\r
221 .state( { looped : X_Audio_Sprite_TEMP.bgmLooped } )
\r
222 .play( preset[ 0 ], preset[ 1 ], true, preset[ 3 ], preset[ 4 ] )
\r
223 .seek( X_Audio_Sprite_TEMP.bgmPosition );
\r
227 if( 1 < tracks.length ){
\r
228 track = X_Audio_Sprite_getTrackEnded( X_Audio_Sprite_TEMP.bgmPlaying );
\r
230 [ 'listen' ]( [ X_EVENT_MEDIA_PLAYING, X_EVENT_MEDIA_BEFORE_LOOP ], this, X_Audio_Sprite_handleEvent )
\r
231 .state( { looped : false } )
\r
232 .play( preset[ 0 ], preset[ 1 ], true, 0, X_Audio_Sprite_lengthSilence );
\r
234 // single track, iOS
\r
236 X_Audio_Sprite_TEMP.bgmPosition = bgm.currentTime();
\r
237 console.log( 'bgm position : ' + X_Audio_Sprite_TEMP.bgmPosition + ' isPlay:' + bgm.isPlaying() );
\r
238 X_Audio_Sprite_TEMP.bgmTrack = null;
\r
240 track = tracks[ 0 ];
\r
242 if( track[ 'listen' ]( [ X_EVENT_MEDIA_PLAYING, X_EVENT_MEDIA_BEFORE_LOOP ], this, X_Audio_Sprite_handleEvent ).isPlaying() ){
\r
247 startTime : preset[ 0 ],
\r
248 endTime : preset[ 1 ],
\r
250 loopEndTime : X_Audio_Sprite_lengthSilence
\r
254 .play( preset[ 0 ], preset[ 1 ], true, 0, X_Audio_Sprite_lengthSilence );
\r
258 return tracks.indexOf( track );
\r
263 pause : function( uid ){
\r
264 var track = X_Audio_Sprite_TEMP.tracks[ uid ];
\r
265 if( X_Audio_Sprite_TEMP.bgmTrack === track ){
\r
266 X_Audio_Sprite_TEMP.bgmPosition = track.currentTime();
\r
267 X_Audio_Sprite_TEMP.bgmPlaying = false;
\r
268 X_Audio_Sprite_TEMP.bgmTrack = null;
\r
270 track && track.play( 0, X_Audio_Sprite_lengthSilence, true, 0, X_Audio_Sprite_lengthSilence ).seek( 0 );
\r
271 this[ 'asyncDispatch' ]( X_EVENT_MEDIA_PAUSED );
\r
275 seek : function( uid, position ){
\r
276 var track = X_Audio_Sprite_TEMP.tracks[ uid ],
\r
279 delete track.seekTime;
\r
280 end = X_AudioWrapper_getEndTime( track );
\r
281 position <= end && X_AudioWrapper_getStartTime( track, end ) <= position && track.seek( postion );
\r
286 volume : function( uid, opt_volume ){
\r
290 if( opt_volume === undefined ){
\r
291 return X_Audio_Sprite_TEMP.volume;
\r
293 for( i = X_Audio_Sprite_TEMP.tracks.length; i; ){
\r
294 X_Audio_Sprite_TEMP.tracks[ --i ].volume( opt_volume );
\r
298 track = X_Audio_Sprite_TEMP.tracks[ uid ];
\r
299 if( opt_volume === undefined ){
\r
300 return track ? track.volume() : -1;
\r
302 track && track.volume( opt_volume );
\r
306 state : function( uid, opt_obj ){
\r
307 var track = X_Audio_Sprite_TEMP.tracks[ uid ],
\r
310 if( opt_obj === undefined ){
\r
313 state = track.state();
\r
314 start = state.startTime;
\r
316 'currentTime' : state.currentTime - state.startTime,
\r
317 'playing' : state.startTime <= state.currentTime && state.currentTime <= state.endTime,
\r
318 'duration' : state.endTime - state.startTime,
\r
319 'volume' : X_Audio_Sprite_TEMP.volume
\r
322 return { 'volume' : X_Audio_Sprite_TEMP.volume, 'playing' : false };
\r
324 track && track.state( opt_obj );
\r
329 function X_Audio_Sprite_handleEvent( e ){
\r
330 var i, tracks, track, _e;
\r
333 case X_EVENT_BACKEND_READY :
\r
335 'type' : X_EVENT_BACKEND_READY,
\r
336 'source' : e[ 'source' ],
\r
337 'backendName' : e[ 'backendName' ]
\r
340 if( X_Audio_Sprite_needTouchFirst ){
\r
341 if( e.backendName === 'Web Audio' ){
\r
342 _e[ 'needTouchForPlay' ] = true;
\r
344 _e[ 'needTouchForLoad' ] = true;
\r
347 this[ 'asyncDispatch' ]( _e );
\r
350 [ 'unlisten' ]( X_EVENT_BACKEND_NONE, this, X_Audio_Sprite_handleEvent )
\r
351 [ 'listenOnce' ]( X_EVENT_READY, this, X_Audio_Sprite_handleEvent );
\r
353 // READY, needTouchForPlay, needTouchForLoad
\r
354 if( X_Audio_HTMLAudioWrapper_durationFix ){
\r
355 for( i = 0; i < X_Audio_Sprite_TEMP.tracks.length; ++i ){
\r
356 X_Audio_Sprite_instance.pause( i );
\r
361 case X_EVENT_BACKEND_NONE :
\r
362 this[ 'asyncDispatch' ]( X_EVENT_BACKEND_NONE );
\r
363 e.target[ 'unlisten' ]( X_EVENT_BACKEND_READY, this, X_Audio_Sprite_handleEvent );
\r
366 case X_EVENT_READY :
\r
367 console.log( 'X.AudioSprite - Ready!' );
\r
368 if( X_Audio_Sprite_needTouchAndroid ){
\r
369 for( i = 0; i < X_Audio_Sprite_TEMP.tracks.length; ++i ){
\r
370 X_Audio_Sprite_instance.pause( i );
\r
372 e.target[ 'listenOnce' ]( X_EVENT_MEDIA_PLAYING, this, this.asyncDispatch, [ X_EVENT_READY ] ); // Android 標準ブラウザ
\r
375 this[ 'asyncDispatch' ]( X_EVENT_READY );
\r
378 case X_EVENT_MEDIA_PLAYING :
\r
379 ( e.target === X_Audio_Sprite_TEMP.bgmTrack || !e.target.state().looped ) && this[ 'asyncDispatch' ]( X_EVENT_MEDIA_PLAYING );
\r
382 case X_EVENT_MEDIA_BEFORE_LOOP :
\r
383 if( e.target === X_Audio_Sprite_TEMP.bgmTrack ){
\r
384 X_Audio_Sprite_TEMP.bgmLooped = true;
\r
385 this[ 'asyncDispatch' ]( X_EVENT_MEDIA_LOOPED ); // TODO uid
\r
387 if( e.target.state().looped ){
\r
388 //this[ 'asyncDispatch' ]( X_EVENT_MEDIA_LOOPED ); // TODO uid
\r
390 this[ 'asyncDispatch' ]( X_EVENT_MEDIA_ENDED ); // TODO uid
\r
393 // single track | iOS
\r
394 if( X_Audio_Sprite_TEMP.bgmPlaying && !X_Audio_Sprite_TEMP.bgmTrack ){
\r
395 X_Audio_Sprite_TEMP.bgmTrack = e.target;
\r
396 this.play( X_Audio_Sprite_TEMP.bgmName );
\r
397 return X.Callback.PREVENT_DEFAULT;
\r
402 case X_EVENT_VIEW_ACTIVATE :
\r
403 console.log( '■ アクティブ' );
\r
404 // track.play(); or iOS need touch??
\r
405 tracks = X_Audio_Sprite_TEMP.pauseTracks;
\r
406 while( tracks.length ) tracks.pop().play();
\r
409 case X_EVENT_VIEW_DEACTIVATE :
\r
410 console.log( '■ デアクティブ' );
\r
412 tracks = X_Audio_Sprite_TEMP.tracks;
\r
415 track = tracks[ --i ];
\r
416 track.isPlaying() && X_Audio_Sprite_TEMP.pauseTracks.push( track.pause() );
\r
420 case X_EVENT_KILL_INSTANCE :
\r
421 X_ViewPort[ 'unlisten' ]( [ X_EVENT_VIEW_ACTIVATE, X_EVENT_VIEW_DEACTIVATE ], this, X_Audio_Sprite_handleEvent );
\r