0.6.x/js/07_audio/03_XSilverlightAudio.js

   1 \r
   2 /*\r
   3  * original : uupaa-js SilverlightAudio.js\r
   4  * https://code.google.com/p/uupaa-js/source/browse/trunk/0.8/src/Audio/SilverlightAudio.js?r=568\r
   5  *\r
   6  * Silverlight 4 → 5における不具合の状況\r
   7  *　http://www.slideshare.net/wakabayashiy/silverlight-4-5 \r
   8  * \r
   9  * IE10以降でSilverlightでF5押したらフリーズする不具合と対処\r
  10  * http://katsuyuzu.hatenablog.jp/entry/2014/01/11/003550\r
  11  * \r
  12  * SilverlLight5 ie6&7(ietester,winxp), ie8(winxp) で動作確認。firefox32 では動作しない。(4以下の方がよい？)\r
  13  */\r
  14 \r
  15 var X_SLAudio,\r
  16         X_SLAudio_uid = 0;\r
  17 \r
  18 if( X_Pulgin_SILVER_LIGHT_VERSION ){\r
  19         \r
  20         X_TEMP.slaudioInit = function(){\r
  21                 //\r
  22                 // http://blog.yuhiisk.com/archive/2014/12/20/dynamic-loading-and-complete-processing-of-script.html\r
  23                 var s;\r
  24                 \r
  25                 if( X_UA[ 'IE' ] < 9 ){\r
  26                         s = document.createElement( '<script id="silverlightaudio" type="text/xaml"></script>' );\r
  27                 } else {\r
  28                         s = document.createElement( 'script' );\r
  29                         s.id   = 'silverlightaudio';\r
  30                         s.type = 'text/xaml';\r
  31                 };\r
  32                 \r
  33                 X_elmHead.appendChild( s );\r
  34                 s.text = '<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"></Canvas>';\r
  35                 \r
  36                 delete X_TEMP.slaudioInit;\r
  37         };\r
  38         \r
  39         // X.Node.inherits はできない。_rawObject は <object> でなく silverlight\r
  40         X_SLAudio = X_AudioBase[ 'inherits' ](\r
  41                 'X.SilverlightAudio',\r
  42                 X_Class.POOL_OBJECT,\r
  43                 {\r
  44                         '_rawType'      : X_EventDispatcher_EVENT_TARGET_SILVER_LIGHT,\r
  45 \r
  46                 _onload         : '',\r
  47                 _callback       : null,                 \r
  48                 xnodeObject     : null,\r
  49                         _source         : '',\r
  50                         _ended          : true,\r
  51                         _paused         : false,\r
  52                         _lastUserAction : '',\r
  53                         _lastState      : '',\r
  54                         _interval       : 0, // setInterval timer id\r
  55                         \r
  56                         'Constructor' : function( disatcher, source, option ){\r
  57                                 !X_SLAudio_uid && X_TEMP.slaudioInit();\r
  58                                 \r
  59                                 /*\r
  60                                  *　［Silverlight 2］JavaScriptコードからSilverlightのオブジェクトを利用するには？［C#、VB］\r
  61                                  * http://www.atmarkit.co.jp/fdotnet/dotnettips/902slobjcallfromjs/slobjcallfromjs.html\r
  62                                  * このページのサンプルは sl5+firefox32 環境で動いている。xaml を js から利用する形ではなく、.xap を sl4 以下で作るのがよさそう.\r
  63                                  */\r
  64                                 this.disatcher   = disatcher || this;\r
  65                                 this._source     = source;\r
  66                                 // X.Audio._slOnload_ は不可\r
  67                         this._onload     = 'XAudioSilverlightOnLoad' + ( ++X_SLAudio_uid );\r
  68                                 this._callback   = window[ this._onload ] = X_Closure_create( this, this.onSLReady );\r
  69                                 \r
  70                                 // TODO embed\r
  71                         this.xnodeObject = X_Node_body\r
  72                                 [ 'create' ]( 'object', {\r
  73                                                 type   : 'application/x-silverlight-2',\r
  74                                                 data   : 'data:application/x-silverlight-2,',\r
  75                                                 width  : 1,\r
  76                                                 height : 1\r
  77                                         })\r
  78                                         [ 'html' ](\r
  79                                             '<param name="background" value="#00000000">' +      // transparent\r
  80                                             '<param name="windowless" value="true">' +\r
  81                                             '<param name="source" value="#silverlightaudio">' +  // XAML ID\r
  82                                             '<param name="onload" value="' + this._onload + '">' // + // bond to global\r
  83                                             //'<param value="2.0.31005.0" name="minRuntimeVersion">' +\r
  84                                             //'<param value="true" name="autoUpgrade">' +\r
  85                                             //'<param name="onerror" value="slerror">' // bond to global\r
  86                                         );\r
  87                                 this.setState( option );\r
  88         \r
  89                                 this[ 'listenOnce' ]( X_EVENT_KILL_INSTANCE );\r
  90                         },\r
  91                         \r
  92                                 onSLReady : function( sender ){\r
  93                                         if( !this._onload ) return;\r
  94                                         \r
  95                                         window[ this._onload ] = null;\r
  96                                         delete this._onload;\r
  97                                         X_Closure_correct( this._callback );\r
  98                                         delete this._callback;\r
  99         \r
 100                                         sender[ 'children' ][ 'add' ](\r
 101                                                 sender[ 'GetHost' ]()[ 'content' ][ 'CreateFromXaml' ](\r
 102                                                 '<Canvas xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">' +\r
 103                                                         '<MediaElement x:Name="media" Source="' + this._source + '" Volume="' + this.gain + '" AutoPlay="false" />' +\r
 104                                                 '</Canvas>'));\r
 105                         \r
 106                                         this[ '_rawObject' ] = sender[ 'findName' ]( 'media' ); // x:Name='media'\r
 107         \r
 108                                         this[ 'listen' ]( [ 'MediaFailed', 'MediaOpened', 'MediaEnded', 'CurrentStateChanged' ] );\r
 109                                 },\r
 110                         \r
 111                         handleEvent : function( e ){\r
 112                                 var lastState, currentState;\r
 113                                 \r
 114                                 console.log( e.type );\r
 115                                 switch( e.type ){\r
 116                                         \r
 117                                         case 'MediaFailed' :\r
 118                                                 this.error   = 4;\r
 119                                                 this.playing = false;\r
 120                                                 this._ended  = true;\r
 121                                                 this._paused = false;\r
 122                                                 if( this.playing ){\r
 123                                                         //X_Timer_once( 16, this, this.actualPlay );\r
 124                                                 } else {\r
 125                                                         this.disatcher[ 'dispatch' ]( X_EVENT_ERROR ); // open failed\r
 126                                                         this[ 'kill' ]();                                                       \r
 127                                                 };\r
 128                                                 break;\r
 129 \r
 130                                         case 'MediaOpened' :\r
 131                                                 // http://msdn.microsoft.com/ja-jp/library/bb979710(VS.95).aspx\r
 132                                                 this.duration = this[ '_rawObject' ][ 'NaturalDuration' ][ 'Seconds' ] * 1000;\r
 133                                 this.disatcher[ 'asyncDispatch' ]( X_EVENT_READY );\r
 134                                                 break;\r
 135 \r
 136                                         case 'MediaEnded' :\r
 137                                                 //console.log( ' > ' +  this.autoLoop + ' error:' + this.error );\r
 138                                                 //this.autoLoop && /* this.playing && */ this.actualPlay();\r
 139                                                 this._ended   = true;\r
 140                                                 break;\r
 141 \r
 142                                         case 'CurrentStateChanged' :\r
 143                                                 lastState        = this._lastState,\r
 144                                                 currentState = this[ '_rawObject' ][ 'CurrentState' ];\r
 145                                 \r
 146                                                 // ignore consecutive events or 'Closed' == 'Error'\r
 147                                                 if( lastState === currentState\r
 148                                                         || ( (lastState === 'Closed' || lastState === 'Error') && ( currentState === 'Closed' || currentState === 'Error') ) ){\r
 149                                                         return;\r
 150                                                 };\r
 151                                                 this._lastState = currentState; // update last state\r
 152                                 \r
 153                                                 console.log( ' > ' + currentState + ' - ' + this._lastUserAction );\r
 154                                 \r
 155                                                 switch( currentState ){\r
 156                                                         case 'Buffering' :\r
 157                                                         case 'Opening' :\r
 158                                                                 switch( this._lastUserAction ){\r
 159                                                                         case 'play' :\r
 160                                                                                 this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_WAITING );\r
 161                                                                                 break;\r
 162                                                                         case 'seek' :\r
 163                                                                                 this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_SEEKING );\r
 164                                                                                 break;\r
 165                                                                         case 'pause' :\r
 166                                                                                 break;\r
 167                                                                 };\r
 168                                                                 break;\r
 169 \r
 170                                                         // media.play(none supported file) -> 'Error'\r
 171                                                         // media.play(file not found)     -> 'Closed'\r
 172                                                         // media.load -> 'Error'\r
 173                                                         case 'Error':\r
 174                                                                 this.error   = 4;\r
 175                                                         case 'Closed':\r
 176                                                                 this.error   = this.error || 2;\r
 177                                                                 this.playing = false;\r
 178                                                                 this._ended  = true;\r
 179                                                                 this._paused = false;\r
 180                                                                 this.disatcher[ 'dispatch' ]( X_EVENT_ERROR );\r
 181                                                                 this[ 'kill' ]();\r
 182                                                                 break;\r
 183 \r
 184                                                         // userAction.pause()              -> MediaState('Paused') -> x\r
 185                                                         // userAction.stop()                    -> MediaState('Paused') -> x\r
 186                                                         // userAction.play() + file end -> MediaState('Paused') -> uueventfire('ended')\r
 187                                                         case 'Paused':\r
 188                                                         \r
 189                                                                 this.playing && X_Timer_once( 16, this, this.actualPlay );\r
 190                                                                 //this.playing = false;\r
 191                                                                 \r
 192                                                                 switch( this._lastUserAction ){\r
 193                                                                         case 'play': // play() -> file end -> event('ended')\r
 194                                                                         case 'seek':\r
 195                                                                                 //this.seekTime = 0;\r
 196                                                                                 this._ended  = true;\r
 197                                                                                 this._paused = false;\r
 198                                                                                 //this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_ENDED );\r
 199                                                                                 //this.setCurrentTime( this.startTime );\r
 200                                                                                 break;\r
 201                                                                         case 'pause':\r
 202                                                                                 this._ended  = false;\r
 203                                                                                 this._paused = true;\r
 204                                                                                 break;\r
 205                                                                         case 'stop':\r
 206                                                                                 this._ended  = true;\r
 207                                                                                 this._paused = false;\r
 208                                                                 };\r
 209                                                                 break;\r
 210 \r
 211                                                         // media.play -> 'Playing'\r
 212                                                         case 'Playing':\r
 213                                                                 this.error   = 0;\r
 214                                                                 //this.playing = true;\r
 215                                                                 this._ended  = false;\r
 216                                                                 this._paused = false;\r
 217                                                                 this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_PLAYING );\r
 218                                                                 break;\r
 219 \r
 220                                                         // stop()\r
 221                                                         case 'Stopped':\r
 222                                                                 this.playing && X_Timer_once( 16, this, this.actualPlay );\r
 223                                                                 \r
 224                                                                 //this.playing = false;\r
 225                                                                 //this._ended  = true;\r
 226                                                                 //this._paused = false;\r
 227                                                                 //this.setCurrentTime( this.startTime );\r
 228                                                                 break;\r
 229                                                 };\r
 230                                                 break;\r
 231 \r
 232                                         case X_EVENT_KILL_INSTANCE :\r
 233                                                 this.playing && this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_ENDED );\r
 234                                                 this.playing && this.actualPause();\r
 235                                         \r
 236                                                 if( this._onload ){\r
 237                                                         // window への delete に ie5 は対応しないが、そもそも ie5 は Silverlight に非対応\r
 238                                                         window[ this._onload ] = null;\r
 239                                                         delete this._onload;\r
 240                                                         X_Closure_correct( this._callback );\r
 241                                                 };\r
 242                                                 this.xnodeObject[ 'kill' ]();\r
 243                                                 break;\r
 244                                 };\r
 245                         },\r
 246                         \r
 247                         // SilverlightAudio.play\r
 248                         actualPlay : function(){\r
 249                                 var begin, offset, end;\r
 250 \r
 251                                 // もし kill 後に autoplayTimer で呼ばれても、_closed==true なので平気\r
 252                                 if( this.error ) return;\r
 253                                 if( !this.duration ){\r
 254                                         this._playReserved = true;\r
 255                                         return;\r
 256                                 };\r
 257                                 \r
 258                                 this._lastUserAction = 0 <= this.seekTime ? 'seek' : 'play';\r
 259                                 \r
 260                                 end   = X_Audio_getEndTime( this );\r
 261                                 begin = X_Audio_getStartTime( this, end, true ) | 0;\r
 262 \r
 263                                 // 1 秒以下は指定できないため四捨五入\r
 264                                 begin = ( begin / 1000 | 0 ) * 1000 + ( 500 < begin % 1000 ? 1000 : 0 ); \r
 265 \r
 266                             this[ '_rawObject' ][ 'Volume' ] = this.gain;\r
 267                             \r
 268                             this.setCurrentTime( this._beginTime = begin );\r
 269                             \r
 270                             console.log( '[play] ' + begin + ' -> ' + end );\r
 271                             \r
 272                             /*\r
 273                             if( offset = begin - this.getActualCurrentTime() ){\r
 274                                 this.setCurrentTime( begin + offset );\r
 275                                 console.log( ' [差補正] ' + offset + ' ct:' + this.getActualCurrentTime() + ' begin:' + begin  );\r
 276                                 this._beginTime = begin = this.getActualCurrentTime();\r
 277                             };*/\r
 278                             \r
 279                             if( !this.playing || this._ended ){\r
 280                                 console.log( '[play] play()' + begin + ' -> ' + end );\r
 281                                     this[ '_rawObject' ].play();\r
 282                             this.playing = true;\r
 283                             this._ended  = false;\r
 284                             };\r
 285                     \r
 286                     this._timerID && X_Timer_remove( this._timerID );\r
 287                     \r
 288                 this._timerID = X_Timer_once( end - begin, this, this._onEnded );\r
 289                 \r
 290                                 if( !this._interval ){\r
 291                                         this._interval = X_Timer_add( 1000, 0, this, this._onInterval );\r
 292                                 };\r
 293                         },\r
 294                                 \r
 295                                 _onInterval : function(){\r
 296                                         if( !this.playing ){\r
 297                                                 delete this._interval;\r
 298                                                 return X_CALLBACK_UN_LISTEN;\r
 299                                         };\r
 300                                         this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_PLAYING );\r
 301                                 },\r
 302                                 \r
 303                                 _onEnded : function(){\r
 304                                         var time, end;\r
 305                                         delete this._timerID;\r
 306                                         \r
 307                             if( this.playing ){\r
 308                                 //console.log( '> end ' + X_Audio_getEndTime( this ) + ' current:' + ( this.getActualCurrentTime() ) );\r
 309                                 time = this.getActualCurrentTime();\r
 310                                 \r
 311                                 if( time < this._beginTime ){\r
 312                                         console.log( '== waiting ' + time + ' < begin:' + this._beginTime );\r
 313                                         this.setCurrentTime( this._beginTime );\r
 314                                         time = this.getActualCurrentTime();\r
 315                                         console.log( '    > ' + time );\r
 316                                         this._ended && this[ '_rawObject' ].play();\r
 317                                         this._ended = false;\r
 318                                         this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_WAITING );\r
 319                                         this._timerID = X_Timer_once( X_Audio_getEndTime( this ) - time, this, this._onEnded );\r
 320                                         return;\r
 321                                 };\r
 322                                 \r
 323                                 time -= X_Audio_getEndTime( this );\r
 324                                 if( time < -50 ){\r
 325                                         console.log( ' > まだ終わらない ' + time );\r
 326                                         this._ended && this[ '_rawObject' ].play();\r
 327                                         this._ended = false;\r
 328                                         this._timerID = X_Timer_once( -time, this, this._onEnded );\r
 329                                         return;\r
 330                                 };\r
 331                                 \r
 332                                 if( this.autoLoop ){\r
 333                                         console.log( '========= loop?' );\r
 334                                         if( !( this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_BEFORE_LOOP ) & X_CALLBACK_PREVENT_DEFAULT ) ){\r
 335                                                 console.log( '========== loopした' );\r
 336                                                 this.looped = true;\r
 337                                                 this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_LOOPED );\r
 338                                                 this.actualPlay();\r
 339                                         };\r
 340                                 } else {\r
 341                                         console.log( '========= pause' );\r
 342                                         this.actualPause();\r
 343                                         this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_ENDED );\r
 344                                 };\r
 345                             };\r
 346                                 },\r
 347                         \r
 348                         // SilverlightAudio.pause\r
 349                         actualPause : function(){\r
 350                                 if( this.error ) return;\r
 351                                 \r
 352                                 this._lastUserAction = 'pause';\r
 353                                 this.playing  = false;\r
 354                                 this._paused  = true;\r
 355                                 this._ended   = false;\r
 356                                 \r
 357                                 this[ '_rawObject' ].pause();\r
 358                         },\r
 359 \r
 360                         getActualCurrentTime : function(){\r
 361                                 return this[ '_rawObject' ][ 'Position' ][ 'Seconds' ] * 1000 | 0;\r
 362                         },\r
 363                         \r
 364                         afterUpdateState : function( result ){\r
 365                                 var end, halfway;\r
 366                                 \r
 367                                 if( result & 3 ){ // seek\r
 368                         this.actualPlay();\r
 369                                 } else\r
 370                                 if( result & 1 ){\r
 371                                         end     = X_Audio_getEndTime( this );\r
 372                                         halfway = end < this.duration;\r
 373                                         this._timerID && X_Timer_remove( this._timerID );\r
 374                                         \r
 375                                         if( halfway ){\r
 376                                                 this._timerID = X_Timer_once( end - this.getActualCurrentTime(), this, this._onEnded );\r
 377                                         } else {\r
 378                                                 delete this._timerID;\r
 379                                         };\r
 380                                 } else\r
 381                                 if( result & 4 ){\r
 382                        this[ '_rawObject' ][ 'Volume' ] = this.gain;\r
 383                                 };                      \r
 384                         },\r
 385                         \r
 386                                 // SilverlightAudio.currentTime\r
 387                                 setCurrentTime : function( time ){ // @param Number: time\r
 388                                         var position = this[ '_rawObject' ][ 'Position' ]; // [!] create instance\r
 389         \r
 390                                         position[ 'Seconds' ] = time / 1000 | 0; // set current time\r
 391                                 \r
 392                                         this[ '_rawObject' ][ 'Position' ] = position; // [!] reattach instance\r
 393                                 }\r
 394 \r
 395                 }\r
 396         );\r
 397 \r
 398         /*\r
 399         function slerror(){\r
 400                 alert( 'slerror' );\r
 401         }; */\r
 402 \r
 403         X_Audio_BACKENDS.push( {\r
 404                 backendID   : 8,\r
 405                 \r
 406                 backendName : 'Silverlight',\r
 407 \r
 408                 canPlay : {\r
 409                         'mp3' : true,\r
 410                         'wma' : true,\r
 411                         'wav' : true\r
 412                 },\r
 413 \r
 414                 detect : function( proxy, source, ext ){\r
 415                         // TODO source = .mp3#CBR\r
 416                         // 得意度で返す\r
 417                         proxy[ 'asyncDispatch' ]( { type : X_EVENT_COMPLETE, canPlay : ext === 'mp3' || ext === 'wma' || ext === 'wav' } );                             \r
 418                 },\r
 419                 \r
 420                 klass : X_SLAudio\r
 421                 \r
 422         } );\r
 423 \r
 424 };