X-Git-Url: http://git.osdn.jp/view?a=blobdiff_plain;f=0.6.x%2Fjs%2F07_audio%2F01_XWebAudio.js;h=5e9729983e94853f23eb2e1e65ef42c14fd2e184;hb=512e08f4d38eab417f9651277e8a50c08535cb07;hp=6d634359044d19851bb780fc20eae131c5c3f514;hpb=ecfded871abcf085bbc2b862352232190b87fd27;p=pettanr%2FclientJs.git diff --git a/0.6.x/js/07_audio/01_XWebAudio.js b/0.6.x/js/07_audio/01_XWebAudio.js index 6d63435..5e97299 100644 --- a/0.6.x/js/07_audio/01_XWebAudio.js +++ b/0.6.x/js/07_audio/01_XWebAudio.js @@ -1,47 +1,141 @@ +var X_Audio_constructor = 3.1 <= X_UA[ 'Safari' ] && X_UA[ 'Safari' ] < 4 ? + function( s, a ){ + //a = document.createElement( 'audio' ); + //a.src = s; + //a.load(); + return a; + } : + // Android1.6 + MobileOpera12 HTMLAudio はいるが呼ぶとクラッシュする + !( X_UA[ 'Android' ] < 2 ) ? + window[ 'Audio' ] || window.HTMLAudioElement : null, + + // Blink5 Opera32 Win8 は HTMLAudio が壊れている、WebAudio は mp3 がデコードに失敗、ogg が動作 + X_Audio_blinkOperaFix = X_UA[ 'BlinkOpera' ] && X_UA[ 'Windows' ], + + X_Audio_codecs; -var X_Audio_WebAudio_context = !X_UA[ 'iPhone_4s' ] && !X_UA[ 'iPad_2Mini1' ] && !X_UA[ 'iPod_4' ] && - // TODO なんで fennec を禁止? - !( X_UA[ 'Gecko' ] && X_UA[ 'Android' ] ) && - // Firefox40.0.5 + Windows8 で音声が鳴らない - !( X_UA[ 'Gecko' ] === 40 && X_UA[ 'Windows' ] ) && +if( X_Audio_constructor ){ + //http://himaxoff.blog111.fc2.com/blog-entry-97.html + //引数なしで new Audio() とすると、Operaでエラーになるそうなので注意。 + X_TEMP.rawAudio = new X_Audio_constructor( '' ); + + // https://html5experts.jp/miyuki-baba/3766/ + // TODO Chrome for Android31 で HE-AAC が低速再生されるバグ + // TODO Android4 標準ブラウザで ogg のシークが正しくない! + if( X_TEMP.rawAudio.canPlayType ){ + X_Audio_codecs = { + 'mp3' : X_TEMP.rawAudio.canPlayType('audio/mpeg'), + 'opus' : X_TEMP.rawAudio.canPlayType('audio/ogg; codecs="opus"'), + 'ogg' : X_TEMP.rawAudio.canPlayType('audio/ogg; codecs="vorbis"'), + 'wav' : X_TEMP.rawAudio.canPlayType('audio/wav; codecs="1"'), + 'aac' : X_TEMP.rawAudio.canPlayType('audio/aac'), + 'm4a' : X_TEMP.rawAudio.canPlayType('audio/x-m4a') + X_TEMP.rawAudio.canPlayType('audio/m4a') + X_TEMP.rawAudio.canPlayType('audio/aac'), + 'mp4' : X_TEMP.rawAudio.canPlayType('audio/x-mp4') + X_TEMP.rawAudio.canPlayType('audio/mp4') + X_TEMP.rawAudio.canPlayType('audio/aac'), + 'weba' : X_TEMP.rawAudio.canPlayType('audio/webm; codecs="vorbis"') + }; + (function( X_Audio_codecs, k, v ){ + for( k in X_Audio_codecs ){ + //if( X_EMPTY_OBJECT[ k ] ) continue; + v = X_Audio_codecs[ k ]; + v = v && !!( v.split( 'no' ).join( '' ) ); + if( v ){ + console.log( k + ' ' + X_Audio_codecs[ k ] ); + X_Audio_codecs[ k ] = true; + } else { + delete X_Audio_codecs[ k ]; + }; + }; + if( X_Audio_blinkOperaFix ) delete X_Audio_codecs[ 'mp3' ]; + })( X_Audio_codecs ); + } else { + // iOS3.2.3 + X_Audio_codecs = { + 'mp3' : X_UA[ 'IE' ] || X_UA[ 'Chrome' ] || ( X_UA[ 'Windows' ] && X_UA[ 'Safari' ] ), + 'ogg' : 5 <= X_UA[ 'Gecko' ] || X_UA[ 'Chrome' ] || X_UA[ 'Opera' ] , + 'wav' : X_UA[ 'Gecko' ] || X_UA[ 'Opera' ] || ( X_UA[ 'Windows' ] && X_UA[ 'Safari' ] ), + 'aac' : X_UA[ 'IE' ] || X_UA[ 'WebKit' ], + 'm4a' : X_UA[ 'IE' ] || X_UA[ 'WebKit' ], + 'mp4' : X_UA[ 'IE' ] || X_UA[ 'WebKit' ], + 'weba' : 2 <= X_UA[ 'Gecko' ] || 10.6 <= X_UA[ 'Opera' ] // firefox4+(Gecko2+) + }; + (function( X_Audio_codecs, k ){ + for( k in X_Audio_codecs ){ + //if( X_EMPTY_OBJECT[ k ] ) continue; + if( X_Audio_codecs[ k ] ){ + console.log( k + ' ' + X_Audio_codecs[ k ] ); + X_Audio_codecs[ k ] = true; + } else { + delete X_Audio_codecs[ k ]; + }; + }; + })( X_Audio_codecs ); + }; + + if( X_Audio_blinkOperaFix ){ + X_Audio_constructor = null; + delete X_TEMP.rawAudio; + }; +}; + + +var X_WebAudio_context = // 4s 以下ではない iPad 2G または iPad mini 1G 以下ではない, iPod touch 4G 以下ではない + !X_UA[ 'iPhone_4s' ] && !X_UA[ 'iPad_2Mini1' ] && !X_UA[ 'iPod_4' ] && + // iOS7 以上で HTML Audio が鳴らない問題を見ていくよ + // !X_UA[ 'iOS' ] && + // Android2 + Gecko で WebAudio が極めて不安定 + !( X_UA[ 'Fennec' ] && X_UA[ 'Android' ] < 3 ) && + // AOSP でも WebAudio を不完全に実装するものがある, touch の有無も不明のため一律に切ってしまう + !X_UA[ 'AOSP' ] && !( X_UA[ 'ChromeWV' ] < 5 ) && + // Blink HTMLAudio 調査用 + //!X_UA[ 'Blink' ] && + // Firefox40.0.5 + Windows8 で音声が途中から鳴らなくなる + // Firefox41.0.1 + Windows8 で音声が途中から鳴らなくなる + !( 40 <= X_UA[ 'Gecko' ] && X_UA[ 'Gecko' ] < 45 && X_UA[ 'Windows' ] ) && ( window[ 'AudioContext' ] || window[ 'webkitAudioContext' ] ), - X_Audio_BUFFER_LIST = [], - X_Audio_WebAudioWrapper, - X_Audio_BufferLoader, - X_Audio_fpsFix; + X_WebAudio_BUFFER_LIST = [], + X_WebAudio_need1stTouch = X_UA[ 'iOS' ], + X_WebAudio_touchState = X_WebAudio_need1stTouch, + X_WebAudio, + X_WebAudio_BufferLoader, + X_WebAudio_fpsFix; /* * iPhone 4s 以下、iPad2以下、iPad mini 1以下, iPod touch 4G 以下は不可 */ -if( X_Audio_WebAudio_context ){ +if( X_WebAudio_context ){ - X_Audio_WebAudio_context = new X_Audio_WebAudio_context; + X_WebAudio_context = new X_WebAudio_context; - X_Audio_BufferLoader = X_EventDispatcher[ 'inherits' ]( + X_WebAudio_BufferLoader = X_EventDispatcher[ 'inherits' ]( 'X.WebAudio.BufferLoader', X_Class.POOL_OBJECT, { - url : '', + audioUrl : '', xhr : null, onDecodeSuccess : null, onDecodeError : null, - buffer : null, - error : 0, + audioBuffer : null, + errorState : 0, webAudioList : null, 'Constructor' : function( webAudio, url ){ this.webAudioList = [ webAudio ]; - this.url = url; + this.audioUrl = url; this.xhr = X[ 'Net' ]( { 'xhr' : url, 'dataType' : 'arraybuffer' } ) [ 'listen' ]( X_EVENT_PROGRESS, this ) [ 'listenOnce' ]( [ X_EVENT_SUCCESS, X_EVENT_COMPLETE ], this ); + X_WebAudio_BUFFER_LIST.push( this ); }, handleEvent : function( e ){ + var i, l; + switch( e.type ){ case X_EVENT_PROGRESS : - this[ 'dispatch' ]( { type : 'progress', 'percent' : e[ 'percent' ] } ); + for( i = 0, l = this.webAudioList.length; i < l; ++i ){ + this.webAudioList[ i ][ 'dispatch' ]( { type : X_EVENT_PROGRESS, 'percent' : e[ 'percent' ] } ); + }; return; case X_EVENT_SUCCESS : @@ -52,18 +146,18 @@ if( X_Audio_WebAudio_context ){ // iOS 7.1 で decodeAudioData に処理が入った瞬間にスクリーンを長押しする(スクロールを繰り返す)と // decoeAudioData の処理がキャンセルされることがある(エラーやコールバックの発火もなく、ただ処理が消滅する)。 // ただし iOS 8.1.2 では エラーになる - if( X_UA[ 'iOS' ] < 8 || !X_Audio_WebAudio_context[ 'decodeAudioData' ] ){ - this._onDecodeSuccess( X_Audio_WebAudio_context[ 'createBuffer' ]( e.response, false ) ); + if( X_UA[ 'iOS' ] < 8 || !X_WebAudio_context[ 'decodeAudioData' ] ){ + this._onDecodeSuccess( X_WebAudio_context[ 'createBuffer' ]( e.response, false ) ); } else - if( X_Audio_WebAudio_context[ 'decodeAudioData' ] ){ - X_Audio_WebAudio_context[ 'decodeAudioData' ]( e.response, + if( X_WebAudio_context[ 'decodeAudioData' ] ){ + X_WebAudio_context[ 'decodeAudioData' ]( e.response, this.onDecodeSuccess = X_Closure_create( this, this._onDecodeSuccess ), this.onDecodeError = X_Closure_create( this, this._onDecodeError ) ); }; break; case X_EVENT_COMPLETE : - this.error = 1; + this.errorState = 1; this[ 'asyncDispatch' ]( X_EVENT_COMPLETE ); break; }; @@ -72,17 +166,17 @@ if( X_Audio_WebAudio_context ){ }, _onDecodeSuccess : function( buffer ){ - console.log( 'WebAudio decode success!' ); - this.onDecodeSuccess && this._onDecodeComplete(); - if ( !buffer ) { - this.error = 2; + if( !buffer ){ + this.errorState = 2; this[ 'asyncDispatch' ]( X_EVENT_COMPLETE ); return; }; + + console.log( 'WebAudio decode success!' ); - this.buffer = buffer; + this.audioBuffer = buffer; this[ 'asyncDispatch' ]( X_EVENT_COMPLETE ); @@ -92,7 +186,7 @@ if( X_Audio_WebAudio_context ){ _onDecodeError : function(){ console.log( 'WebAudio decode error!' ); this._onDecodeComplete(); - this.error = 2; + this.errorState = 2; this[ 'asyncDispatch' ]( X_EVENT_COMPLETE ); }, @@ -106,9 +200,10 @@ if( X_Audio_WebAudio_context ){ unregister : function( webAudio ){ var list = this.webAudioList, i = list.indexOf( webAudio ); + if( 0 < i ){ list.splice( i, 1 ); - if( list.length ){ + if( !list.length ){ this.xhr && this.xhr[ 'kill' ](); this[ 'kill' ](); }; @@ -119,7 +214,7 @@ if( X_Audio_WebAudio_context ){ ); - X_Audio_WebAudioWrapper = X_Audio_AbstractAudioBackend[ 'inherits' ]( + X_WebAudio = X_AudioBase[ 'inherits' ]( 'X.WebAudio', X_Class.POOL_OBJECT, { @@ -131,14 +226,14 @@ if( X_Audio_WebAudio_context ){ _startTime : 0, _timerID : 0, _interval : 0, - buffer : null, + audioBuffer : null, bufferSource : null, gainNode : null, _onended : null, - 'Constructor' : function( target, url, option ){ + 'Constructor' : function( disatcher, url, option ){ var i = 0, - l = X_Audio_BUFFER_LIST.length, + l = X_WebAudio_BUFFER_LIST.length, loader; /* @@ -146,14 +241,14 @@ if( X_Audio_WebAudio_context ){ * L-01F 等の一部端末で Web Audio API の再生結果に特定条件下でノイズが混ざることがある。 * 描画レート(描画 FPS)が下がるとノイズが混ざり始め、レートを上げると再生結果が正常になるというもので、オーディオ処理が描画スレッドに巻き込まれているような動作を見せる。 */ - if( X_UA[ 'Android' ] && X_UA[ 'Chrome' ] && !X_Audio_fpsFix ){ + if( X_UA[ 'Android' ] && X_UA[ 'Chrome' ] && !X_WebAudio_fpsFix ){ X_Node_systemNode.create( 'div', { id : 'fps-slowdown-make-sound-noisy' } ); - X_Audio_fpsFix = true; + X_WebAudio_fpsFix = true; }; for( ; i < l; ++i ){ - loader = X_Audio_BUFFER_LIST[ i ]; - if( loader.url === url ){ + loader = X_WebAudio_BUFFER_LIST[ i ]; + if( loader.audioUrl === url ){ this.loader = loader; loader.webAudioList.push( this ); break; @@ -161,16 +256,15 @@ if( X_Audio_WebAudio_context ){ }; if( !this.loader ){ - this.loader = loader = new X_Audio_BufferLoader( this, url ); + this.loader = loader = X_WebAudio_BufferLoader( this, url ); }; - this.target = target || this; - + this.disatcher = disatcher || this; this.setState( option ); this[ 'listenOnce' ]( X_EVENT_KILL_INSTANCE, this.onKill ); - if( loader.buffer || loader.error ){ + if( loader.audioBuffer || loader.errorState ){ this._onLoadBufferComplete(); } else { loader[ 'listenOnce' ]( X_EVENT_COMPLETE, this, this._onLoadBufferComplete ); @@ -181,7 +275,7 @@ if( X_Audio_WebAudio_context ){ this.loader[ 'unlisten' ]( X_EVENT_COMPLETE, this, this._onLoadBufferComplete ) .unregister( this ); - delete this.buffer; + delete this.audioBuffer; this.playing && this.actualPause(); this.bufferSource && this._sourceDispose(); @@ -192,17 +286,16 @@ if( X_Audio_WebAudio_context ){ }, _onLoadBufferComplete : function( e ){ var loader = this.loader, - buffer = loader.buffer; + buffer = loader.audioBuffer; e && loader[ 'unlisten' ]( X_EVENT_COMPLETE, this, this._onLoadBufferComplete ); if ( !buffer ) { - this.error = loader.error; - - this.target[ 'dispatch' ]({ + this.error = loader.errorState; + this.disatcher[ 'dispatch' ]({ type : X_EVENT_ERROR, - error : loader.error, - message : loader.error === 1 ? + error : loader.errorState, + message : loader.errorState === 1 ? 'load buffer network error' : 'buffer decode error' }); @@ -210,50 +303,60 @@ if( X_Audio_WebAudio_context ){ return; }; - this.buffer = buffer; - this.duration = buffer.duration * 1000; + this.audioBuffer = buffer; + this.duration = buffer.duration * 1000; - this.target[ 'asyncDispatch' ]( X_EVENT_READY ); - - console.log( 'WebAudio buffer ready' ); - - this.autoplay && X_Timer_once( 16, this, this.play ); - + this.disatcher[ 'asyncDispatch' ]( X_WebAudio_touchState ? X_EVENT_MEDIA_TOUCH_FOR_LOAD : X_EVENT_READY ); }, actualPlay : function(){ - var begin, end; + var e, begin, end; + + console.log( '[WebAudio] play abuf:' + !!this.audioBuffer ); - if( !this.buffer ){ - this.autoplay = true; + if( !this.audioBuffer ){ + this._playReserved = true; return; }; - end = X_AudioWrapper_getEndTime( this ); - begin = X_AudioWrapper_getStartTime( this, end, true ); + if( X_WebAudio_touchState ){ + e = X_EventDispatcher_CURRENT_EVENTS[ X_EventDispatcher_CURRENT_EVENTS.length - 1 ]; + if( !e || !e[ 'pointerType' ] ){ + // alert( 'タッチイベント以外での play! ' + ( e ? e.type : '' ) ); + return; + }; + // http://qiita.com/uupaa/items/e5856e3cb2a9fc8c5507 + // iOS9 + touchstart で呼んでいた場合、 X_ViewPort['listenOnce']('pointerup',this,this.actualPlay()) + this.disatcher[ 'asyncDispatch' ]( X_EVENT_READY ); + }; + X_WebAudio_touchState = false; + + end = X_Audio_getEndTime( this ); + begin = X_Audio_getStartTime( this, end, true ); console.log( '[WebAudio] play ' + begin + ' -> ' + end ); if( this.bufferSource ) this._sourceDispose(); if( !this.gainNode ){ - this.gainNode = X_Audio_WebAudio_context[ 'createGain' ] ? X_Audio_WebAudio_context[ 'createGain' ]() : X_Audio_WebAudio_context[ 'createGainNode' ](); - this.gainNode[ 'connect' ]( X_Audio_WebAudio_context[ 'destination' ] ); + this.gainNode = X_WebAudio_context[ 'createGain' ] ? X_WebAudio_context[ 'createGain' ]() : X_WebAudio_context[ 'createGainNode' ](); + this.gainNode[ 'connect' ]( X_WebAudio_context[ 'destination' ] ); }; - this.bufferSource = X_Audio_WebAudio_context[ 'createBufferSource' ](); - this.bufferSource.buffer = this.buffer; + this.bufferSource = X_WebAudio_context[ 'createBufferSource' ](); + this.bufferSource.buffer = this.audioBuffer; this.bufferSource[ 'connect' ]( this.gainNode ); this.gainNode[ 'gain' ].value = this.gain; // おかしい、stop 前に外していても呼ばれる、、、@Firefox33.1 // 破棄された X.Callback が呼ばれて、obj.proxy() でエラーになる。Firefox では、onended は使わない - if( false && this.bufferSource.onended !== undefined ){ + // 多くのブラウザで onended は timer を使ったカウントより遅いので使わない + //if( this.bufferSource.onended !== undefined ){ //console.log( '> use onended' ); - this.bufferSource.onended = this._onended || ( this._onended = X_Closure_create( this, this._onEnded ) ); - } else { + //this.bufferSource.onended = this._onended || ( this._onended = X_Closure_create( this, this._onEnded ) ); + //} else { this._timerID && X_Timer_remove( this._timerID ); this._timerID = X_Timer_once( end - begin, this, this._onEnded ); - }; + //}; if( this.bufferSource.start ){ this.bufferSource.start( 0, begin / 1000, end / 1000 ); @@ -264,13 +367,13 @@ if( X_Audio_WebAudio_context ){ this.playing = true; this._startPos = begin; this._endPosition = end; - this._startTime = X_Audio_WebAudio_context.currentTime * 1000; + this._startTime = X_WebAudio_context.currentTime * 1000; this._interval = this._interval || X_Timer_add( 1000, 0, this, this._onInterval ); }, _sourceDispose : function(){ this.bufferSource.disconnect(); - delete this.bufferSource.onended; + //delete this.bufferSource.onended; delete this.bufferSource; }, @@ -279,7 +382,7 @@ if( X_Audio_WebAudio_context ){ delete this._interval; return X_CALLBACK_UN_LISTEN; }; - this.target[ 'dispatch' ]( X_EVENT_MEDIA_PLAYING ); + this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_PLAYING ); }, _onEnded : function(){ @@ -287,14 +390,14 @@ if( X_Audio_WebAudio_context ){ delete this._timerID; if( this.playing ){ - time = X_Audio_WebAudio_context.currentTime * 1000 - this._startTime - this._endPosition + this._startPos | 0; - //console.log( '> onEnd ' + ( this.playing && ( X_Audio_WebAudio_context.currentTime * 1000 - this._startTime ) ) + ' < ' + ( this._endPosition - this._startPos ) ); + time = X_WebAudio_context.currentTime * 1000 - this._startTime - this._endPosition + this._startPos | 0; + //console.log( '> onEnd ' + ( this.playing && ( X_WebAudio_context.currentTime * 1000 - this._startTime ) ) + ' < ' + ( this._endPosition - this._startPos ) ); if( this._onended ){ // Firefox 用の対策,,, if( time < 0 ) return; } else { if( time < 0 ){ - //console.log( '> onEnd crt:' + ( X_Audio_WebAudio_context.currentTime * 1000 ) + ' startTime:' + this._startTime + + //console.log( '> onEnd crt:' + ( X_WebAudio_context.currentTime * 1000 ) + ' startTime:' + this._startTime + // ' from:' + this._startPos + ' to:' + this._endPosition ); this._timerID = X_Timer_once( -time, this, this._onEnded ); return; @@ -302,31 +405,27 @@ if( X_Audio_WebAudio_context ){ }; if( this.autoLoop ){ - if( !( this.target[ 'dispatch' ]( X_EVENT_MEDIA_BEFORE_LOOP ) & X_CALLBACK_PREVENT_DEFAULT ) ){ + if( !( this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_BEFORE_LOOP ) & X_CALLBACK_PREVENT_DEFAULT ) ){ this.looped = true; - this.target[ 'dispatch' ]( X_EVENT_MEDIA_LOOPED ); + this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_LOOPED ); this.actualPlay(); }; } else { this.actualPause(); - this.target[ 'dispatch' ]( X_EVENT_MEDIA_ENDED ); + this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_ENDED ); }; }; }, actualPause : function(){ - //if( !this.playing ) return this; - console.log( '[WebAudio] pause' ); - this.seekTime = this.getActualCurrentTime(); - this._timerID && X_Timer_remove( this._timerID ); delete this._timerID; delete this.playing; if( this.bufferSource ){ - if( this.bufferSource.onended ) delete this.bufferSource.onended; + //if( this.bufferSource.onended ) delete this.bufferSource.onended; this.bufferSource.stop ? this.bufferSource.stop( 0 ) : this.bufferSource[ 'noteOff' ]( 0 ); @@ -334,7 +433,7 @@ if( X_Audio_WebAudio_context ){ }, getActualCurrentTime : function(){ - return X_Audio_WebAudio_context.currentTime * 1000 - this._startTime + this._startPos | 0; + return X_WebAudio_context.currentTime * 1000 - this._startTime + this._startPos | 0; }, afterUpdateState : function( result ){ @@ -351,16 +450,17 @@ if( X_Audio_WebAudio_context ){ X_Audio_BACKENDS.push( { - backendName : 'Web Audio', + backendID : 1, + + backendName : 'WebAudio', - canPlay : {}, // TODO HTMLAudio と同じ + canPlay : X_Audio_codecs, - // - detect : function( proxy, source, ext ){ + detect : function( proxy, source, ext ){ proxy[ 'asyncDispatch' ]( { type : X_EVENT_COMPLETE, canPlay : X_Audio_codecs[ ext ] } ); }, - klass : X_Audio_WebAudioWrapper + klass : X_WebAudio } ); };