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  * Windows 版 Safari は QuickTime のインストールが必要\r
   7  * \r
   8  * 1. iOS4(iPod 2G) で ended に達すると音が鳴らなくなる fix で解決\r
   9  * 2. iOS6(iPod 4G) で ended に達すると音が鳴らなくなる fix で頻度が改善 emded イベントは発しないので、timeupdate 時に currentTime で判断する\r
  10  * 3. WP7(IS12T) で最後の方にある音が鳴らない? mp3 cbr を使えばいい? 裏に回っても音が鳴り続ける\r
  11  * 4. AOSP 2.x で ended に達すると音が鳴らなくなる -> リロード(audio.src='';audio.src=src;audio.load())でで解決\r
  12  * 5. AOSP 3.x で ended に達すると音が鳴らなくなる -> リロード(audio.src='';audio.sr=src)で解決、但し 2.x 4.x より遅延が大きく 1 秒弱程度ある\r
  13  * 6. AOSP 4.4.2- は ended に達した際に currentTime が変更できなくなり、リロードが必要になる, 4.0, 4.1, 4.2, 4.3 で確認, play() で頻度低下\r
  14  * 7. Android 4.4.4 Chrome WebView は ended に達した際に play() が必要\r
  15  * 8. BlinkOpera32 Win8 は HTMLAudio が壊れている、WebAudio は mp3 がデコードに失敗、ogg が動作\r
  16  * \r
  17  * memo\r
  18  * 1. AOSP4.1 iframe 内の Audio は親に focus が移っても再生を継続する\r
  19  * 2. AOSP oggはシークが乱れる m4a, mp3 は優秀\r
  20  * \r
  21  * http://unolabo.boo.jp/archives/2011/06/13-iphone%E3%81%AEaudio%E5%91%A8%E3%82%8A%E3%81%AE%E3%83%A1%E3%83%A2.html\r
  22  * 【JS】iPhoneのAudio周りのメモ iOS4.0 と 4.2 の違い\r
  23  */\r
  24         /*\r
  25          * durationFix\r
  26          *  duration が取得できるタイミングが遅くそれまでは infinity(PC Opera12), NaN(WP9), 0(Android 標準ブラウザ ChromeWebView) が入っている\r
  27          * \r
  28          *   1. touch が不要の場合、自動で再生を開始して duration を取得するまで再生する\r
  29          *        -> 取得後に pause or 通常再生\r
  30          *   2. touch が必要な場合、タッチイベント内の audio.play() で duration 取得\r
  31          * \r
  32          *  PC Opera12\r
  33          *   1. loadeddata 等では duration が infinity で、再生後の durationchange 時に duration が判明する\r
  34          *   2. duration 判明後には currentTime によるシークと、現在時間の取得が可能になる。\r
  35          *   3. Opera12.17 Win32(XP) portable apps は勝手に再生が始まる、、、Win8+Opera では発生しない\r
  36          *        -> その際には timeupdate が発行されない、、、　iframe+image+audio で使わないときは破棄する、とか。\r
  37          *        -> opera11、10.54 WinXP はまとも、、、 portable が怪しい??\r
  38          */\r
  39 \r
  40 var\r
  41         X_HTMLAudio,\r
  42         // iOS7.1, 8.3 で確認.seeking -> seeked の間の currentTime の値が全くあてにならないので無視する。\r
  43         X_HTMLAudio_seekingFixIOS   = 7 <= X_UA[ 'iOS' ],\r
  44         // ended が発生しない timeupdate 内で play() を呼ぶ (未検証) 不具合確認は iOS4,6 iOS7.1,8.3ではpause->ended起きてる 但し iOS7.1 でも 6 と同じ症状になることがある\r
  45         X_HTMLAudio_endedFixIOS     = X_UA[ 'iOS' ] < 7,\r
  46         // Android 2.3.5 で ended 時に audio.src='';audio.src=src;audio.load() を実施。 2.3.4 でも問題なし。\r
  47         X_HTMLAudio_endedFixAOSP2   = X_UA[ 'AOSP' ] < 3,\r
  48         // Android 3.1 で ended 時に src='';src=src を実施。\r
  49         X_HTMLAudio_endedFixAOSP3   = !X_HTMLAudio_endedFixAOSP2 && X_UA[ 'AOSP' ] < 4,\r
  50         // ended 時に play() を実施, currentTime が duration に張り付き更新されなければ  src='';src=src を実施。\r
  51         X_HTMLAudio_endedFixAOSP4   = 4 <= X_UA[ 'AOSP' ],\r
  52         // ended 時に play() を実施\r
  53         X_HTMLAudio_endedFixCWV     = X_UA[ 'ChromeWV' ] || ( X_UA[ 'Blink' ] && X_UA[ 'Android' ] ),\r
  54         \r
  55         // Opera Mobile 12 は 2回目以降の currentTime へのセットで currentTime が更新されなくなるため、タイマーを使用する\r
  56         X_HTMLAudio_currentTimeFix  = !!X_UA[ 'OperaMobile' ] || !!X_UA[ 'OperaTablet' ],\r
  57 \r
  58         X_HTMLAudio_volumeFix       = X_UA[ 'Chrome' ],\r
  59         /*\r
  60          * win opera12 volume, mute の変更が2度目以降できない\r
  61          */\r
  62         X_HTMLAudio_volumeEnabled   = !( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ) && !X_UA[ 'Opera' ],\r
  63         // Gecko PC + Android でseek時に再生がしばしば止まる問題の修正、iOS8でも確認\r
  64         X_HTMLAudio_needPlayForSeek = X_UA[ 'iOS' ] || X_UA[ 'Gecko' ],\r
  65         // \r
  66         X_HTMLAudio_pauseFix            = 12 <= X_UA[ 'Opera' ] && 0 < ' XP XPSP2 2003|XP64'.indexOf( X_UA[ 'Windows' ] ), // XP + Opera12 のみ?\r
  67 \r
  68         X_HTMLAudio_need1stTouch        = X_UA[ 'iOS' ] || 4.2 <= X_UA[ 'AOSP' ] || X_UA[ 'ChromeWV' ] || X_UA[ 'WinPhone' ] || ( X_UA[ 'Blink' ] && X_UA[ 'Android' ] ),\r
  69 \r
  70         X_HTMLAudio_playTrigger     = ( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ) ? 'canplay' :\r
  71                                                                         X_UA[ 'iOS' ] < 8 ? 'suspend' :    // iOS7.x以下\r
  72                                                                         X_UA[ 'iOS' ] ? 'loadedmetadata' : // iOS8以上は\r
  73                                                                         X_UA[ 'Blink' ] < 32 ? 'stalled' : 'canplaythrough',\r
  74 \r
  75         X_HTMLAudio_durationFix     = // iOS8.1(シュミレータでは不要)\r
  76                                                                   X_UA[ 'iOS' ] < 8 || X_UA[ 'ChromeWV' ] || ( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ) ||\r
  77                                                                   ( X_UA[ 'Windows' ] && 12 <= X_UA[ 'Opera' ] ) || ( X_UA[ 'Blink' ] < 36 && X_UA[ 'Android' ] ),\r
  78 \r
  79         X_HTMLAudio_shortPlayFix        = X_UA[ 'AOSP' ],\r
  80         \r
  81         X_HTMLAudio_progressEnabled = !( X_UA[ 'Opera' ] && X_UA[ 'Android' ] ) && !( X_UA[ 'WinPhones' ] && X_UA[ 'IE9' ] ); // Android 4.1.1 でも遭遇\r
  82 \r
  83 if( X_Audio_constructor ){\r
  84         \r
  85         X_HTMLAudio = X_AudioBase[ 'inherits' ](\r
  86                 'X.HTMLAudio',\r
  87                 X_Class.POOL_OBJECT,\r
  88                 {\r
  89                         // 1: canplaythrought|timeupdateに達している、またはdurationFixが終了している\r
  90                         // 2: READY イベント発火済\r
  91                         // 3: 1, 2 が済\r
  92                         _readyState       : 0,\r
  93                         _src                      : '',\r
  94                         \r
  95                         // 0:ok\r
  96                         // 1:touch 要求済\r
  97                         // 2:touch による play 済\r
  98                         _touchState       : X_HTMLAudio_need1stTouch ? 1 : 0,\r
  99                         \r
 100                         _currentFixStart  : 0,\r
 101                         _currentFixBegin  : 0,\r
 102 \r
 103                         // 0:durationFix不要 または 完了\r
 104                         // 1:durationFix未着手(touchState=1なら play() に入れる)\r
 105                         // 2:canplay イベント発生 -> play()\r
 106                         // 4:play() 実施済\r
 107                         // 8:duration 取得済\r
 108                         //  :timeupdate イベントで durationFixは完了\r
 109                         _durationFixPhase : X_HTMLAudio_durationFix ? 1 : 0,\r
 110                         _lastCurrentTime  : 0,\r
 111 \r
 112                         _shortPlayFixON   : false,\r
 113                         _shortPlayFixTime : 0,\r
 114                         \r
 115                         _endedFixON               : false,\r
 116                         \r
 117                         _seekingFixON     : false,\r
 118                         \r
 119                         'Constructor' : function( disatcher, source, option ){\r
 120                                 var raw;\r
 121                                 \r
 122                                 this.disatcher = disatcher || this;\r
 123                                 this._src          = source;\r
 124                                 \r
 125                                 if( X_HTMLAudio_shortPlayFix ){\r
 126                                         this._shortPlayFixON = X_URL_getEXT( source ) === 'm4a';\r
 127                                 };\r
 128                                 \r
 129                                 this.setState( option );\r
 130 \r
 131                                 if( option[ 'useVideo' ] ){\r
 132                                         raw = document.createElement( 'video' );\r
 133                                         raw.preload                   = 'none'; // auto, metadata, none\r
 134                                         raw.autoplay              = false, // no-auto\r
 135                                         raw.loop                          = false;\r
 136                                         raw.muted                         = false;\r
 137                                         raw.crossorigin       = option[ 'crossorigin' ] || ''; //crossorigin: "anonymous", X.URL.isSameDomain() で切り替え\r
 138                                         raw.style.cssText         = 'position:absolute;bottom:0;left:-50px;width:100px;height:100px;opacity:0;';\r
 139                                         raw.controls              = false;\r
 140                                         raw.WebKitPlaysInline = true;\r
 141                                         X_elmBody.appendChild( raw );\r
 142                                 } else {\r
 143                                         raw = X_TEMP.rawAudio || new X_Audio_constructor( '' );\r
 144                                         \r
 145                                         if( X_TEMP.rawAudio ) delete X_TEMP.rawAudio;\r
 146                                 };\r
 147                                 \r
 148                                 this[ '_rawObject' ] = raw;\r
 149                                 \r
 150                                 this[ 'listen' ]( [\r
 151                                                 X_EVENT_KILL_INSTANCE,\r
 152                                                 X_HTMLAudio_playTrigger,\r
 153                                                 //'loadstart', 'load',\r
 154                                                 'progress', //'error',\r
 155                                                 // 'suspend', 'abort', 'emptied', 'stalled',\r
 156                                                 // 'play', 'pause', 'ratechange', 'volumechange',\r
 157                                                 'seeked',\r
 158                                                 'loadedmetadata', 'loadeddata', 'canplay', 'canplaythrough',\r
 159                                                 'playing', 'waiting', 'seeking',\r
 160                                                 'durationchange', 'timeupdate', 'ended' ] );\r
 161 \r
 162                                 this[ 'listen' ]( [\r
 163                                                 'loadstart', 'load',\r
 164                                                 'progress', 'error',\r
 165                                                 'suspend', 'abort', 'emptied', 'stalled',\r
 166                                                 'play', 'pause', 'seeked', 'ratechange', 'volumechange',\r
 167                                                 'loadedmetadata', 'loadeddata', 'canplay', 'canplaythrough',\r
 168                                                 'playing', 'waiting', 'seeking',\r
 169                                                 'durationchange', 'timeupdate', 'ended' ], this.onDebug );\r
 170 \r
 171                                 if( X_HTMLAudio_endedFixAOSP2 || X_HTMLAudio_endedFixAOSP4 ){\r
 172                                         raw.loop = true; // loop を使えば ended で止まること回避できる 但し ended イベントが起きなくなる\r
 173                                 };\r
 174 \r
 175                                 if( X_HTMLAudio_need1stTouch ){\r
 176                                         raw.src = source;\r
 177                                 } else {\r
 178                                         // if( this.autoplay ){\r
 179                                                 raw.preload  = 'auto';\r
 180                                                 raw.autoplay = true; // Android 4.0-4.1.x で必要\r
 181                                                 //raw.autobuffer = true;\r
 182                                         //};\r
 183                                         raw.src = source;\r
 184                                         raw.load(); // Android4.1.1 HTL21 では必要!\r
 185                                 };\r
 186                         },\r
 187                         \r
 188                         onDebug : function( e ){\r
 189                                 this.disatcher[ 'dispatch' ]( {\r
 190                                         type       : X_EVENT_DEBUG,\r
 191                                         'rawEvent' : e.type,\r
 192                                         'current'  : this[ '_rawObject' ].currentTime,\r
 193                                         duration   : this[ '_rawObject' ].duration } );\r
 194                         },\r
 195                         \r
 196                         handleEvent : function( e ){\r
 197                                 var raw    = this[ '_rawObject' ],\r
 198                                         actualEnded = e.type === 'ended',\r
 199                                         ended       = actualEnded,\r
 200                                         i, l, buf, time,\r
 201                                         ready,\r
 202                                         eventType, duration, end, now;\r
 203                                 \r
 204                                 if( !raw ) return;\r
 205 \r
 206                                 //e.type !== 'timeupdate' && console.log( ' > ' + e.type );\r
 207                                         \r
 208                                 switch( e.type ){\r
 209 \r
 210                                         case X_EVENT_KILL_INSTANCE :\r
 211                                                 this.playing && this.actualPause();\r
 212                                                 \r
 213                                                 // 【javascript】モバイル向けブラウザでも音を鳴らしたい【WebAudio】\r
 214                                                 // http://ingaouhou.com/archives/3633\r
 215                                                 // ・使い終わったインスタンスはload()しておくとやや安定\r
 216                                                 raw.src = '';\r
 217                                                 raw.load();\r
 218                                                 \r
 219                                                 // removeChild for video\r
 220                                                 break;\r
 221 \r
 222                                         //case 'loadstart' :      //    ブラウザがコンテンツの検索を開始した場合に発生\r
 223                                                 //break;\r
 224                                         case 'progress' :          //   ブラウザがコンテンツの取得を実行した場合に発生\r
 225                                                 // console.log( e.loaded + ' ' + e.total * 100 + '%' );\r
 226                                                 // iem9 で常に0 raw.networkState;\r
 227                                                 // opera Android 12 で　buffered.end() へのアクセスはエラー　try catch も無効、iem9 は常に end(0) = 0\r
 228                                                 if( X_HTMLAudio_progressEnabled && this.duration && this._readyState < 3 ){\r
 229                                                         buf  = raw.buffered;\r
 230                                                         time = 0;\r
 231                                                         for( i = 0, l = buf.length; i < l; ++i ){\r
 232                                                                 time += buf[ 'end' ]( i ) - buf[ 'start' ]( i );\r
 233                                                         };\r
 234                                                         this.disatcher[ 'dispatch' ]( { type : X_EVENT_PROGRESS, 'percent' : time * 1000 / this.duration } );\r
 235                                                 };\r
 236                                                 break;\r
 237                                         \r
 238                                         case 'loadeddata' :      //     コンテンツの表示を現在の再生位置で初めて行えるようになった場合に発生\r
 239                                         case 'canplaythrough' : //      今すぐに再生を開始してもバッファリングで停止することなく最後まで表示できると予測している場合に発生\r
 240                                                 if( !this._endedFixON && !X_HTMLAudio_durationFix && !X_HTMLAudio_need1stTouch ){\r
 241                                                         this._readyState |= 1;\r
 242                                                 };\r
 243                                         case 'canplay' :                //      今すぐに再生を再開できるが、バッファリングが不十分でコンテンツを最後まで表示できないと予測している場合に発生\r
 244                                                 if( this._durationFixPhase === 1 && !X_HTMLAudio_need1stTouch ){ // PC Opera12 用 durationFix\r
 245                                                         this._durationFixPhase = 2;\r
 246                                                         this.actualPlay();\r
 247                                                         raw.currentTime = 0; // Win8 + Opera12 で必要\r
 248                                                 };\r
 249                                                 if( this._endedFixON ){\r
 250                                                         console.log( '▽ onEndedFix の終了 @' + e.type  );\r
 251                                                         this._endedFixON = false;\r
 252                                                         this.actualPlay();\r
 253                                                 };\r
 254                                         case 'loadedmetadata' : //      ブラウザがメディアリソースの長さと寸法を判定した場合に発生\r
 255                                         case 'durationchange' : //  duration属性が更新された場合に発生\r
 256                                                 if( !this.duration || this.duration !== raw.duration * 1000 ){ // Blink28 duration が変わる\r
 257                                                         duration = raw.duration;\r
 258                                                 };\r
 259                                                 break;\r
 260         \r
 261                                         // TODO firefox で 短い音声でtimeupdate, ended が発火しない <- 最後の音に無音部分を追加する\r
 262                                         case 'timeupdate' :      //     通常の再生が行われ現在の再生位置の変化が起こった場合に発生\r
 263                                                 if( this._seekingFixON ){\r
 264                                                         eventType = X_EVENT_MEDIA_SEEKING;\r
 265                                                 } else\r
 266                                                 if( this._durationFixPhase === 8 ){\r
 267                                                         this._durationFixPhase = 0;\r
 268                                                         this._readyState |= 1;\r
 269                                                 } else\r
 270                                                 if( this._durationFixPhase === 4 ){ // 1 or 2\r
 271                                                         duration = raw.duration;\r
 272                                                         eventType = X_EVENT_MEDIA_WAITING;\r
 273                                                 } else\r
 274                                                 if( this._touchState === 3 && !X_HTMLAudio_durationFix ){\r
 275                                                         this._touchState  = 0;\r
 276                                                         this._readyState |= 1;\r
 277                                                 } else\r
 278                                                 if( ( now = this.getActualCurrentTime() ) === this._lastCurrentTime ){\r
 279                                                         eventType = X_EVENT_MEDIA_WAITING;\r
 280                                                 } else\r
 281                                                 if( this.playing ){\r
 282                                                         end = X_Audio_getEndTime( this ) + this._shortPlayFixTime;\r
 283                                                         \r
 284                                                         console.log( now + ' / ' + end );// Firefox44.0.2 で音声の再生開始に難あり...\r
 285                                                         \r
 286                                                         if( ( 0 + end <= 0 + now ) || // 0+ なぜか iem9 で必要,,,\r
 287                                                                 ( now < this._lastCurrentTime && now < 2000 ) ){\r
 288                                                                 //( ( X_HTMLAudio_endedFixAOSP2 || X_HTMLAudio_endedFixAOSP4 ) && ( now < this._lastCurrentTime && now < 1000 ) ) ){\r
 289                                                                         // loop して0付近に戻った場合\r
 290                                                                         // iOS8.4 ではこのタイミングで now が last より 0.1秒後退している場合がある\r
 291                                                                         // iOS7.1 ではもっと小さい場合がある,,,\r
 292                                                                 if( this.autoLoop ){\r
 293                                                                         console.log( '☆★☆ 曲の最後に到達 @timeupdate now-end:' + ( now - end ) + ' now:' + now + ' last:' + this._lastCurrentTime );\r
 294                                                                         ended = true;\r
 295                                                                         //if( X_HTMLAudio_endedFixIOS ) actualEnded = true;\r
 296                                                                 } else {\r
 297                                                                         this.actualPause();\r
 298                                                                         eventType = X_EVENT_MEDIA_ENDED;\r
 299                                                                 };\r
 300                                                         } else {\r
 301                                                                 eventType = X_EVENT_MEDIA_PLAYING;\r
 302                                                         };\r
 303                                                         this._lastCurrentTime = now;\r
 304                                                 };\r
 305                                                 break;\r
 306         \r
 307                                         //case 'stalled' :              //      ブラウザがコンテンツの取得を試みたが、データがまだ用意されていない場合に発生\r
 308                                                 // Android2 で ready 扱い?\r
 309                                         //case 'suspend' :              //      ブラウザが意図的にコンテンツの取得を現在行っていない場合に発生（ダウンロードは未完了）\r
 310                                                 // iOS で ready 扱い\r
 311                                         //case 'emptied' :              //      読み込み中に致命的なエラーが発生したか、実行状態ででload()メソッドが実行された場合に発生\r
 312                                         //case 'abort' :                  //    ダウンロードの完了前にコンテンツの取得を停止した場合に発生（この停止はエラーによるものではない）\r
 313                                         //      break;\r
 314                                                 \r
 315                                         //case 'error' :                  //    コンテンツの取得実行中にエラーが発生した場合に発生\r
 316                                                 // Opera12 src = '' で error が発生、無視する\r
 317                                                 // eventType = X_EVENT_ERROR;\r
 318                                                 //break;\r
 319                                                 \r
 320                                         case 'playing' :                //      再生が開始された場合に発生\r
 321                                                 if( X_HTMLAudio_volumeFix ){\r
 322                                                         raw.volume = this.gain;\r
 323                                                 };\r
 324                                                 //if( X_HTMLAudio_currentTimeFix && !this._currentFixStart ){\r
 325                                                         //this._currentFixStart = X_Timer_now(); // 正確な再生開始時間に補正\r
 326                                                 //};\r
 327                                                 eventType = !this._durationFixPhase && !this._endedFixON ? X_EVENT_MEDIA_PLAYING : X_EVENT_MEDIA_WAITING;\r
 328                                         //case 'play' :            //   再生が開始された。play()メソッドからの復帰後に発生する場合に発生\r
 329                                         //case 'pause' :                  //    再生が一時停止された。pauseメソッドからの復帰後に発生する場合に発生\r
 330                                         //case 'ratechange' :    // defaultPlaybackRate属性とplaybackRate属性のどちらかが更新された場合に発生\r
 331                                         //case 'volumechange' :   // volume属性とmuted属性のどちらかが変化した場合に発生\r
 332                                                 break;\r
 333 \r
 334                                         case 'seeking' :                //      シークがtrueに変化し、イベントを発生させるのに十分な時間がシーク操作にかかっている場合に発生\r
 335                                                 eventType = X_EVENT_MEDIA_SEEKING;\r
 336                                                 if( X_HTMLAudio_seekingFixIOS ) this._seekingFixON = true;\r
 337                                                 break;                                  \r
 338                                         case 'seeked' :\r
 339                                                 if( X_HTMLAudio_seekingFixIOS ) this._seekingFixON = false;\r
 340                                                 break;\r
 341                                         \r
 342                                         case 'waiting' :                //      次のフレームが利用不可のため再生を停止したが、そのフレームがやがて利用可能になると想定している場合に発生\r
 343                                                 eventType = X_EVENT_MEDIA_WAITING;\r
 344                                                 break;\r
 345                                 };\r
 346                                 \r
 347                                 // duration は Infinity, NaN, 0 の場合があるため、これを除外する\r
 348                                 // chrome18 for Android は duration = 100 の間はシークができない? 28 は可能\r
 349                                 if( 0 < duration && X_Type_isFinite( duration ) && duration !== 100 ){\r
 350                                         this.duration = duration * 1000;\r
 351 \r
 352                                         if( this._durationFixPhase === 4 ){\r
 353                                                 console.log( '▼ DurationFix の終了 @' + e.type );\r
 354                                                 this._durationFixPhase = 8;\r
 355                                                 \r
 356                                                 if( this.autoplay || this._playReserved ){\r
 357                                                         console.log( '☆ 再生 <- DurationFix の終了' );\r
 358                                                         this.actualPlay();\r
 359                                                 } else\r
 360                                                 if( X_HTMLAudio_pauseFix ){\r
 361                                                         console.log( '☆ PAUSE <- DurationFix の終了' );\r
 362                                                         this.actualPause();\r
 363                                                 };\r
 364                                         } else\r
 365                                         if( this._durationFixPhase & 3 ){ // === 1 | 2\r
 366                                                 this._durationFixPhase = 8;\r
 367                                         };                                      \r
 368                                 };\r
 369 \r
 370                                 //\r
 371                                 if( this._touchState === 1 ){\r
 372                                         if( e.type === X_HTMLAudio_playTrigger ){\r
 373                                                 this._touchState = 2;\r
 374                                                 this.disatcher[ 'asyncDispatch' ]( X_EVENT_MEDIA_TOUCH_FOR_LOAD );                                              \r
 375                                         };\r
 376                                 } else\r
 377                                 if( ended ){\r
 378                                         if( this.autoLoop ){\r
 379                                                 if( !( this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_BEFORE_LOOP ) & X_CALLBACK_PREVENT_DEFAULT ) ){\r
 380                                                         this.looped = true;\r
 381                                                         this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_LOOPED );\r
 382                                                         this.actualPlay( X_HTMLAudio_endedFixCWV && actualEnded, X_HTMLAudio_endedFixAOSP3 && actualEnded );\r
 383                                                 };\r
 384                                         } else {\r
 385                                                 this.seekTime = 0;\r
 386                                                 delete this.playing;\r
 387                                                 this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_ENDED );\r
 388                                         };\r
 389                                 } else\r
 390                                 if( this._readyState === 1 && this.duration ){\r
 391                                         this._readyState |= 2;\r
 392                                         this.disatcher[ 'asyncDispatch' ]( X_EVENT_READY );\r
 393                                         console.log( '> Audio Loaded!! ' + e.type + ' d:' + ( this.duration | 0 ) );\r
 394                                 } else\r
 395                                 if( eventType ){\r
 396                                         this.disatcher[ 'dispatch' ]( eventType );\r
 397                                 };\r
 398                         },\r
 399 \r
 400                         actualPlay : function( forcePlay, forceReload ){\r
 401                                 var raw = this[ '_rawObject' ],\r
 402                                         e, begin, end;\r
 403 \r
 404                                 if( !raw ) return;\r
 405                                 \r
 406                                 this._playReserved = true;\r
 407                                 \r
 408                                 if( X_HTMLAudio_pauseFix ){\r
 409                                         if( !raw.src ){ // X_HTMLAudio_pauseFix によって src が空になっている\r
 410                                                 console.log( '○ 削除された audio.src の復帰' );\r
 411                                                 raw.src = this._src;\r
 412                                                 return;\r
 413                                         };\r
 414                                         if( this._durationFixPhase < 2 ){\r
 415                                                 return;\r
 416                                         };              \r
 417                                 };\r
 418 \r
 419                                 if( this._touchState === 2 ){\r
 420                                         e = X_EventDispatcher_CURRENT_EVENTS[ X_EventDispatcher_CURRENT_EVENTS.length - 1 ];\r
 421                                         if( !e || !e[ 'pointerType' ] ){\r
 422                                                 alert( 'タッチイベント以外での play! ' + ( e ? e.type : '' ) );\r
 423                                                 return;\r
 424                                         };\r
 425                                         this._touchState = 3;\r
 426                                 } else\r
 427                                 if( this._readyState !== 3 && this._durationFixPhase < 2 ){\r
 428                                         return;\r
 429                                 };\r
 430                                 \r
 431                                 delete this._playReserved;\r
 432                                 \r
 433                                 if( this._durationFixPhase & 3 ){ // 1 or 2\r
 434                                         console.log( '▲ DurationFix の開始' );\r
 435                                         this._durationFixPhase = 4;\r
 436                                 };\r
 437 \r
 438                                 end   = X_Audio_getEndTime( this );\r
 439                                 begin = X_Audio_getStartTime( this, end, true );\r
 440 \r
 441                                 this._lastCurrentTime = begin / 1000;\r
 442 \r
 443                                 if( this._shortPlayFixON ){\r
 444                                         this._shortPlayFixTime = ( 1000 < end - begin ) ? 200 : 400;\r
 445                                         if( this.duration < end + this._shortPlayFixTime ){\r
 446                                                 this._shortPlayFixTime = this.duration - end;\r
 447                                         };\r
 448                                 };\r
 449 \r
 450                                 if( this._endedFixON ){\r
 451                                         console.log( '☆ audio.play をスキップ ' + begin + ' -> ' + end + ' crt:' + ( raw.currentTime | 0 ) );\r
 452                                 } else {\r
 453                                         if( !this.playing ){\r
 454                                                 if( X_HTMLAudio_volumeFix ){\r
 455                                                         raw.volume = 0;\r
 456                                                 } else {\r
 457                                                         raw.volume = X_HTMLAudio_volumeEnabled ? this.gain : 1;\r
 458                                                 };\r
 459                                                 raw.play();\r
 460                                                 this.playing = true;\r
 461                                         } else\r
 462                                         if( X_HTMLAudio_needPlayForSeek || forcePlay ){\r
 463                                                 raw.play();\r
 464                                         };\r
 465                                         \r
 466                                         //http://himaxoff.blog111.fc2.com/blog-entry-97.html\r
 467                                         //Firefox3.6では一度も play() していない状態で currentTime = 0 を実行するとエラーになる。\r
 468                                         //また、GoogleChrome7 では currentTime = 0 直後に play() すると、pause()した位置前後の音が混ざることがある。(少なくとも自分の環境では)\r
 469 \r
 470                                         // iOS で duration が 0 の時に触ると error\r
 471                                         // 0 or 8\r
 472                                         if( !( this._durationFixPhase % 8 ) && this.duration ) raw.currentTime = this._lastCurrentTime;\r
 473 \r
 474                                         console.log( '[HTMLAudio] play ' + begin + ' -> ' + end + ' crt:' + ( raw.currentTime | 0 ) + ' last:' + this._lastCurrentTime );\r
 475 \r
 476                                         if( forceReload ){\r
 477                                                 this.playing     = false;\r
 478                                                 this._endedFixON = true;\r
 479                                                 raw.src = this._src;\r
 480                                                 console.log( '△ onEndedFix の開始' );\r
 481                                                 this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_WAITING );\r
 482                                         };\r
 483                                 };\r
 484 \r
 485                                 if( X_HTMLAudio_currentTimeFix ){\r
 486                                         this._currentFixBegin = begin;\r
 487                                         this._currentFixStart = X_Timer_now();\r
 488                                 };\r
 489                         },\r
 490                         \r
 491                         actualPause : function(){\r
 492                                 var raw = this[ '_rawObject' ];\r
 493                                 \r
 494                                 console.log( '[HTMLAudio] pause' );\r
 495 \r
 496                                 delete this._currentFixStart;\r
 497 \r
 498                                 !raw.error && raw.pause();\r
 499                                 \r
 500                                 if( X_HTMLAudio_pauseFix ){\r
 501                                         raw.src = '';\r
 502                                         if( X_HTMLAudio_durationFix ){\r
 503                                                 delete this._durationFixPhase;\r
 504                                         };\r
 505                                 };\r
 506                                 delete this.playing;\r
 507                         },\r
 508                         \r
 509                         getActualCurrentTime : function(){\r
 510                                 return ( X_HTMLAudio_currentTimeFix ?\r
 511                                                         X_Timer_now() - this._currentFixStart + this._currentFixBegin :\r
 512                                                         this._seekingFixON ? this._lastCurrentTime * 1000 :\r
 513                                                         this[ '_rawObject' ].currentTime * 1000 | 0 );\r
 514                         },\r
 515                 /*\r
 516                 http://www.w3schools.com/tags/av_prop_error.asp\r
 517                 1 = MEDIA_ERR_ABORTED - fetching process aborted by user\r
 518                 2 = MEDIA_ERR_NETWORK - error occurred when downloading\r
 519                 3 = MEDIA_ERR_DECODE - error occurred when decoding\r
 520                 4 = MEDIA_ERR_SRC_NOT_SUPPORTED - audio/video not supported\r
 521                 */                      \r
 522                         getActualError : function(){\r
 523                                 return this[ '_rawObject' ].error || 0;\r
 524                         },\r
 525                         \r
 526                         afterUpdateState : function( result ){\r
 527                                 if( result & 3 ){ // seek\r
 528                                         this.actualPlay();\r
 529                                 } else\r
 530                                 if( ( result & 4 ) && X_HTMLAudio_volumeEnabled ){\r
 531                                    this[ '_rawObject' ].volume = this.gain;\r
 532                                 };                              \r
 533                         }\r
 534         \r
 535                 }\r
 536         );\r
 537         \r
 538         X_HTMLAudio && X_Audio_BACKENDS.push(\r
 539                 {\r
 540                         backendID   : 2,\r
 541                         \r
 542                         backendName : 'HTMLAudio',\r
 543                         \r
 544                         canPlay : X_Audio_codecs,\r
 545                 /*\r
 546                  * HTML5 の audio 要素と video 要素でサポートされているメディアフォーマット\r
 547                  * https://developer.mozilla.org/ja/docs/Web/HTML/Supported_media_formats\r
 548                  * \r
 549                  * 主要ブラウザのHTML5 audioタグで使えるファイル形式の再生対応状況を調べてみた\r
 550                  * http://sothis.blog.so-net.ne.jp/2010-10-27\r
 551                  * ダメ元で仕様に含まれていない SHOUTcast もテストしてみました。\r
 552                  * \r
 553                  * IE9 の HTML5 Audio について\r
 554                  * http://kentablog.cluscore.com/2011/05/ie9-html5-audio.html\r
 555                  * 1.Audioオブジェクトを作ることができないので、Audioタグを使う\r
 556                  * 2.クロスドメインアクセスには、「clientaccesspolicy.xml」か「crossdomain.xml」が必要\r
 557                  * 3.wav が不可\r
 558                  * \r
 559                  * IE9でHTML5 autio タグが無効になる\r
 560                  * http://bbs.wankuma.com/index.cgi?mode=al2&namber=64886&KLOG=109\r
 561                  *  IEのバージョン9.0.8112.16421では、Audioオブジェクトのnewも対応してました。\r
 562                  *  createElement等で動的生成すると、よろしくない\r
 563                  * \r
 564                  * media-can-play-wav-audio.html\r
 565                  * https://github.com/adobe/webkit/blob/master/LayoutTests/media/media-can-play-wav-audio.html\r
 566                  * testExpected("audio.canPlayType('audio/wav; codecs=1')", "probably");\r
 567                  * \r
 568                  * HTML5 audioタグ ブラウザ間の違い\r
 569                  * 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
 570                  *  - volume, muted iPhone(iOS4-6)、Android(2.3.6)では動作せず。\r
 571                  *  - FireFox3.6, Android 2.3.6については、src変更後、load()を呼び出さないと切り替わらなかった。iPhoneはload()が不要。\r
 572                  */     \r
 573                         detect : function( proxy, source, ext ){\r
 574                                 proxy[ 'asyncDispatch' ]( { type : X_EVENT_COMPLETE, canPlay : X_Audio_codecs[ ext ] } );\r
 575                         },\r
 576                         \r
 577                         klass : X_HTMLAudio\r
 578                         \r
 579                 } );\r
 580 \r
 581 /*\r
 582  * \r
 583  * howler.js\r
 584  *       codecs = {\r
 585           mp3: !!audioTest.canPlayType('audio/mpeg;').replace(/^no$/, ''),\r
 586           opus: !!audioTest.canPlayType('audio/ogg; codecs="opus"').replace(/^no$/, ''),\r
 587           ogg: !!audioTest.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/, ''),\r
 588           wav: !!audioTest.canPlayType('audio/wav; codecs="1"').replace(/^no$/, ''),\r
 589           aac: !!audioTest.canPlayType('audio/aac;').replace(/^no$/, ''),\r
 590           m4a: !!(audioTest.canPlayType('audio/x-m4a;') || audioTest.canPlayType('audio/m4a;') || audioTest.canPlayType('audio/aac;')).replace(/^no$/, ''),\r
 591           mp4: !!(audioTest.canPlayType('audio/x-mp4;') || audioTest.canPlayType('audio/mp4;') || audioTest.canPlayType('audio/aac;')).replace(/^no$/, ''),\r
 592           weba: !!audioTest.canPlayType('audio/webm; codecs="vorbis"').replace(/^no$/, '')\r
 593         };\r
 594  */\r
 595         \r
 596 };\r
 597 \r
 598 \r
 599 \r
 600 \r
 601 \r