0.6.x/js/07_audio/02_XHTMLAudio.js

   1 \r
   2 /*\r
   3  * original : uupaa-js HTML5Audio.js\r
   4  * https://code.google.com/p/uupaa-js/source/browse/trunk/0.8/src/Audio/HTML5Audio.js?r=568\r
   5  */\r
   6 \r
   7 var X_Audio_HTML5AudioWrapper, X_Audio_rawAudio;\r
   8         \r
   9 \r
  10 if( window.HTMLAudioElement ){\r
  11         \r
  12         X_Audio_HTML5AudioWrapper = X.EventDispatcher.inherits(\r
  13                 'X.AV.HTML5AudioWrapper',\r
  14                 X.Class.POOL_OBJECT,\r
  15                 {\r
  16                         \r
  17                         proxy           : null,\r
  18                         \r
  19                         startTime       : 0,\r
  20                         endTime         : -1,\r
  21                         loopStartTime   : -1,\r
  22                         loopEndTime     : -1,\r
  23                         seekTime        : -1,\r
  24                         duration        : 0,\r
  25                         \r
  26                         playing         : false,\r
  27                         error           : 0,                    \r
  28                         loop            : false,\r
  29                         looped          : false,\r
  30                         volume          : 0.5,\r
  31 \r
  32             _timerID        : 0,\r
  33                         \r
  34                         _closed         : true,\r
  35                         \r
  36                         Constructor : function( proxy, source, option ){\r
  37                                 this.proxy   = proxy;\r
  38                                 this._closed = false;\r
  39                                 \r
  40                                 X_AudioWrapper_updateStates( this, option );\r
  41                                 \r
  42                                 // TODO use video document.createElement('video')\r
  43                                 this._rawObject = X_Audio_rawAudio || new Audio( source );// X_Doc_create( 'audio', { src : source } ).appendToRoot();//( X.X_Node_systemNode );\r
  44                                 \r
  45                                 this.listen( [\r
  46                                                 'loadstart', 'load', 'progress', 'suspend', 'abort', 'error', 'emptied', 'stalled', 'play', 'pause', 'loadedmetadata',\r
  47                                                 'loadeddata', 'waiting', 'playing', 'canplay', 'canplaythrough', 'seeking', 'seeked', 'timeupdate', 'ended',\r
  48                                                 'ratechange', 'durationchange', 'volumechange' ], this.handleEventProxy );                              \r
  49                                 \r
  50                                 if( X_Audio_rawAudio === this._rawObject ){\r
  51                                         X_Audio_rawAudio.src = source;\r
  52                                         X_Audio_rawAudio.load(); // 要る?\r
  53                                         X_Audio_rawAudio = null;\r
  54                                 };\r
  55 \r
  56                                 //document.body.appendChild( this._rawObject );\r
  57 \r
  58                                 this._rawObject.autoplay = false;\r
  59                                 option.autoplay && X.Timer.once( 100, this, this.play );\r
  60                                 \r
  61                                 this.listenOnce( X.Event.KILL_INSTANCE );\r
  62                         },\r
  63                         \r
  64                         handleEvent : function( e ){\r
  65                                 switch( e.type ){\r
  66 \r
  67                                         case X.Event.KILL_INSTANCE :\r
  68                                                 break;\r
  69                                 };\r
  70                         },\r
  71                         /*\r
  72                          * http://uguisu.skr.jp/html/table3.html\r
  73                          */\r
  74                         handleEventProxy : function( e ){\r
  75                                 //console.log(e.type);\r
  76                                 \r
  77                                 switch( e.type ){\r
  78                                         case 'loadstart' :      //      ブラウザがコンテンツの検索を開始した場合に発生\r
  79                                                 break;\r
  80                                         case 'progress' :       //      ブラウザがコンテンツの取得を実行した場合に発生\r
  81                                                 //console.log( e.loaded + ' ' + e.total * 100 + '%' );\r
  82                                                 this._rawObject.duration && console.log( this._rawObject.buffered.end(0) / this._rawObject.duration * 100 + '%' );\r
  83                                                 break;\r
  84                                         case 'loadedmetadata' : //      ブラウザがメディアリソースの長さと寸法を判定した場合に発生\r
  85                                         case 'loadeddata' :     //      コンテンツの表示を現在の再生位置で初めて行えるようになった場合に発生\r
  86                                         case 'canplay' :        //      今すぐに再生を再開できるが、バッファリングが不十分でコンテンツを最後まで表示できないと予測している場合に発生\r
  87                                         case 'canplaythrough' : //      今すぐに再生を開始してもバッファリングで停止することなく最後まで表示できると予測している場合に発生\r
  88                                                 this.duration = this._rawObject.duration * 1000;\r
  89                                                 //console.log( this.duration );\r
  90                                                 break;\r
  91         \r
  92                                         case 'suspend' :        //      ブラウザが意図的にコンテンツの取得を現在行っていない場合に発生（ダウンロードは未完了）\r
  93                                         case 'abort' :          //      ダウンロードの完了前にコンテンツの取得を停止した場合に発生（この停止はエラーによるものではない）\r
  94                                         case 'error' :          //      コンテンツの取得実行中にエラーが発生した場合に発生\r
  95                                         case 'emptied' :        //      読み込み中に致命的なエラーが発生したか、実行状態ででload()メソッドが実行された場合に発生\r
  96                                         case 'stalled' :        //      ブラウザがコンテンツの取得を試みたが、データがまだ用意されていない場合に発生\r
  97                                         case 'play' :           //      再生が開始された。play()メソッドからの復帰後に発生する場合に発生\r
  98                                         case 'pause' :          //      再生が一時停止された。pauseメソッドからの復帰後に発生する場合に発生\r
  99 \r
 100                                         case 'waiting' :        //      次のフレームが利用不可のため再生を停止したが、そのフレームがやがて利用可能になると想定している場合に発生\r
 101                                         case 'playing' :        //      再生が開始された場合に発生\r
 102 \r
 103                                         case 'seeking' :        //      シークがtrueに変化し、イベントを発生させるのに十分な時間がシーク操作にかかっている場合に発生\r
 104                                         case 'seeked' :         //      シークがfalseに変化した場合に発生\r
 105                                         case 'timeupdate' :     //      通常の再生が行われ現在の再生位置の変化が起こった場合に発生\r
 106                                                 break;\r
 107                                         \r
 108                                         case 'ended' :\r
 109                                                 if( !this._closed && this.loop ){\r
 110                                                         this.looped = true;\r
 111                                                         this.play();\r
 112                                                         this.proxy.dispatch( 'looped' );\r
 113                                                 } else {\r
 114                                                         this._timerID && X.Timer.remove( this._timerID );\r
 115                                                         delete this._timerID;\r
 116                                                         delete this.playing;\r
 117                                                 };\r
 118                                                 break;\r
 119         \r
 120                                         case 'ratechange' :     // defaultPlaybackRate属性とplaybackRate属性のどちらかが更新された場合に発生\r
 121                                         case 'durationchange' : // duration属性が更新された場合に発生\r
 122                                         case 'volumechange' :   // volume属性とmuted属性のどちらかが変化した場合に発生\r
 123                                 };\r
 124                                 //console.log( 'html5 ' + e.type + ' ' + ( this.proxy._listeners && this.proxy._listeners[ e.type ] && this.proxy._listeners[ e.type ].length ) );\r
 125                                 //e.type === 'canplaythrough' && console.dir( e );\r
 126                                 this.proxy.dispatch( e );\r
 127                         },\r
 128                         \r
 129                         close : function(){\r
 130                                 // 【javascript】モバイル向けブラウザでも音を鳴らしたい【WebAudio】\r
 131                                 // http://ingaouhou.com/archives/3633\r
 132                                 // ・使い終わったインスタンスはload()しておくとやや安定\r
 133                                 this.playing && this.pause();\r
 134                                 delete this._closed;\r
 135                                 \r
 136                                 this._rawObject.src = '';\r
 137                                 this._rawObject.load();\r
 138                         },\r
 139                         \r
 140                         play : function(){\r
 141                                 var begin, end, halfway;\r
 142                                 \r
 143                                 // もし kill 後に autoplayTimer で呼ばれても、_closed==true なので平気\r
 144                                 if( this._closed ) return;\r
 145 \r
 146                                 end   = X_AudioWrapper_getEndTime( this );\r
 147                                 begin = X_AudioWrapper_getStartTime( this, end, true );\r
 148                                 this._rawObject.currentTime = begin / 1000;\r
 149                             \r
 150                             console.log( '[HTMLAudio] play ' + begin + ' -> ' + end );\r
 151                             \r
 152                             if( !this.playing ){\r
 153                                     if( X_UA.Chrome ){ // [CHROME][FIX] volume TODO どの version で 修正される？\r
 154                                         // [!] delay\r
 155                                         X.Timer.once( 0, this, this._fixForChrome );\r
 156                                         this._rawObject.volume = 0;\r
 157                                     } else {\r
 158                                         this._rawObject.volume = this.volume;\r
 159                                     };\r
 160                                 this._rawObject.play();\r
 161                                 this.playing = true;\r
 162                             };\r
 163 \r
 164                     halfway = end < this.duration;\r
 165                     this._timerID && X.Timer.remove( this._timerID );\r
 166                     \r
 167                 if( halfway ){\r
 168                                         this._timerID = X.Timer.once( end - begin, this, this._onEnded );\r
 169                 } else {\r
 170                         delete this._timerID;\r
 171                 };\r
 172                         },\r
 173                                 \r
 174                                 // [CHROME][FIX] volume\r
 175                                 _fixForChrome : X_UA.Chrome && function(){\r
 176                                         !this._closed && ( this._rawObject.volume = this.volume );\r
 177                                 },\r
 178                                 \r
 179                                 _onEnded : function(){\r
 180                                         var time;\r
 181                                         delete this._timerID;\r
 182                                         \r
 183                             if( this.playing ){\r
 184                                 \r
 185                                 time = this._rawObject.currentTime * 1000 - X_AudioWrapper_getEndTime( this ) | 0;\r
 186                                 if( time < -16 ){\r
 187                                         console.log( '> onEnd ' + time + ' ' + ( this._rawObject.currentTime * 1000 | 0 ) + '/' + X_AudioWrapper_getEndTime( this ) );\r
 188                                         this._timerID = X.Timer.once( -time, this, this._onEnded );\r
 189                                         return;\r
 190                                 };\r
 191                                 \r
 192                                 if( this.loop ){\r
 193                                         this.looped = true;\r
 194                                         this.play();\r
 195                                         this.proxy.dispatch( 'looped' );\r
 196                                 } else {\r
 197                                         this.pause();\r
 198                                         this.dispatch( 'ended' );\r
 199                                 };\r
 200                             };\r
 201                                 },\r
 202                         \r
 203                         pause : function(){\r
 204                                 this._timerID && X.Timer.remove( this._timerID );\r
 205                                 delete this._timerID;\r
 206                                 \r
 207                             if( this.playing ){\r
 208                                 !this._rawObject.error && this._rawObject.pause();\r
 209                                 delete this.playing;\r
 210                             };\r
 211                         },\r
 212         \r
 213                         state : function( obj ){\r
 214                                 var result;\r
 215                                 \r
 216                                 if( obj === undefined ){\r
 217                                     return {\r
 218                                         startTime     : this.startTime,\r
 219                                         endTime       : this.endTime < 0 ? this.duration : this.endTime,\r
 220                                         loopStartTime : this.loopStartTime < 0 ? this.startTime : this.loopStartTime,\r
 221                                         loopEndTime   : this.loopEndTime < 0 ? ( this.endTime || this.duration ) : this.loopEndTime,\r
 222                                         \r
 223                                         loop          : this.loop,\r
 224                                         looped        : this.looped,\r
 225                                         volume        : this.volume,\r
 226                                         playing       : this.playing, // && !this._rawObject.error && !this._rawObject.paused && !this._rawObject.ended,                                \r
 227                                         duration      : this.duration,\r
 228                                         \r
 229                                         currentTime   : this._rawObject.currentTime * 1000,\r
 230                                         /*\r
 231         http://www.w3schools.com/tags/av_prop_error.asp\r
 232         1 = MEDIA_ERR_ABORTED - fetching process aborted by user\r
 233     2 = MEDIA_ERR_NETWORK - error occurred when downloading\r
 234     3 = MEDIA_ERR_DECODE - error occurred when decoding\r
 235     4 = MEDIA_ERR_SRC_NOT_SUPPORTED - audio/video not supported\r
 236     */\r
 237                                         error         : this._rawObject.error || 0   // 0, 1 ~ 4 \r
 238                                     };                                  \r
 239                                 };\r
 240                         \r
 241                                 result = X_AudioWrapper_updateStates( this, obj );\r
 242                             \r
 243                                 if( result & 2 ){ // seek\r
 244                         this.play();\r
 245                                 } else {\r
 246                                         if( result & 1 ){\r
 247                                                 end     = X_AudioWrapper_getEndTime( this );\r
 248                                                 halfway = end < this.duration;\r
 249                                                 this._timerID && X.Timer.remove( this._timerID );\r
 250                                                 \r
 251                                                 if( halfway ){\r
 252                                                         this._timerID = X.Timer.once( end - this._rawObject.currentTime * 1000, this, this._onEnded );                                                  \r
 253                                                 } else {\r
 254                                                         delete this._timerID;\r
 255                                                 };\r
 256                                         };\r
 257                                         if( result & 4 ){\r
 258                                this._rawObject.volume = this.volume;\r
 259                                         };\r
 260                                 };\r
 261                             \r
 262                         }\r
 263         \r
 264                 }\r
 265         );\r
 266         \r
 267         X_Audio_BACKENDS.push(\r
 268                 {\r
 269                         backendName : 'HTML5 Audio',\r
 270                 /*\r
 271                  * HTML5 の audio 要素と video 要素でサポートされているメディアフォーマット\r
 272                  * https://developer.mozilla.org/ja/docs/Web/HTML/Supported_media_formats\r
 273                  * \r
 274                  * 主要ブラウザのHTML5 audioタグで使えるファイル形式の再生対応状況を調べてみた\r
 275                  * http://sothis.blog.so-net.ne.jp/2010-10-27\r
 276                  * ダメ元で仕様に含まれていない SHOUTcast もテストしてみました。\r
 277                  * \r
 278                  * IE9 の HTML5 Audio について\r
 279                  * http://kentablog.cluscore.com/2011/05/ie9-html5-audio.html\r
 280                  * 1.Audioオブジェクトを作ることができないので、Audioタグを使う\r
 281                  * 2.クロスドメインアクセスには、「clientaccesspolicy.xml」か「crossdomain.xml」が必要\r
 282                  * 3.wav が不可\r
 283                  * \r
 284                  * IE9でHTML5 autio タグが無効になる\r
 285                  * http://bbs.wankuma.com/index.cgi?mode=al2&namber=64886&KLOG=109\r
 286                  *  IEのバージョン9.0.8112.16421では、Audioオブジェクトのnewも対応してました。\r
 287                  *  createElement等で動的生成すると、よろしくない\r
 288                  * \r
 289                  * media-can-play-wav-audio.html\r
 290                  * https://github.com/adobe/webkit/blob/master/LayoutTests/media/media-can-play-wav-audio.html\r
 291                  * testExpected("audio.canPlayType('audio/wav; codecs=1')", "probably");\r
 292                  * \r
 293                  * HTML5 audioタグ ブラウザ間の違い\r
 294                  * http://wiki.bit-hive.com/tomizoo/pg/HTML5%20audio%A5%BF%A5%B0%20%A5%D6%A5%E9%A5%A6%A5%B6%B4%D6%A4%CE%B0%E3%A4%A4\r
 295                  *  - volume, muted iPhone(iOS4-6)、Android(2.3.6)では動作せず。\r
 296                  *  - FireFox3.6, Android 2.3.6については、src変更後、load()を呼び出さないと切り替わらなかった。iPhoneはload()が不要。\r
 297                  */     \r
 298                         detect : function( proxy, source, ext ){\r
 299                                 var ok, mineType = 'audio/' + ext;\r
 300                                 switch( ext ){\r
 301                                         case 'mp3' :\r
 302                                                 ok = X_UA.IE || X_UA.Chrome || ( X_UA.Windows && X_UA.Safari );\r
 303                                                 mineType = 'audio/mpeg';\r
 304                                                 break;\r
 305                                         case 'ogg' :\r
 306                                                 ok = 15 <= X_UA.Gecko || X_UA.Chrome || X_UA.Opera;\r
 307                                                 break;\r
 308                                         case 'm4a' :\r
 309                                                 ok = X_UA.IE || X_UA.WebKit;\r
 310                                                 mineType = 'audio/mp4';\r
 311                                                 break;\r
 312                                         case 'webm' :\r
 313                                                 ok = 2 <= X_UA.Gecko || 10.6 <= X_UA.Opera; // firefox4+(Gecko2+)\r
 314                                                 break;\r
 315                                         case 'wav' :\r
 316                                                 ok = X_UA.Gecko || X_UA.Opera || ( X_UA.Windows && X_UA.Safari );\r
 317                                                 //mineType = 'audio/wav'; // audio/x-wav ?\r
 318                                                 break;\r
 319                                         default :\r
 320                                                 mineType = '';\r
 321                                 };\r
 322                                 \r
 323                                 if( !ok && mineType ){\r
 324                                         if( !X_Audio_rawAudio ) X_Audio_rawAudio = new Audio;\r
 325                                         ok = X_Audio_rawAudio.canPlayType( mineType );\r
 326                                 };\r
 327                                 \r
 328                                 proxy.asyncDispatch( ok ? 'support' : 'nosupport' );\r
 329                         },\r
 330                         \r
 331                         klass : X_Audio_HTML5AudioWrapper\r
 332                         \r
 333                 } );\r
 334 \r
 335 /*\r
 336  * \r
 337  * howler.js\r
 338  *     codecs = {\r
 339       mp3: !!audioTest.canPlayType('audio/mpeg;').replace(/^no$/, ''),\r
 340       opus: !!audioTest.canPlayType('audio/ogg; codecs="opus"').replace(/^no$/, ''),\r
 341       ogg: !!audioTest.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/, ''),\r
 342       wav: !!audioTest.canPlayType('audio/wav; codecs="1"').replace(/^no$/, ''),\r
 343       aac: !!audioTest.canPlayType('audio/aac;').replace(/^no$/, ''),\r
 344       m4a: !!(audioTest.canPlayType('audio/x-m4a;') || audioTest.canPlayType('audio/m4a;') || audioTest.canPlayType('audio/aac;')).replace(/^no$/, ''),\r
 345       mp4: !!(audioTest.canPlayType('audio/x-mp4;') || audioTest.canPlayType('audio/mp4;') || audioTest.canPlayType('audio/aac;')).replace(/^no$/, ''),\r
 346       weba: !!audioTest.canPlayType('audio/webm; codecs="vorbis"').replace(/^no$/, '')\r
 347     };\r
 348  */\r
 349         \r
 350 };\r
 351 \r
 352 \r
 353 \r
 354 \r
 355 \r