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[ '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
  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 \r
  32 X[ 'Audio' ][ 'Sprite' ] = {\r
  33         \r
  34         'shouldUse'        : X_Audio_Sprite_shouldUse,\r
  35         \r
  36         'needTouchFirst'   : X_Audio_Sprite_needTouchFirst,\r
  37         \r
  38         'enableMultiTrack' : X_Audio_Sprite_enableMultiTrack,\r
  39         \r
  40         'create' : function( setting ){\r
  41                 // close()\r
  42                 if( X_Audio_Sprite_instance ){\r
  43                         X_Audio_Sprite_instance.close();\r
  44                 } else {\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
  47                 };\r
  48                 X_Audio_Sprite_instance.setup( setting );\r
  49                 return X_Audio_Sprite_instance;\r
  50                 \r
  51         }\r
  52 };\r
  53 \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
  58                 l = tracks.length,\r
  59                 i = 0, track, state, last = 1 / 0, _last, index;\r
  60         \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
  68                 if( _last < last ){\r
  69                         last  = _last;\r
  70                         index = i;\r
  71                 };\r
  72         };\r
  73         return tracks[ index ];\r
  74 };\r
  75 \r
  76 /*\r
  77  * {\r
  78  *       urls      : [ 'xx.ogg', 'xx.mp3' ],\r
  79  *       numTracks : 3,\r
  80  *   useVideo  : false,\r
  81  *   volume    : 1,\r
  82  *       BGM_01 : [ '15.00', '45.500', true, '17.666', '50.999' ],\r
  83  *   BGM_02 : [ '56.00', '1:15.230', true ]\r
  84  * }\r
  85  * \r
  86  * X_EVENT_BACKEND_READY\r
  87  * X_EVENT_BACKEND_NONE\r
  88  * \r
  89  * X_EVENT_READY\r
  90  * X_EVENT_MEDIA_LOOPED\r
  91  * X_EVENT_MEDIA_ENDED\r
  92  * \r
  93  */\r
  94 \r
  95 X_Audio_Sprite_members = {\r
  96                 \r
  97                 setup : function( setting ){\r
  98                         \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
 105                                 option  = {\r
 106                                         volume    : setting[ 'volume' ] || 0.5,\r
 107                                         autoplay  : false,\r
 108                                         startTime : 0,\r
 109                                         endTime   : X_Audio_Sprite_lengthSilence,\r
 110                                         loop      : true\r
 111                                 },\r
 112                                 k, i, v, track;\r
 113                         \r
 114                         n = n <= X_Audio_Sprite_maxTracks ? n : X_Audio_Sprite_maxTracks;\r
 115                         \r
 116                         for( k in setting ){\r
 117                                 v = setting[ k ];\r
 118                                 if( X_Type_isArray( v ) && v !== urls ){\r
 119                                         v = X_Object_cloneArray( v );\r
 120                                         for( i = v.length; i; ){\r
 121                                                 --i;\r
 122                                                 if( i !== 2 ) v[ i ] = X_AudioWrapper_timeStringToNumber( v[ i ] );\r
 123                                         };                                      \r
 124                                         if( v[ 2 ] ) bgms[ k ] = v;\r
 125                                         presets[ k ] = v;\r
 126                                 };\r
 127                         };\r
 128                         \r
 129                         for( i = 0; i < n; ++i ){\r
 130                                 if( video || ( i === 1 && X_Audio_Sprite_useVideoForMulti ) ){\r
 131                                         option[ 'useVideo' ] = true;\r
 132                                 };\r
 133                                 tracks.push( X.Audio( urls, X_Object_clone( option ) ) );\r
 134                         };\r
 135                         \r
 136                         tracks[ n - 1 ][ 'listenOnce' ]( [ X_EVENT_BACKEND_READY, X_EVENT_BACKEND_NONE ], this, X_Audio_Sprite_handleEvent );\r
 137                         \r
 138                         X_Audio_Sprite_instance.numTracks = n;\r
 139                 },\r
 140                 \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
 145                                 k;\r
 146                         \r
 147                         while( tracks.length ){\r
 148                                 tracks.pop()[ 'kill' ]();\r
 149                         };\r
 150                         \r
 151                         for( k in bgms ){\r
 152                                 delete bgms[ k ];\r
 153                         };\r
 154                         for( k in presets ){\r
 155                                 delete presets[ k ];\r
 156                         };\r
 157                         \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
 163                 },\r
 164                 \r
 165                 load : function(){\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
 172                                         this.pause( i );\r
 173                                 } else {\r
 174                                         X_Audio_getAudioWrapper( tracks[ i ] )[ '_rawObject' ].load();\r
 175                                 };\r
 176                         };\r
 177                 },\r
 178                 \r
 179                 /*\r
 180                  * @return uid Number\r
 181                  */\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
 188                                 track, i, k;\r
 189                         \r
 190                         if( preset ){\r
 191                                 if( bgms[ name ] ){\r
 192                                         if( name !== X_Audio_Sprite_TEMP.bgmName ){\r
 193                                                 // bgm変更\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
 198                                         };\r
 199                                         if( bgm ){\r
 200                                                 track = bgm;\r
 201                                         } else\r
 202                                         if( 1 < tracks.length ){\r
 203                                                 track = X_Audio_Sprite_TEMP.bgmTrack = X_Audio_Sprite_getTrackEnded();\r
 204                                         } else {\r
 205                                                 track = X_Audio_Sprite_TEMP.bgmTrack = tracks[ 0 ];\r
 206                                         };\r
 207                                         \r
 208                                         if( track[ 'listen' ]( [ X_EVENT_MEDIA_PLAYING, X_EVENT_MEDIA_BEFORE_LOOP ], this, X_Audio_Sprite_handleEvent ).isPlaying() ){\r
 209                                                 track\r
 210                                                         .state( {\r
 211                                                                 loop          : true,\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
 218                                                         } );\r
 219                                         } else {\r
 220                                                 track\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
 224                                         };\r
 225                                         \r
 226                                 } else {\r
 227                                         if( 1 < tracks.length ){\r
 228                                                 track = X_Audio_Sprite_getTrackEnded( X_Audio_Sprite_TEMP.bgmPlaying );\r
 229                                                 track\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
 233                                         } else {\r
 234                                                 // single track, iOS\r
 235                                                 if( bgm ){\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
 239                                                 };\r
 240                                                 track = tracks[ 0 ];\r
 241                                         \r
 242                                                 if( track[ 'listen' ]( [ X_EVENT_MEDIA_PLAYING, X_EVENT_MEDIA_BEFORE_LOOP ], this, X_Audio_Sprite_handleEvent ).isPlaying() ){\r
 243                                                         track\r
 244                                                                 .state( {\r
 245                                                                         loop          : true,\r
 246                                                                         looped        : false,\r
 247                                                                         startTime     : preset[ 0 ],\r
 248                                                                         endTime       : preset[ 1 ],\r
 249                                                                         loopStartTime : 0,\r
 250                                                                         loopEndTime   : X_Audio_Sprite_lengthSilence\r
 251                                                                 } );\r
 252                                                 } else {\r
 253                                                         track\r
 254                                                                 .play( preset[ 0 ], preset[ 1 ], true, 0, X_Audio_Sprite_lengthSilence );       \r
 255                                                 };\r
 256                                         };\r
 257                                 };\r
 258                                 return tracks.indexOf( track );\r
 259                         };\r
 260                         return -1;\r
 261                 },\r
 262                 \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
 269                         };\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
 272                         return this;\r
 273                 },\r
 274                 \r
 275                 seek : function( uid, position ){\r
 276                         var track = X_Audio_Sprite_TEMP.tracks[ uid ],\r
 277                                 end;\r
 278                         if( track ){\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
 282                         };\r
 283                         return this;\r
 284                 },\r
 285                 \r
 286                 volume : function( uid, opt_volume ){\r
 287                         var track, i;\r
 288                         // TODO uid = 0\r
 289                         if( uid === 0 ){\r
 290                                 if( opt_volume === undefined ){\r
 291                                         return X_Audio_Sprite_TEMP.volume;\r
 292                                 };\r
 293                                 for( i = X_Audio_Sprite_TEMP.tracks.length; i; ){\r
 294                                         X_Audio_Sprite_TEMP.tracks[ --i ].volume( opt_volume );\r
 295                                 };\r
 296                                 return this;\r
 297                         };\r
 298                         track = X_Audio_Sprite_TEMP.tracks[ uid ];\r
 299                         if( opt_volume === undefined ){\r
 300                                 return track ? track.volume() : -1;\r
 301                         };\r
 302                         track && track.volume( opt_volume );\r
 303                         return this;\r
 304                 },\r
 305                 \r
 306                 state : function( uid, opt_obj ){\r
 307                         var track = X_Audio_Sprite_TEMP.tracks[ uid ],\r
 308                                 state, start, end;\r
 309                         // TODO uid = 0\r
 310                         if( opt_obj === undefined ){\r
 311                                 // TODO pause\r
 312                                 if( track ){\r
 313                                         state = track.state();\r
 314                                         start = state.startTime;\r
 315                                         return {\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
 320                                         };\r
 321                                 };\r
 322                                 return { 'volume' : X_Audio_Sprite_TEMP.volume, 'playing' : false };\r
 323                         };\r
 324                         track && track.state( opt_obj );\r
 325                         return this;\r
 326                 }\r
 327 };\r
 328 \r
 329 function X_Audio_Sprite_handleEvent( e ){\r
 330         var i, tracks, track, _e;\r
 331         \r
 332         switch( e.type ){\r
 333                 case X_EVENT_BACKEND_READY :\r
 334                         _e = {\r
 335                                 'type'        : X_EVENT_BACKEND_READY,\r
 336                                 'source'      : e[ 'source' ],\r
 337                                 'backendName' : e[ 'backendName' ]\r
 338                         };\r
 339                         \r
 340                         if( X_Audio_Sprite_needTouchFirst ){\r
 341                                 if( e.backendName === 'Web Audio' ){\r
 342                                         _e[ 'needTouchForPlay' ] = true;\r
 343                                 } else {\r
 344                                         _e[ 'needTouchForLoad' ] = true;\r
 345                                 };\r
 346                         };\r
 347                         this[ 'asyncDispatch' ]( _e );\r
 348                         \r
 349                         e.target\r
 350                                 [ 'unlisten' ]( X_EVENT_BACKEND_NONE, this, X_Audio_Sprite_handleEvent )\r
 351                                 [ 'listenOnce' ]( X_EVENT_READY, this, X_Audio_Sprite_handleEvent );\r
 352 \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
 357                                 };\r
 358                         };\r
 359                         break;\r
 360 \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
 364                         break;\r
 365                 \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
 371                                 };\r
 372                                 e.target[ 'listenOnce' ]( X_EVENT_MEDIA_PLAYING, this, this.asyncDispatch, [ X_EVENT_READY ] ); // Android 標準ブラウザ\r
 373                                 return;\r
 374                         };\r
 375                         this[ 'asyncDispatch' ]( X_EVENT_READY );\r
 376                         break;\r
 377                         \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
 380                         break;\r
 381                 \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
 386                         } else {\r
 387                                 if( e.target.state().looped ){\r
 388                                         //this[ 'asyncDispatch' ]( X_EVENT_MEDIA_LOOPED ); // TODO uid\r
 389                                 } else {\r
 390                                         this[ 'asyncDispatch' ]( X_EVENT_MEDIA_ENDED ); // TODO uid\r
 391                                 };\r
 392                                 \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
 398                                 };\r
 399                         };\r
 400                         break;\r
 401                 \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
 407                         break;\r
 408 \r
 409                 case X_EVENT_VIEW_DEACTIVATE :\r
 410                         console.log( '■ デアクティブ' );\r
 411                         // track.pause();\r
 412                         tracks = X_Audio_Sprite_TEMP.tracks;\r
 413                         i      = tracks.length;\r
 414                         for( ; i; ){\r
 415                                 track = tracks[ --i ];\r
 416                                 track.isPlaying() && X_Audio_Sprite_TEMP.pauseTracks.push( track.pause() );\r
 417                         };\r
 418                         break;\r
 419                 \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
 422                         this.close();\r
 423                         break;\r
 424         };\r
 425 };\r