* https://code.google.com/p/uupaa-js/source/browse/trunk/0.8/src/Audio/HTML5Audio.js?r=568\r
*/\r
\r
-var X_Audio_HTML5Audio, X_Audio_HTML5AudioWrapper, X_Audio_rawAudio,\r
- X_Audio_HTML5Audio_LIVE_LIST = [],\r
- X_Audio_HTML5Audio_POOL_LIST = [];\r
+var X_Audio_HTMLAudio_playTrigger =\r
+ 6 <= X_UA[ 'iOS' ] ? 'loadeddata' :\r
+ X_UA[ 'iOS' ] < 5 ? 'stalled' :\r
+ X_UA[ 'iOS' ] ? 'suspend' :\r
+ X_UA[ 'AndroidBrowser2' ] ? 'stalled' : // Android 2.3.5(SBM101SH) では stalled は発生しない,,,\r
+ X_UA[ 'AndroidBrowser4' ] ? 'loadeddata' : \r
+ X_UA[ 'OperaMobile' ] || X_UA[ 'OperaTablet' ] ? 'loadeddata' : 'canplay',\r
+ X_Audio_HTMLAudioWrapper,\r
+ X_Audio_constructor = window[ 'Audio' ] || window.HTMLAudioElement,\r
+ X_Audio_rawAudio,\r
+ // Opera Mobile 12 android4.4.4 & 2.3.5 は 2回目以降の currentTime へのセットで currentTime が更新されなくなるため、タイマーを使用する\r
+ X_Audio_HTMLAudioWrapper_currentTimeFix = !!X_UA[ 'OperaMobile' ] || !!X_UA[ 'OperaTablet' ], // || ( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ),\r
+ // Android1.6+MobileOpera12では無理っぽい、、、\r
+ X_Audio_HTMLAudioWrapper_badOperaAndroid = X_Audio_HTMLAudioWrapper_currentTimeFix && X_UA[ 'Android' ] < 2,\r
+\r
+ // 一方 Desktop の Opera12 は、loadeddata 等では duration が infinity で、再生後の durationchange 時に duration が判明する。\r
+ // opera12 volume, mute の変更が2度目以降できない\r
+ // duration 判明後には currentTime によるシークと、現在時間の取得が可能になる。\r
+ // canplay で play() durationchange で duration が取れたら loadedmetadata->loadeddata -> canplay する\r
+ // boombox.js に書いてあった currentTime の効かないブラウザってこいつのことみたい、、、\r
+ // Opera12.17 Win32(XP) portable apps は勝手に再生が始まる、、、その際には timeupdate が発行されない、、、 iframe+image+audio で使わないときは破棄する、とか。\r
+ // opera11、10.54 WinXP はまとも、、、\r
+ // X_Audio_Sprite_handleEvent でも使用\r
+ X_Audio_HTMLAudioWrapper_ieMobile9Fix = ( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ),\r
+ X_Audio_HTMLAudioWrapper_durationFix = ( !X_Audio_HTMLAudioWrapper_currentTimeFix && 12 <= X_UA[ 'Opera' ] ),\r
+ \r
+ X_Audio_HTMLAudioWrapper_shortPlayFix = X_UA[ 'AndroidBrowser2' ],\r
\r
+ X_Audio_codecs;\r
\r
-if( window.HTMLAudioElement ){\r
- function getHTML5AudioWrapper( proxy ){\r
- var i = X_Audio_HTML5Audio_LIVE_LIST.length;\r
- for( ; i; ){\r
- if( X_Audio_HTML5Audio_LIVE_LIST[ --i ].proxy === proxy ) return X_Audio_HTML5Audio_LIVE_LIST[ i ];\r
+if( X_Audio_constructor && !X_Audio_HTMLAudioWrapper_badOperaAndroid ){\r
+ //http://himaxoff.blog111.fc2.com/blog-entry-97.html\r
+ //引数なしで new Audio() とすると、Operaでエラーになるそうなので注意。\r
+ X_Audio_rawAudio = new X_Audio_constructor( '' );\r
+\r
+ if( X_Audio_rawAudio.canPlayType ){\r
+ X_Audio_codecs = {\r
+ 'mp3' : X_Audio_rawAudio.canPlayType('audio/mpeg'),\r
+ 'opus' : X_Audio_rawAudio.canPlayType('audio/ogg; codecs="opus"'),\r
+ 'ogg' : X_Audio_rawAudio.canPlayType('audio/ogg; codecs="vorbis"'),\r
+ 'wav' : X_Audio_rawAudio.canPlayType('audio/wav; codecs="1"'),\r
+ 'aac' : X_Audio_rawAudio.canPlayType('audio/aac'),\r
+ 'm4a' : X_Audio_rawAudio.canPlayType('audio/x-m4a') + X_Audio_rawAudio.canPlayType('audio/m4a') + X_Audio_rawAudio.canPlayType('audio/aac'),\r
+ 'mp4' : X_Audio_rawAudio.canPlayType('audio/x-mp4') + X_Audio_rawAudio.canPlayType('audio/mp4') + X_Audio_rawAudio.canPlayType('audio/aac'),\r
+ 'weba' : X_Audio_rawAudio.canPlayType('audio/webm; codecs="vorbis"')\r
+ };\r
+ (function( k, v ){\r
+ for( k in X_Audio_codecs ){\r
+ if( X_EMPTY_OBJECT[ k ] ) continue;\r
+ v = X_Audio_codecs[ k ];\r
+ X_Audio_codecs[ k ] = v && v.split( 'no' ).join( '' );\r
+ console.log( k + ' ' + X_Audio_codecs[ k ] );\r
+ };\r
+ })();\r
+ } else {\r
+ // iOS3.2.3\r
+ X_Audio_codecs = {\r
+ 'mp3' : X_UA[ 'IE' ] || X_UA[ 'Chrome' ] || ( X_UA[ 'Windows' ] && X_UA[ 'Safari' ] ),\r
+ 'ogg' : 5 <= X_UA[ 'Gecko' ] || X_UA[ 'Chrome' ] || X_UA[ 'Opera' ] ,\r
+ 'wav' : X_UA[ 'Gecko' ] || X_UA[ 'Opera' ] || ( X_UA[ 'Windows' ] && X_UA[ 'Safari' ] ),\r
+ 'aac' : X_UA[ 'IE' ] || X_UA[ 'WebKit' ],\r
+ 'm4a' : X_UA[ 'IE' ] || X_UA[ 'WebKit' ],\r
+ 'mp4' : X_UA[ 'IE' ] || X_UA[ 'WebKit' ],\r
+ 'weba' : 2 <= X_UA[ 'Gecko' ] || 10.6 <= X_UA[ 'Opera' ] // firefox4+(Gecko2+)\r
};\r
};\r
\r
- X_Audio_HTML5Audio = X_Class_override(\r
- new X.EventDispatcher(),\r
- {\r
- backendName : 'HTML5 Audio',\r
- /*\r
- * HTML5 の audio 要素と video 要素でサポートされているメディアフォーマット\r
- * https://developer.mozilla.org/ja/docs/Web/HTML/Supported_media_formats\r
- * \r
- * 主要ブラウザのHTML5 audioタグで使えるファイル形式の再生対応状況を調べてみた\r
- * http://sothis.blog.so-net.ne.jp/2010-10-27\r
- * ダメ元で仕様に含まれていない SHOUTcast もテストしてみました。\r
- * \r
- * IE9 の HTML5 Audio について\r
- * http://kentablog.cluscore.com/2011/05/ie9-html5-audio.html\r
- * 1.Audioオブジェクトを作ることができないので、Audioタグを使う\r
- * 2.クロスドメインアクセスには、「clientaccesspolicy.xml」か「crossdomain.xml」が必要\r
- * 3.wav が不可\r
- * \r
- * IE9でHTML5 autio タグが無効になる\r
- * http://bbs.wankuma.com/index.cgi?mode=al2&namber=64886&KLOG=109\r
- * IEのバージョン9.0.8112.16421では、Audioオブジェクトのnewも対応してました。\r
- * createElement等で動的生成すると、よろしくない\r
- * \r
- * media-can-play-wav-audio.html\r
- * https://github.com/adobe/webkit/blob/master/LayoutTests/media/media-can-play-wav-audio.html\r
- * testExpected("audio.canPlayType('audio/wav; codecs=1')", "probably");\r
- * \r
- * HTML5 audioタグ ブラウザ間の違い\r
- * 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
- * - volume, muted iPhone(iOS4-6)、Android(2.3.6)では動作せず。\r
- * - FireFox3.6, Android 2.3.6については、src変更後、load()を呼び出さないと切り替わらなかった。iPhoneはload()が不要。\r
- */ \r
- detect : function( source, ext ){\r
- var ok, mineType = 'audio/' + ext;\r
- switch( ext ){\r
- case 'mp3' :\r
- ok = X_UA.IE || X_UA.Chrome || X_UA.Safari; //( X_UA.OS === 'windows' && X_UA.Safari );\r
- mineType = 'audio/mpeg';\r
- break;\r
- case 'ogg' :\r
- ok = 15 <= X_UA.Gecko || X_UA.Chrome || X_UA.Opera;\r
- break;\r
- case 'm4a' :\r
- ok = X_UA.IE || X_UA.WebKit;\r
- mineType = 'audio/mp4';\r
- break;\r
- case 'webm' :\r
- ok = 2 <= X_UA.Gecko || 10.6 <= X_UA.Opera; // firefox4+(Gecko2+)\r
- break;\r
- case 'wav' :\r
- ok = X_UA.Gecko || X_UA.Opera || X_UA.Safari; //( X_UA.OS === 'windows' && X_UA.Safari );\r
- //mineType = 'audio/wav'; // audio/x-wav ?\r
- break;\r
- default :\r
- mineType = '';\r
- };\r
- \r
- if( !ok && mineType ){\r
- if( !X_Audio_rawAudio ) X_Audio_rawAudio = new Audio;\r
- ok = X_Audio_rawAudio.canPlayType( mineType );\r
- };\r
- \r
- this.asyncDispatch( ok ? 'support' : 'nosupport' );\r
- \r
- return this;\r
- },\r
- \r
- register : function( proxy, source, option ){\r
- X_Audio_HTML5Audio_LIVE_LIST.push( new X_Audio_HTML5AudioWrapper( proxy, source, option ) );\r
- },\r
- \r
- close : function(){\r
- return getHTML5AudioWrapper( this ).close();\r
- },\r
- \r
- play : function( position ){\r
- return getHTML5AudioWrapper( this ).play( position );\r
- },\r
- \r
- pause : function(){\r
- return getHTML5AudioWrapper( this ).pause();\r
- },\r
- \r
- stop : function(){\r
- return getHTML5AudioWrapper( this ).stop();\r
- },\r
- \r
- loop : function( v ){\r
- return getHTML5AudioWrapper( this ).loop( v );\r
- },\r
- \r
- state : function(){\r
- return getHTML5AudioWrapper( this ).state();\r
- },\r
- \r
- volume : function( v ){\r
- return getHTML5AudioWrapper( this ).volume( v );\r
- },\r
- \r
- startTime : function( time ){\r
- return getHTML5AudioWrapper( this ).startTime( time );\r
- },\r
- \r
- currentTime : function( time ){\r
- return getHTML5AudioWrapper( this ).currentTime( time );\r
- },\r
- \r
- isPlaying : function(){\r
- return getHTML5AudioWrapper( this ).isPlaying();\r
- }\r
- }\r
- );\r
- \r
- X_Audio_BACKENDS.push( X_Audio_HTML5Audio );\r
- \r
- X_Audio_HTML5AudioWrapper = X.EventDispatcher.inherits(\r
+ X_Audio_HTMLAudioWrapper = X_EventDispatcher[ 'inherits' ](\r
'X.AV.HTML5AudioWrapper',\r
- X.Class.POOL_OBJECT,\r
+ X_Class.POOL_OBJECT,\r
{\r
\r
proxy : null,\r
\r
- _closed : true,\r
- _lastUserAction : '',\r
+ startTime : 0,\r
+ endTime : -1,\r
+ loopStartTime : -1,\r
+ loopEndTime : -1,\r
+ seekTime : -1,\r
+ duration : 0,\r
\r
- _loop : false,\r
- _startTime : 0,\r
- _volume : 0.5,\r
- _autoplay : false,\r
+ playing : false,\r
+ error : 0, \r
+ loop : false,\r
+ looped : false,\r
+ autoplay : false,\r
+ volume : 0.5,\r
+\r
+ _playTime : 0,\r
+ _closed : true,\r
+ _loaded : false,\r
+ _beginTime : 0,\r
+ _playForDuration : 0,\r
+ _lastCurrentTime : 0,\r
+ _src : '',\r
\r
Constructor : function( proxy, source, option ){\r
+ var raw;\r
+ \r
this.proxy = proxy;\r
this._closed = false;\r
\r
- if( option.loop ) this._loop = true;\r
- if( option.startTime ) this._startTime = option.startTime;\r
- if( option.volume ) this._volume = option.volume;\r
- \r
- this._rawObject = X_Audio_rawAudio || new Audio( source );//X.Node.create( 'audio', { src : source } ).appendToRoot();//( X.X_Node_systemNode );\r
+ X_AudioWrapper_updateStates( this, option );\r
+\r
+ if( option[ 'useVideo' ] ){\r
+ this[ '_rawObject' ] = raw = document.createElement( 'video' );\r
+ raw.preload = 'none'; // auto, metadata, none\r
+ //raw.autoplay = false, // no-auto\r
+ raw.loop = false;\r
+ raw.muted = false;\r
+ //raw.crossorigin = option[ 'crossorigin' ] || ''; //crossorigin: "anonymous", X.URL.isSameDomain() で切り替え\r
+ raw.style.cssText = 'position:absolute;bottom:0;left:-50px;width:100px;height:100px;opacity:0;';\r
+ raw.controls = false;\r
+ raw.WebKitPlaysInline = true;\r
+ raw.src = source;\r
+ //raw.onclick = "alert('play');this.play();";\r
+ document.body.appendChild( raw );\r
+ //raw.load();\r
+ } else {\r
+ this[ '_rawObject' ] = X_Audio_rawAudio || new X_Audio_constructor( source );\r
+ // X_Doc_create( 'audio', { src : source } )[ 'appendTo' ]( X.Doc.body );\r
+ this[ '_rawObject' ].autobuffer = false;\r
+ this._src = source;\r
+ };\r
\r
- this.listen( [\r
+ this[ 'listen' ]( [\r
'loadstart', 'load', 'progress', 'suspend', 'abort', 'error', 'emptied', 'stalled', 'play', 'pause', 'loadedmetadata',\r
'loadeddata', 'waiting', 'playing', 'canplay', 'canplaythrough', 'seeking', 'seeked', 'timeupdate', 'ended',\r
'ratechange', 'durationchange', 'volumechange' ], this.handleEventProxy ); \r
- \r
- if( X_Audio_rawAudio ){\r
- X_Audio_rawAudio.src = source;\r
- X_Audio_rawAudio.load(); // 要る?\r
+\r
+ //document.body.appendChild( this[ '_rawObject' ] );\r
+ this[ '_rawObject' ].autoplay = false;\r
+\r
+ if( X_Audio_rawAudio === this[ '_rawObject' ] ){\r
+ if( X_Audio_HTMLAudioWrapper_badOperaAndroid ){\r
+ X_Audio_HTMLAudioWrapper_badOperaAndroid && alert( 12 );\r
+ X_EventDispatcher_toggleAllEvents( this, false );\r
+ this[ '_rawObject' ] = new X_Audio_constructor( X_URL_toAbsolutePath( source ) );\r
+ //X_EventDispatcher_toggleAllEvents( this, true );\r
+ } else {\r
+ X_Audio_rawAudio.src = source;\r
+ };\r
+\r
+ //this[ '_rawObject' ] = new X_Audio_constructor( X_URL_toAbsolutePath( source ) );\r
+ /*!X_Audio_Sprite_needTouchFirst && */ X_Audio_rawAudio.load(); // 要る?\r
X_Audio_rawAudio = null;\r
};\r
\r
- //document.body.appendChild( this._rawObject );\r
-\r
- this._rawObject.volume = this._volume;\r
- this._rawObject.autoplay = false;\r
- option.autoplay && X.Timer.once( 100, this, this.play );\r
- \r
- this.listenOnce( X.Event.KILL_INSTANCE );\r
+ this[ 'listenOnce' ]( X_EVENT_KILL_INSTANCE );\r
},\r
\r
handleEvent : function( e ){\r
switch( e.type ){\r
\r
- case X.Event.KILL_INSTANCE :\r
+ case X_EVENT_KILL_INSTANCE :\r
break;\r
};\r
},\r
* http://uguisu.skr.jp/html/table3.html\r
*/\r
handleEventProxy : function( e ){\r
- console.log(e.type);\r
+ var type, loaded, end, now;\r
+ \r
+ X_Audio_HTMLAudioWrapper_badOperaAndroid && alert( e.type );\r
+ \r
+ console.log( e.type );\r
\r
switch( e.type ){\r
case 'loadstart' : // ブラウザがコンテンツの検索を開始した場合に発生\r
break;\r
case 'progress' : // ブラウザがコンテンツの取得を実行した場合に発生\r
- //console.log( e.loaded + ' ' + e.total * 100 + '%' );\r
- console.log( this._rawObject.buffered.end(0) / this._rawObject.duration * 100 + '%' );\r
+ console.log( e.loaded + ' ' + e.total * 100 + '%' );\r
+ // iem9 で常に0 this[ '_rawObject' ].networkState;\r
+ // opera Android 12 で buffered.end() へのアクセスはエラー try catch も無効、iem9 は常に end(0) = 0\r
+ //console.log( 'buffered.end ' + this[ '_rawObject' ].buffered && this[ '_rawObject' ].buffered.end(0) ); \r
+ break;\r
+ \r
+ case 'canplay' : // 今すぐに再生を再開できるが、バッファリングが不十分でコンテンツを最後まで表示できないと予測している場合に発生\r
+ if( X_Audio_HTMLAudioWrapper_durationFix && this._playForDuration === 0 ){\r
+ //console.log( 'DurationFix開始 - ' + this[ '_rawObject' ].duration );\r
+ this._playForDuration = 1;\r
+ this[ '_rawObject' ].play();\r
+ this[ '_rawObject' ].currentTime = this._beginTime / 1000; // 必要！\r
+ return;\r
+ };\r
+ case 'loadedmetadata' : // ブラウザがメディアリソースの長さと寸法を判定した場合に発生\r
+ case 'loadeddata' : // コンテンツの表示を現在の再生位置で初めて行えるようになった場合に発生\r
+ case 'canplaythrough' : // 今すぐに再生を開始してもバッファリングで停止することなく最後まで表示できると予測している場合に発生\r
+ if( X_Audio_HTMLAudioWrapper_durationFix && this._playForDuration !== 2 ) return;\r
+ this.duration = this.duration || this[ '_rawObject' ].duration * 1000;\r
break;\r
+ \r
+ case 'stalled' : // ブラウザがコンテンツの取得を試みたが、データがまだ用意されていない場合に発生\r
+ // Android2 で ready 扱い?\r
case 'suspend' : // ブラウザが意図的にコンテンツの取得を現在行っていない場合に発生（ダウンロードは未完了）\r
+ // iOS で ready 扱い\r
+ case 'emptied' : // 読み込み中に致命的なエラーが発生したか、実行状態ででload()メソッドが実行された場合に発生\r
case 'abort' : // ダウンロードの完了前にコンテンツの取得を停止した場合に発生（この停止はエラーによるものではない）\r
+ break;\r
+ \r
case 'error' : // コンテンツの取得実行中にエラーが発生した場合に発生\r
- case 'emptied' : // 読み込み中に致命的なエラーが発生したか、実行状態ででload()メソッドが実行された場合に発生\r
- case 'stalled' : // ブラウザがコンテンツの取得を試みたが、データがまだ用意されていない場合に発生\r
+ type = X_EVENT_ERROR;\r
+ break;\r
+ \r
+ case 'playing' : // 再生が開始された場合に発生\r
+ if( X_Audio_HTMLAudioWrapper_currentTimeFix ){\r
+ this._playTime = X_Timer_now();\r
+ };\r
+ type = X_EVENT_MEDIA_PLAYING;\r
case 'play' : // 再生が開始された。play()メソッドからの復帰後に発生する場合に発生\r
case 'pause' : // 再生が一時停止された。pauseメソッドからの復帰後に発生する場合に発生\r
- case 'loadedmetadata' : // ブラウザがメディアリソースの長さと寸法を判定した場合に発生\r
- case 'loadeddata' : // コンテンツの表示を現在の再生位置で初めて行えるようになった場合に発生\r
+ case 'seeked' : // シークがfalseに変化した場合に発生\r
+ case 'ratechange' : // defaultPlaybackRate属性とplaybackRate属性のどちらかが更新された場合に発生\r
+ case 'volumechange' : // volume属性とmuted属性のどちらかが変化した場合に発生\r
+ if( this._playForDuration === 1 ) return;\r
+ break;\r
+ \r
case 'waiting' : // 次のフレームが利用不可のため再生を停止したが、そのフレームがやがて利用可能になると想定している場合に発生\r
- case 'playing' : // 再生が開始された場合に発生\r
- case 'canplay' : // 今すぐに再生を再開できるが、バッファリングが不十分でコンテンツを最後まで表示できないと予測している場合に発生\r
- case 'canplaythrough' : // 今すぐに再生を開始してもバッファリングで停止することなく最後まで表示できると予測している場合に発生\r
+ type = X_EVENT_MEDIA_WAITING;\r
case 'seeking' : // シークがtrueに変化し、イベントを発生させるのに十分な時間がシーク操作にかかっている場合に発生\r
- case 'seeked' : // シークがfalseに変化した場合に発生\r
- case 'timeupdate' : // 通常の再生が行われ現在の再生位置の変化が起こった場合に発生\r
+ type = type || X_EVENT_MEDIA_SEEKING;\r
+ if( this._playForDuration === 1 ) return;\r
break;\r
- \r
+ \r
case 'ended' :\r
- //!this._closed && this._lastUserAction !== 'stop' && this._loop && this.play();\r
+ if( !this._closed && this.loop ){\r
+ if( !( this.proxy[ 'dispatch' ]( X_EVENT_MEDIA_BEFORE_LOOP ) & X_Callback_PREVENT_DEFAULT ) ){\r
+ this.looped = true;\r
+ this.proxy[ 'dispatch' ]( X_EVENT_MEDIA_LOOPED );\r
+ this.play();\r
+ };\r
+ return;\r
+ };\r
+ type = X_EVENT_MEDIA_ENDED;\r
+ this.seekTime = 0;\r
+ delete this.playing;\r
break;\r
\r
- case 'ratechange' : // defaultPlaybackRate属性とplaybackRate属性のどちらかが更新された場合に発生\r
+ case 'timeupdate' : // 通常の再生が行われ現在の再生位置の変化が起こった場合に発生\r
+ if( X_Audio_HTMLAudioWrapper_ieMobile9Fix ){\r
+ if( this._playForDuration === 1 ){\r
+ console.log( 'tu ' + this[ '_rawObject' ].duration );\r
+ if( !this.duration && X_Type_isFinite( this[ '_rawObject' ].duration ) ){\r
+ this.duration = this.duration || this[ '_rawObject' ].duration * 1000;\r
+ this._playForDuration = 2;\r
+ \r
+ //this.proxy[ 'asyncDispatch' ]( 'loadedmetadata' );\r
+ //this.proxy[ 'asyncDispatch' ]( 'loadeddata' );\r
+ //this.proxy[ 'asyncDispatch' ]( 'canplay' );\r
+ //this.proxy[ 'asyncDispatch' ]( 'canplaythrough' );\r
+ loaded = true;\r
+ //console.log( 'durationFix が完了' + this.duration );\r
+ break;\r
+ } else {\r
+ this[ '_rawObject' ].currentTime = this._beginTime / 1000; // 必要！\r
+ return;\r
+ };\r
+ } else\r
+ if( this[ '_rawObject' ].currentTime === this._lastCurrentTime ){\r
+ //this.proxy[ 'dispatch' ]( 'seeking' );\r
+ this.proxy[ 'dispatch' ]( X_EVENT_MEDIA_WAITING );\r
+ return;\r
+ };\r
+ this._lastCurrentTime = this[ '_rawObject' ].currentTime;\r
+ };\r
+ this.duration = this.duration || this[ '_rawObject' ].duration * 1000;\r
+\r
+ if( this.playing ){\r
+ end = X_AudioWrapper_getEndTime( this );\r
+ now = X_Audio_HTMLAudioWrapper_currentTimeFix ? X_Timer_now() - this._playTime + this._beginTime : this[ '_rawObject' ].currentTime * 1000 | 0;\r
+ if( 0 + end <= 0 + now ){ // なぜか iem9 で必要,,,\r
+ if( this.loop ){\r
+ if( !( this.proxy[ 'dispatch' ]( X_EVENT_MEDIA_BEFORE_LOOP ) & X_Callback_PREVENT_DEFAULT ) ){\r
+ this.looped = true;\r
+ this.proxy[ 'dispatch' ]( X_EVENT_MEDIA_LOOPED );\r
+ this.play();\r
+ };\r
+ } else {\r
+ this.pause();\r
+ this.proxy[ 'dispatch' ]( X_EVENT_MEDIA_ENDED );\r
+ };\r
+ return;\r
+ };\r
+ } else {\r
+ return;\r
+ };\r
+ type = X_EVENT_MEDIA_PLAYING;\r
+ break;\r
+ \r
case 'durationchange' : // duration属性が更新された場合に発生\r
- case 'volumechange' : // volume属性とmuted属性のどちらかが変化した場合に発生\r
+ \r
+ if( !X_Audio_HTMLAudioWrapper_durationFix ){\r
+ this.duration = this[ '_rawObject' ].duration * 1000;\r
+ } else\r
+ // Desktop Opera では Infinity, IEM9 では NaN\r
+ if( !this.duration && X_Type_isFinite( this[ '_rawObject' ].duration ) ){\r
+ \r
+ //console.log( this[ '_rawObject' ].duration );\r
+ \r
+ this.duration = this[ '_rawObject' ].duration * 1000;\r
+ \r
+ if( this._playForDuration === 0 ) this._playForDuration = 2;\r
+ \r
+ if( this._playForDuration === 1 ){\r
+ this._playForDuration = 2;\r
+ \r
+ console.log( 'Loaded ' + this._loaded );\r
+ \r
+ if( this._loaded ){\r
+ this[ '_rawObject' ].currentTime = this._beginTime / 1000;\r
+ console.log( '設定 ' + this._beginTime );\r
+ return;\r
+ };\r
+ \r
+ /*\r
+ this.proxy[ 'asyncDispatch' ]( 'loadedmetadata' );\r
+ this.proxy[ 'asyncDispatch' ]( 'loadeddata' );\r
+ this.proxy[ 'asyncDispatch' ]( 'canplay' );\r
+ this.proxy[ 'asyncDispatch' ]( 'canplaythrough' ); */\r
+ \r
+ \r
+ loaded = true;\r
+ console.log( 'durationFix が完了' + this.duration );\r
+ \r
+ if( this.autoplay ){\r
+ this[ '_rawObject' ].currentTime = this._beginTime / 1000; \r
+ } else {\r
+ // Opera12.17 WinXP で勝手に再生される不具合\r
+ // これで一応再生は止まる、、、\r
+ this[ '_rawObject' ].src = '';\r
+ //this[ '_rawObject' ].load(); \r
+ };\r
+ };\r
+ \r
+ };\r
+ break;\r
+ \r
+ };\r
+ \r
+ \r
+ if( !this._loaded && ( loaded || e.type === X_Audio_HTMLAudio_playTrigger || e.type === 'loadeddata' ) ){\r
+ this.autoplay && X_Timer_once( 16, this, this.play );\r
+ this._loaded = true;\r
+ this.proxy[ 'dispatch' ]( X_EVENT_READY );\r
+ console.log( 'Loaded! ' + e.type + ' d:' + ( this.duration | 0 ) );\r
+ return;\r
};\r
- //console.log( 'html5 ' + e.type + ' ' + ( this.proxy._listeners && this.proxy._listeners[ e.type ] && this.proxy._listeners[ e.type ].length ) );\r
- //e.type === 'canplaythrough' && console.dir( e );\r
- this.proxy.dispatch( e );\r
+ \r
+ loaded || ( type && this.proxy[ 'dispatch' ]( type ) );\r
},\r
\r
close : function(){\r
- // pool, proxy を外す\r
- //this.kill();\r
+ // 【javascript】モバイル向けブラウザでも音を鳴らしたい【WebAudio】\r
+ // http://ingaouhou.com/archives/3633\r
+ // ・使い終わったインスタンスはload()しておくとやや安定\r
+ this.playing && this.pause();\r
+ delete this._closed;\r
+ delete this._loaded;\r
+ \r
+ this[ '_rawObject' ].src = '';\r
+ this[ '_rawObject' ].load();\r
},\r
\r
- play : function( position ){\r
+ play : function(){\r
+ var begin, end;\r
+ \r
// もし kill 後に autoplayTimer で呼ばれても、_closed==true なので平気\r
- if( this._closed ) return;\r
- this._lastUserAction = 'play';\r
- \r
- if( X_UA.Chrome ){ // [CHROME][FIX] volume TODO どの version で 修正される？\r
- // [!] delay\r
- X.Timer.once( 0, this, this._fixForChrome, [ this._rawObject.volume ] );\r
- this._rawObject.volume = 0;\r
- };\r
+ if( this._closed ) return;\r
+ if( !this._loaded /* && !X_Audio_Sprite_inTouchAction */ ){\r
+ this.autoplay = true;\r
+ return;\r
+ };\r
+\r
+ if( X_Audio_HTMLAudioWrapper_ieMobile9Fix && this._playForDuration === 0 ){\r
+ console.log( 'DurationFix開始 - ' + this[ '_rawObject' ].duration );\r
+ this._playForDuration = 1;\r
+ };\r
+\r
+ end = X_AudioWrapper_getEndTime( this );\r
+ begin = this._beginTime = X_AudioWrapper_getStartTime( this, end, true );\r
+\r
+ if( X_Audio_HTMLAudioWrapper_shortPlayFix ){\r
+ begin -= end - begin > 1000 ? 200 : 400;\r
+ begin = begin < 0 ? 0 : begin;\r
+ };\r
+\r
+ if( !this[ '_rawObject' ].src ){\r
+ this._beginTime = begin;\r
+ this[ '_rawObject' ].src = this._src;\r
+ delete this._playForDuration;\r
+ };\r
+\r
\r
- if( !this._rawObject.paused ){\r
- this.currentTime( this._startTime );\r
+ if( !this.playing ){\r
+ if( X_UA[ 'Chrome' ] ){ // [CHROME][FIX] volume TODO どの version で 修正される？\r
+ // [!] delay\r
+ X_Timer_once( 0, this, this._fixForChrome );\r
+ this[ '_rawObject' ].volume = 0;\r
+ } else {\r
+ this[ '_rawObject' ].volume = this.volume;\r
+ };\r
+ this[ '_rawObject' ].play();\r
+ this.playing = true;\r
};\r
- this._rawObject.play();\r
- },\r
- \r
- // [CHROME][FIX] volume\r
- _fixForChrome : X_UA.Chrome && function( volume ){\r
- !this._closed && ( this._rawObject.volume = volume );\r
+ //http://himaxoff.blog111.fc2.com/blog-entry-97.html\r
+ //Firefox3.6では一度も play() していない状態で currentTime = 0 を実行するとエラーになる。\r
+ //また、GoogleChrome7 では currentTime = 0 直後に play() すると、pause()した位置前後の音が混ざることがある。(少なくとも自分の環境では)\r
+ this[ '_rawObject' ].currentTime = this._lastCurrentTime = begin / 1000;\r
+\r
+ console.log( '[HTMLAudio] play ' + begin + ' -> ' + end );\r
+ \r
+ if( X_Audio_HTMLAudioWrapper_currentTimeFix ){\r
+ this._beginTime = begin;\r
+ this._playTime = X_Timer_now();\r
+ };\r
+\r
},\r
+ \r
+ // [CHROME][FIX] volume\r
+ _fixForChrome : X_UA[ 'Chrome' ] && function(){\r
+ !this._closed && ( this[ '_rawObject' ].volume = this.volume );\r
+ },\r
\r
pause : function(){\r
- if( !this._closed && !this._rawObject.error ){\r
- this._lastUserAction = 'pause';\r
- this._rawObject.pause(); \r
- };\r
- },\r
- \r
- stop : function(){\r
- if( !this._closed && !this._rawObject.error ){\r
- this._lastUserAction = 'stop';\r
- this._rawObject.pause();\r
- this.currentTime( this._startTime );\r
- };\r
- },\r
- \r
- loop : function( v ){\r
- if( v === undefined ) return this._loop;\r
- this._rawObject.loop = this._loop = v;\r
+ if( !this.playing ) return;\r
+ \r
+ this.seekTime = this.state().currentTime;\r
+\r
+ delete this._playTime;\r
+\r
+ !this[ '_rawObject' ].error && this[ '_rawObject' ].pause();\r
+ \r
+ if( X_Audio_HTMLAudioWrapper_durationFix ){\r
+ this[ '_rawObject' ].src = '';\r
+ // load();\r
+ };\r
+ delete this.playing;\r
},\r
\r
- state : function(){\r
- var paused = !!this._rawObject.paused,\r
- ended = !!this._rawObject.ended;\r
- \r
- if( this._lastUserAction === 'stop' ){\r
- if( paused ){\r
- paused = false;\r
- ended = true;\r
- };\r
- };\r
+ state : function( obj ){\r
+ var result;\r
+ \r
+ if( obj === undefined ){\r
+ return {\r
+ startTime : this.startTime,\r
+ endTime : this.endTime < 0 ? this.duration : this.endTime,\r
+ loopStartTime : this.loopStartTime < 0 ? this.startTime : this.loopStartTime,\r
+ loopEndTime : this.loopEndTime < 0 ? ( this.endTime || this.duration ) : this.loopEndTime,\r
+ \r
+ loop : this.loop,\r
+ looped : this.looped,\r
+ volume : this.volume,\r
+ playing : this.playing, // && !this[ '_rawObject' ].error && !this[ '_rawObject' ].paused && !this[ '_rawObject' ].ended, \r
+ duration : this.duration,\r
+ \r
+ currentTime :\r
+ this.playing ?\r
+ ( X_Audio_HTMLAudioWrapper_currentTimeFix ?\r
+ X_Timer_now() - this._playTime + this._beginTime :\r
+ this[ '_rawObject' ].currentTime * 1000 | 0 ) :\r
+ this.seekTime,\r
+ /*\r
+ http://www.w3schools.com/tags/av_prop_error.asp\r
+ 1 = MEDIA_ERR_ABORTED - fetching process aborted by user\r
+ 2 = MEDIA_ERR_NETWORK - error occurred when downloading\r
+ 3 = MEDIA_ERR_DECODE - error occurred when decoding\r
+ 4 = MEDIA_ERR_SRC_NOT_SUPPORTED - audio/video not supported\r
+ */\r
+ error : this[ '_rawObject' ].error || 0 // 0, 1 ~ 4 \r
+ }; \r
+ };\r
\r
- return {\r
- loop : this._rawObject.loop,\r
- error : this._rawObject.error || 0, // 0, 1 ~ 4\r
- paused : paused,\r
- ended : ended,\r
- source : this._rawObject.src || '',\r
- duration : this._rawObject.duration || 0\r
- };\r
- },\r
- \r
- volume : function( v ){\r
- if( v === undefined ) return this.audio.volume;\r
- this._rawObject.volume = v;\r
- },\r
- \r
- startTime : function( time ){\r
- if( time === undefined ) return this._startTime;\r
- this._startTime = time;\r
- },\r
- \r
- currentTime : function( time ){\r
- if( time === undefined ) return this._rawObject.currentTime;\r
- this._rawObject.currentTime = time;\r
- },\r
- \r
- isPlaying : function(){\r
- return !this._rawObject.error && !this._rawObject.paused && !this._rawObject.ended;\r
+ result = X_AudioWrapper_updateStates( this, obj );\r
+ \r
+ if( result & 2 ){ // seek\r
+ this.play();\r
+ //} else\r
+ //if( result & 1 ){\r
+ //if( X_Audio_HTMLAudioWrapper_currentTimeFix ){\r
+ // this.play(); \r
+ //};\r
+\r
+ } else\r
+ if( result & 4 ){\r
+ this[ '_rawObject' ].volume = this.volume;\r
+ };\r
+ \r
}\r
\r
}\r
);\r
\r
+ X_Audio_BACKENDS.push(\r
+ {\r
+ backendName : 'HTML Audio',\r
+ /*\r
+ * HTML5 の audio 要素と video 要素でサポートされているメディアフォーマット\r
+ * https://developer.mozilla.org/ja/docs/Web/HTML/Supported_media_formats\r
+ * \r
+ * 主要ブラウザのHTML5 audioタグで使えるファイル形式の再生対応状況を調べてみた\r
+ * http://sothis.blog.so-net.ne.jp/2010-10-27\r
+ * ダメ元で仕様に含まれていない SHOUTcast もテストしてみました。\r
+ * \r
+ * IE9 の HTML5 Audio について\r
+ * http://kentablog.cluscore.com/2011/05/ie9-html5-audio.html\r
+ * 1.Audioオブジェクトを作ることができないので、Audioタグを使う\r
+ * 2.クロスドメインアクセスには、「clientaccesspolicy.xml」か「crossdomain.xml」が必要\r
+ * 3.wav が不可\r
+ * \r
+ * IE9でHTML5 autio タグが無効になる\r
+ * http://bbs.wankuma.com/index.cgi?mode=al2&namber=64886&KLOG=109\r
+ * IEのバージョン9.0.8112.16421では、Audioオブジェクトのnewも対応してました。\r
+ * createElement等で動的生成すると、よろしくない\r
+ * \r
+ * media-can-play-wav-audio.html\r
+ * https://github.com/adobe/webkit/blob/master/LayoutTests/media/media-can-play-wav-audio.html\r
+ * testExpected("audio.canPlayType('audio/wav; codecs=1')", "probably");\r
+ * \r
+ * HTML5 audioタグ ブラウザ間の違い\r
+ * 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
+ * - volume, muted iPhone(iOS4-6)、Android(2.3.6)では動作せず。\r
+ * - FireFox3.6, Android 2.3.6については、src変更後、load()を呼び出さないと切り替わらなかった。iPhoneはload()が不要。\r
+ */ \r
+ detect : function( proxy, source, ext ){\r
+ /*\r
+ var ok, mineType = 'audio/' + ext;\r
+ switch( ext ){\r
+ case 'mp3' :\r
+ ok = X_UA[ 'IE' ] || X_UA[ 'Chrome' ] || ( X_UA[ 'Windows' ] && X_UA[ 'Safari' ] );\r
+ mineType = 'audio/mpeg';\r
+ //if( X_UA[ 'Android' ] && X_UA[ 'Gecko' ] ) mineType = '';\r
+ break;\r
+ case 'ogg' :\r
+ ok = 15 <= X_UA[ 'Gecko' ] || X_UA[ 'Chrome' ] || X_UA[ 'Opera' ] ;\r
+ if( X_UA[ 'AndroidBrowser' ] ) mineType = '';\r
+ break;\r
+ case 'm4a' :\r
+ ok = X_UA[ 'IE' ] || X_UA[ 'WebKit' ];\r
+ mineType = 'audio/mp4';\r
+ break;\r
+ case 'webm' :\r
+ ok = 2 <= X_UA[ 'Gecko' ] || 10.6 <= X_UA[ 'Opera' ] ; // firefox4+(Gecko2+)\r
+ break;\r
+ case 'wav' :\r
+ ok = X_UA[ 'Gecko' ] || X_UA[ 'Opera' ] || ( X_UA[ 'Windows' ] && X_UA[ 'Safari' ] );\r
+ //mineType = 'audio/wav'; // audio/x-wav ?\r
+ break;\r
+ default :\r
+ mineType = '';\r
+ };\r
+ \r
+ if( !ok && mineType ){\r
+ if( !X_Audio_rawAudio ) X_Audio_rawAudio = new Audio;\r
+ ok = X_Audio_rawAudio.canPlayType( mineType );\r
+ //console.log( 'HTML Audio ' + ok + ' ext:' + ext );\r
+ };\r
+ console.log( 'HTML Audio ' + ok + ' ext:' + ext );\r
+ */\r
+ \r
+ proxy[ 'asyncDispatch' ]( { type : X_EVENT_COMPLETE, canPlay : X_Audio_codecs[ ext ] } );\r
+ },\r
+ \r
+ klass : X_Audio_HTMLAudioWrapper\r
+ \r
+ } );\r
+\r
+/*\r
+ * \r
+ * howler.js\r
+ * codecs = {\r
+ mp3: !!audioTest.canPlayType('audio/mpeg;').replace(/^no$/, ''),\r
+ opus: !!audioTest.canPlayType('audio/ogg; codecs="opus"').replace(/^no$/, ''),\r
+ ogg: !!audioTest.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/, ''),\r
+ wav: !!audioTest.canPlayType('audio/wav; codecs="1"').replace(/^no$/, ''),\r
+ aac: !!audioTest.canPlayType('audio/aac;').replace(/^no$/, ''),\r
+ m4a: !!(audioTest.canPlayType('audio/x-m4a;') || audioTest.canPlayType('audio/m4a;') || audioTest.canPlayType('audio/aac;')).replace(/^no$/, ''),\r
+ mp4: !!(audioTest.canPlayType('audio/x-mp4;') || audioTest.canPlayType('audio/mp4;') || audioTest.canPlayType('audio/aac;')).replace(/^no$/, ''),\r
+ weba: !!audioTest.canPlayType('audio/webm; codecs="vorbis"').replace(/^no$/, '')\r
+ };\r
+ */\r
+ \r
};\r
\r
\r
OSDN Git Service
