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_Audio_SLAudioWrapper,\r
  16         X_Audio_SLAudio_uid = 0;\r
  17 \r
  18 if( X.Pulgin.SilverlightEnabled ){\r
  19         \r
  20         // TODO X.Node.inherits\r
  21         X_Audio_SLAudioWrapper = X.EventDispatcher.inherits(\r
  22                 'X.AV.SilverlightAudioWrapper',\r
  23                 X.Class.POOL_OBJECT,\r
  24                 {\r
  25                         _isSilverlight  : true, // for X.EventDispatcher.listen\r
  26                 proxy           : null,\r
  27                 \r
  28                         startTime       : 0,\r
  29                         endTime         : -1,\r
  30                         loopStartTime   : -1,\r
  31                         loopEndTime     : -1,\r
  32                         seekTime        : -1,\r
  33                         duration        : 0,\r
  34                         \r
  35                         playing         : false,\r
  36                         error           : 0,                    \r
  37                         loop            : false,\r
  38                         looped          : false,\r
  39                         volume          : 0.5,\r
  40                 \r
  41                 _onload         : '',\r
  42                 _callback       : null,                 \r
  43                 xnodeObject     : null,\r
  44                         _source         : '',\r
  45                         _ended          : true,\r
  46                         _paused         : false,\r
  47                         _lastUserAction : '',\r
  48                         _lastState      : '',\r
  49                         _interval       : 0, // setInterval timer id\r
  50                         \r
  51                         Constructor : function( proxy, source, option ){\r
  52                                 \r
  53                                 if( !X_Audio_SLAudio_uid ){\r
  54                                         // source\r
  55                                         // X_Node_systemNode.create( 'script', { type : 'text/xaml', id : 'silverlightaudio' } )\r
  56                                         //      .text( '<Canvas xmlns="http://schemas.microsoft.com/client/2007" ' +\r
  57                                         // 'xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"></Canvas>');\r
  58                                         \r
  59                                         // html に以下を書いた                     \r
  60                                         // <script id="silverlightaudio" type="text/xaml"><Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"></Canvas></script>\r
  61                                 };\r
  62                                 /*\r
  63                                  *　［Silverlight 2］JavaScriptコードからSilverlightのオブジェクトを利用するには？［C#、VB］\r
  64                                  * http://www.atmarkit.co.jp/fdotnet/dotnettips/902slobjcallfromjs/slobjcallfromjs.html\r
  65                                  * このページのサンプルは sl5+firefox32 環境で動いている。xaml を js から利用する形ではなく、.xap を sl4 以下で作るのがよさそう.\r
  66                                  */\r
  67                                 \r
  68                                 // TODO embed\r
  69                                 this.proxy       = proxy;\r
  70                                 this._source     = source;\r
  71                         this._onload     = 'XAudioSilverlightOnLoad' + ( ++X_Audio_SLAudio_uid );\r
  72                                 this._callback   = window[ this._onload ] = X_Callback_create( this, this.onSLReady, [ option.autoplay ] );\r
  73                         this.xnodeObject = X_Node_body\r
  74                                 .create( 'object', {\r
  75                                                 type   : 'application/x-silverlight-2',\r
  76                                                 data   : 'data:application/x-silverlight-2,',\r
  77                                                 width  : 1,\r
  78                                                 height : 1\r
  79                                         })\r
  80                                         .html(\r
  81                                             '<param name="background" value="#00000000">' +      // transparent\r
  82                                             '<param name="windowless" value="true">' +\r
  83                                             '<param name="source" value="#silverlightaudio">' +  // XAML ID\r
  84                                             '<param name="onload" value="' + this._onload + '">' // + // bond to global\r
  85                                             //'<param value="2.0.31005.0" name="minRuntimeVersion">' +\r
  86                                             //'<param value="true" name="autoUpgrade">' +\r
  87                                             //'<param name="onerror" value="slerror">' // bond to global\r
  88                                         );\r
  89                                 X_AudioWrapper_updateStates( this, option );\r
  90         \r
  91                                 this.listenOnce( X.Event.KILL_INSTANCE );\r
  92                         },\r
  93                         \r
  94                         onSLReady : function( sender, autoplay ){\r
  95                                 if( !this._onload ) return;\r
  96                                 \r
  97                                 window[ this._onload ] = null;\r
  98                                 delete this._onload;\r
  99                                 X_Callback_correct( this._callback );\r
 100                                 delete this._callback;\r
 101 \r
 102                                 sender.children.add(\r
 103                                         sender.GetHost().\r
 104                                         content.\r
 105                                         CreateFromXaml(\r
 106                                         '<Canvas xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">' +\r
 107                                                 '<MediaElement x:Name="media" Source="' + this._source + '" Volume="' + this.volume + '" AutoPlay="false" />' +\r
 108                                         '</Canvas>'));\r
 109                 \r
 110                                 this._rawObject = sender.findName('media'); // x:Name='media'\r
 111                                 \r
 112                                 this.listen( [ 'MediaFailed', 'MediaOpened', 'MediaEnded', 'CurrentStateChanged' ] );\r
 113                                 \r
 114                                 autoplay && X.Timer.once( 100, this, this.play );\r
 115                         },\r
 116                         \r
 117                         handleEvent : function( e ){\r
 118                                 var lastState, currentState;\r
 119                                 \r
 120                                 switch( e.type ){\r
 121                                         \r
 122                                         case 'MediaFailed' :\r
 123                                                 this.error   = 4;\r
 124                                                 this.playing = false;\r
 125                                                 this._ended  = true;\r
 126                                                 this._paused = false;\r
 127                                                 this.proxy.dispatch( 'error' ); // open failed\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                                                 // TODO 'canplaythrough'\r
 134                                                 this.proxy.asyncDispatch( 'loadstart' );\r
 135                                 this.proxy.asyncDispatch( 'loadedmetadata' );\r
 136                                 this.proxy.asyncDispatch( 'loadeddata' );\r
 137                                 this.proxy.asyncDispatch( 'canplay' );\r
 138                                 this.proxy.asyncDispatch( 'canplaythrough' );\r
 139                                                 break;\r
 140 \r
 141                                         case 'MediaEnded' :                             \r
 142                                                 this.loop && this.playing && this.play();\r
 143                                                 break;\r
 144 \r
 145                                         case 'CurrentStateChanged' :\r
 146                                                 lastState        = this._lastState,\r
 147                                                 currentState = this._rawObject.CurrentState;\r
 148                                 \r
 149                                                 // ignore consecutive events or 'Closed' == 'Error'\r
 150                                                 if( lastState === currentState\r
 151                                                         || ( (lastState === 'Closed' || lastState === 'Error') && ( currentState === 'Closed' || currentState === 'Error') ) ){\r
 152                                                         return;\r
 153                                                 };\r
 154                                                 this._lastState = currentState; // update last state\r
 155                                 \r
 156                                                 switch( currentState ){\r
 157                                                         case 'Buffering' :\r
 158                                                         case 'Opening' :\r
 159                                                                 switch( this._lastUserAction ){\r
 160                                                                         case 'play' :\r
 161                                                                                 this.proxy.dispatch( 'waiting' );\r
 162                                                                                 break;\r
 163                                                                         case 'seek' :\r
 164                                                                                 this.proxy.dispatch( 'seeking' );\r
 165                                                                                 break;\r
 166                                                                         case 'pause' :\r
 167                                                                                 break;\r
 168                                                                 };\r
 169                                                                 break;\r
 170 \r
 171                                                         // media.play(none supported file) -> 'Error'\r
 172                                                         // media.play(file not found)     -> 'Closed'\r
 173                                                         // media.load -> 'Error'\r
 174                                                         case 'Error':\r
 175                                                         case 'Closed':\r
 176                                                                 this.error   = 4;\r
 177                                                                 this.playing = false;\r
 178                                                                 this._ended  = true;\r
 179                                                                 this._paused = false;\r
 180                                                                 this.proxy.dispatch( 'error' );\r
 181                                                                 break;\r
 182 \r
 183                                                         // userAction.pause()              -> MediaState('Paused') -> x\r
 184                                                         // userAction.stop()                    -> MediaState('Paused') -> x\r
 185                                                         // userAction.play() + file end -> MediaState('Paused') -> uueventfire('ended')\r
 186                                                         case 'Paused':\r
 187                                                                 this.playing = false;\r
 188                                                                 \r
 189                                                                 switch( this._lastUserAction ){\r
 190                                                                         case 'play': // play() -> file end -> event('ended')\r
 191                                                                         case 'seek':\r
 192                                                                                 this._ended  = true;\r
 193                                                                                 this._paused = false;\r
 194                                                                                 this.proxy.dispatch( 'ended' );\r
 195                                                                                 this._currentTime( this.startTime );\r
 196                                                                                 break;\r
 197                                                                         case 'pause':\r
 198                                                                                 this._ended  = false;\r
 199                                                                                 this._paused = true;\r
 200                                                                                 break;\r
 201                                                                         case 'stop':\r
 202                                                                                 this._ended  = true;\r
 203                                                                                 this._paused = false;\r
 204                                                                 };\r
 205                                                                 break;\r
 206 \r
 207                                                         // media.play -> 'Playing'\r
 208                                                         case 'Playing':\r
 209                                                                 this.error   = 0;\r
 210                                                                 this.playing = true;\r
 211                                                                 this._ended  = false;\r
 212                                                                 this._paused = false;\r
 213                                                                 this.proxy.dispatch( 'playing' );\r
 214                                                                 break;\r
 215 \r
 216                                                         // stop()\r
 217                                                         case 'Stopped':\r
 218                                                                 this.playing = false;\r
 219                                                                 this._ended  = true;\r
 220                                                                 this._paused = false;\r
 221                                                                 this._currentTime( this.startTime );\r
 222                                                                 break;\r
 223                                                 };\r
 224                                                 break;\r
 225 \r
 226                                         case X.Event.KILL_INSTANCE :\r
 227                                                 if( this._onload ){\r
 228                                                         // window への delete に ie5 は対応しないが、そもそも ie5 は Silverlight に非対応\r
 229                                                         delete window[ this._onload ];\r
 230                                                         delete this._onload;\r
 231                                                         X_Callback_correct( this._callback );\r
 232                                                 };\r
 233                                                 this.xnodeObject.destroy();\r
 234                                                 break;\r
 235                                 };\r
 236                         },\r
 237                         \r
 238                         close : function(){\r
 239                                 this.playing && this.pause();\r
 240                                 this.proxy.dispatch( 'ended' );\r
 241                                 this.kill();\r
 242                         },\r
 243                         \r
 244                         // SilverlightAudio.play\r
 245                         play : function(){\r
 246                                 var begin, end, halfway;\r
 247                                 \r
 248                                 // もし kill 後に autoplayTimer で呼ばれても、_closed==true なので平気\r
 249                                 if( this.error ) return;\r
 250                                 \r
 251                                 this._lastUserAction = 0 <= this.seekTime ? 'seek' : 'play';\r
 252                                 \r
 253                                 end   = X_AudioWrapper_getEndTime( this );\r
 254                                 begin = X_AudioWrapper_getStartTime( this, end, true );\r
 255                                 \r
 256                                 console.log( '[SLAudio] play ' + begin + ' -> ' + end );\r
 257                                 \r
 258                             this._rawObject.Volume = this.volume;\r
 259                             this._currentTime( begin );\r
 260                             \r
 261                             if( !this.playing ){\r
 262                                     this._rawObject.play();\r
 263                             this.proxy.dispatch( 'play' );\r
 264                             \r
 265                             this.playing = true;\r
 266                             };\r
 267                     \r
 268                     halfway = end < this.duration;\r
 269                     this._timerID && X.Timer.remove( this._timerID );\r
 270                     \r
 271                 if( halfway ){\r
 272                                         this._timerID = X.Timer.once( end - begin, this, this._onEnded );\r
 273                 } else {\r
 274                         delete this._timerID;\r
 275                 };\r
 276                 \r
 277                                 if( !this._interval ){\r
 278                                         this._interval = X.Timer.add( 1000, 0, this, this._onInterval );\r
 279                                 };\r
 280                         },\r
 281                                 \r
 282                                 _onInterval : function(){\r
 283                                         if( !this.playing ){\r
 284                                                 delete this._interval;\r
 285                                                 return X_Callback_UN_LISTEN;\r
 286                                         };\r
 287                                         this.proxy.dispatch( 'timeupdate' );\r
 288                                 },\r
 289                                 \r
 290                                 _onEnded : function(){\r
 291                                         var time;\r
 292                                         delete this._timerID;\r
 293                                         \r
 294                             if( this.playing ){\r
 295                                 \r
 296                                 time = this._rawObject.Position.Seconds * 1000 - X_AudioWrapper_getEndTime( this ) | 0;\r
 297                                 if( time < -16 ){\r
 298                                         console.log( '> onEnd ' + time );\r
 299                                         this._timerID = X.Timer.once( -time, this, this._onEnded );\r
 300                                         return;\r
 301                                 };\r
 302                                 \r
 303                                 if( this.loop ){\r
 304                                         this.looped = true;\r
 305                                         this.play();\r
 306                                         this.proxy.dispatch( 'looped' );\r
 307                                 } else {\r
 308                                         this.pause();\r
 309                                         this.proxy.dispatch( 'ended' );                         \r
 310                                 };\r
 311                             };\r
 312                                 },\r
 313                         \r
 314                         // SilverlightAudio.pause\r
 315                         pause : function(){\r
 316                                 if( !this.error ){\r
 317                                         this._lastUserAction = 'pause';\r
 318                                         this.playing = false;\r
 319                                         this._paused = true;\r
 320                                         this._ended  = false;\r
 321                                         this._rawObject.pause();\r
 322                                         this.proxy.dispatch( 'pause' );\r
 323                                 };\r
 324                         },\r
 325                         \r
 326                         // SilverlightAudio.state\r
 327                         state : function( obj ){ // @return Hash: { loop, error, paused, ended, source, duration }\r
 328                                 var result, end;\r
 329                                 \r
 330                                 if( obj === undefined ){\r
 331                                     return {\r
 332                                         startTime     : this.startTime,\r
 333                                         endTime       : this.endTime < 0 ? this.duration : this.endTime,\r
 334                                         loopStartTime : this.loopStartTime < 0 ? this.startTime : this.loopStartTime,\r
 335                                         loopEndTime   : this.loopEndTime < 0 ? ( this.endTime || this.duration ) : this.loopEndTime,\r
 336                                         \r
 337                                         currentTime   : this._rawObject.Position.Seconds * 1000,\r
 338                                         \r
 339                                         \r
 340                                         loop          : this.loop,\r
 341                                         looped        : this.looped,\r
 342                                         volume        : this.volume,\r
 343                                         error         : this.error,\r
 344                                         playing       : this.playing,\r
 345                                         duration      : this.duration // this._rawObject.NaturalDuration.Seconds;\r
 346                                     };\r
 347                                 };\r
 348                         \r
 349                                 result = X_AudioWrapper_updateStates( this, obj );\r
 350                             \r
 351                                 if( result & 2 ){ // seek\r
 352                         this.play();\r
 353                                 } else {\r
 354                                         if( result & 1 ){\r
 355                                                 end     = X_AudioWrapper_getEndTime( this );\r
 356                                                 halfway = end < this.duration;\r
 357                                                 this._timerID && X.Timer.remove( this._timerID );\r
 358                                                 \r
 359                                                 if( halfway ){\r
 360                                                         this._timerID = X.Timer.once( end - this._rawObject.Position.Seconds * 1000, this, this._onEnded );\r
 361                                                 } else {\r
 362                                                         delete this._timerID;\r
 363                                                 };\r
 364 \r
 365                                         };\r
 366                                         if( result & 4 ){\r
 367                                this._rawObject.Volume = this.volume;\r
 368                                         };\r
 369                                 };\r
 370                         },\r
 371                         \r
 372                                 // SilverlightAudio.currentTime\r
 373                                 _currentTime : function( time ){ // @param Number: time\r
 374                                         var position = this._rawObject.Position; // [!] create instance\r
 375         \r
 376                                         position.Seconds = time / 1000 | 0; // set current time\r
 377                                 \r
 378                                         this._rawObject.Position = position; // [!] reattach instance\r
 379                                 }\r
 380 \r
 381                 }\r
 382         );\r
 383 \r
 384         function slerror(){\r
 385                 alert( 'slerror' );\r
 386         };\r
 387 \r
 388         X_Audio_BACKENDS.push( {\r
 389                 backendName : 'Silverlight Audio',\r
 390 \r
 391                 detect : function( proxy, source, ext ){\r
 392                         var ok = ext === 'mp3' || ext === 'wma' || ext === 'wav';\r
 393                         proxy.asyncDispatch( ok ? 'support' : 'nosupport' );                            \r
 394                 },\r
 395                 \r
 396                 klass : X_Audio_SLAudioWrapper\r
 397                 \r
 398         } );\r
 399 \r
 400 };