/*\r
* original : uupaa-js HTML5Audio.js\r
* https://code.google.com/p/uupaa-js/source/browse/trunk/0.8/src/Audio/HTML5Audio.js?r=568\r
+ * \r
+ * Windows 版 Safari は QuickTime のインストールが必要\r
+ * \r
+ * 1. iOS4(iPod 2G) で ended に達すると音が鳴らなくなる fix で解決\r
+ * 2. iOS6(iPod 4G) で ended に達すると音が鳴らなくなる fix で頻度が改善 emded イベントは発しないので、timeupdate 時に currentTime で判断する\r
+ * 3. WP7(IS12T) で最後の方にある音が鳴らない? mp3 cbr を使えばいい? 裏に回っても音が鳴り続ける\r
+ * 4. AOSP 2.x で ended に達すると音が鳴らなくなる -> リロード(audio.src='';audio.src=src;audio.load())でで解決\r
+ * 5. AOSP 3.x で ended に達すると音が鳴らなくなる -> リロード(audio.src='';audio.sr=src)で解決、但し 2.x 4.x より遅延が大きく 1 秒弱程度ある\r
+ * 6. AOSP 4.4.2- は ended に達した際に currentTime が変更できなくなり、リロードが必要になる, 4.0, 4.1, 4.2, 4.3 で確認, play() で頻度低下\r
+ * 7. Android 4.4.4 Chrome WebView は ended に達した際に play() が必要\r
+ * 8. BlinkOpera32 Win8 は HTMLAudio が壊れている、WebAudio は mp3 がデコードに失敗、ogg が動作\r
+ * \r
+ * memo\r
+ * 1. Android4.1 iframe 内の Audio は親に focus が移っても再生を継続する\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_HTMLAudio_playTrigger =\r
+ 6 <= X_UA[ 'iOS' ] ? 'loadeddata' :\r
+ X_UA[ 'iOS' ] < 5 ? 'stalled' :\r
+ X_UA[ 'iOS' ] ? 'suspend' :\r
+ X_UA[ 'Safari' ] < 4 ? 'canplaythrough' :\r
+ X_UA[ 'ChromeWV' ] ? 'canplaythrough' :\r
+ // Android 2.3.5(SBM101SH) では stalled は発生しない,,, ので必ず loadeddata もチェックする\r
+ X_UA[ 'AOSP' ] ? 'stalled' :\r
+ X_UA[ 'OperaMobile' ] || X_UA[ 'OperaTablet' ] ? 'loadeddata' :\r
+ 'loadeddata', //'canplay',\r
+ X_HTMLAudio,\r
\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
- };\r
- };\r
+ // ended が発生しない timeupdate 内で play() を呼ぶ (未検証) 不具合確認は iOS4,6\r
+ X_HTMLAudio_endedFixIOS = X_UA[ 'iOS' ] < 7,\r
+ // Android 2.3.5 で ended 時に audio.src='';audio.src=src;audio.load() を実施。 2.3.4 でも問題なし。\r
+ X_HTMLAudio_endedFixAOSP2 = X_UA[ 'AOSP' ] < 3,\r
+ // Android 3.1 で ended 時に src='';src=src を実施。\r
+ X_HTMLAudio_endedFixAOSP3 = !X_HTMLAudio_endedFixAOSP2 && X_UA[ 'AOSP' ] < 4,\r
+ // ended 時に play() を実施, currentTime が duration に張り付き更新されなければ src='';src=src を実施。\r
+ X_HTMLAudio_endedFixAOSP4 = 4 <= X_UA[ 'AOSP' ] || X_UA[ 'ChromeWV' ],\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
+ // Opera Mobile 12 は 2回目以降の currentTime へのセットで currentTime が更新されなくなるため、タイマーを使用する\r
+ X_HTMLAudio_currentTimeFix = !!X_UA[ 'OperaMobile' ] || !!X_UA[ 'OperaTablet' ],\r
+\r
+ X_HTMLAudio_volumeFix = X_UA[ 'Chrome' ],\r
+ /*\r
+ * win opera12 volume, mute の変更が2度目以降できない\r
+ */\r
+ X_HTMLAudio_volumeEnabled = !( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ) && !X_UA[ 'Opera' ],\r
+ // Gecko PC + Android でseek時に再生がしばしば止まる問題の修正\r
+ X_HTMLAudio_needPlayForSeek = X_UA[ 'Gecko' ],\r
+ // \r
+ X_HTMLAudio_pauseFix = ( X_UA[ 'Windows' ] && 12 <= X_UA[ 'Opera' ] && 0 < ' XP XPSP2 2003|XP64'.indexOf( X_UA[ 'Windows' ] ) ), // XP + Opera12 のみ?\r
+ /*\r
+ * durationFix\r
+ * duration が取得できるタイミングが遅くそれまでは infinity(PC Opera12), NaN(WP9), 0(Android 標準ブラウザ ChromeWebView) が入っている\r
+ * \r
+ * 1. touch が不要の場合、自動で再生を開始して duration を取得するまで再生する\r
+ * -> 取得後に pause or 通常再生\r
+ * 2. touch が必要な場合、タッチイベント内の audio.play() で duration 取得\r
+ * \r
+ * PC Opera12\r
+ * 1. loadeddata 等では duration が infinity で、再生後の durationchange 時に duration が判明する\r
+ * 2. duration 判明後には currentTime によるシークと、現在時間の取得が可能になる。\r
+ * 3. Opera12.17 Win32(XP) portable apps は勝手に再生が始まる、、、Win8+Opera では発生しない\r
+ * -> その際には timeupdate が発行されない、、、 iframe+image+audio で使わないときは破棄する、とか。\r
+ * -> opera11、10.54 WinXP はまとも、、、 portable が怪しい??\r
+ */\r
+ X_HTMLAudio_need1stTouch = X_UA[ 'iOS' ] || X_UA[ 'ChromeWV' ] || ( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ), \r
+ X_HTMLAudio_durationFix = ( X_UA[ 'Windows' ] && 12 <= X_UA[ 'Opera' ] ) || X_UA[ 'ChromeWV' ] || ( X_UA[ 'WinPhone' ] && X_UA[ 'IE9' ] ),\r
\r
- startTime : function( time ){\r
- return getHTML5AudioWrapper( this ).startTime( time );\r
- },\r
+ X_HTMLAudio_shortPlayFix = X_UA[ 'AOSP' ]; // Android 4.1.1 でも遭遇(ただしm4a, mp3は優秀, oggはシークが乱れる)\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
+if( X_Audio_constructor ){\r
\r
- X_Audio_HTML5AudioWrapper = X.EventDispatcher.inherits(\r
- 'X.AV.HTML5AudioWrapper',\r
- X.Class.POOL_OBJECT,\r
+ X_HTMLAudio = X_AudioBase[ 'inherits' ](\r
+ 'X.HTMLAudio',\r
+ X_Class.POOL_OBJECT,\r
{\r
+ _closed : true,\r
+ _loaded : false,\r
+ _ready : false, \r
+ _src : '',\r
\r
- proxy : null,\r
+ _currentFixStart : 0,\r
+ _currentFixBegin : 0,\r
+\r
+ _durationFixPhase : X_HTMLAudio_durationFix ? 1 : 0,\r
+ _durationFixSkip : X_HTMLAudio_durationFix && !X_HTMLAudio_need1stTouch, \r
+ _lastCurrentTime : 0,\r
+\r
+ _shortPlayFixON : false,\r
+ _shortPlayFixTime : 0,\r
\r
- _closed : true,\r
- _lastUserAction : '',\r
+ _endedFixON : false,\r
\r
- _loop : false,\r
- _startTime : 0,\r
- _volume : 0.5,\r
- _autoplay : false,\r
+ _kickTimerID : false, // 処理が混み入ると AOSP で音声が再生されない\r
+ _lastKickTime : 0,\r
\r
- Constructor : function( proxy, source, option ){\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
+ 'Constructor' : function( disatcher, source, option ){\r
+ var raw;\r
\r
- this._rawObject = X_Audio_rawAudio || new Audio( source );//X.Node.create( 'audio', { src : source } ).appendToRoot();//( X.X_Node_systemNode );\r
+ this.disatcher = disatcher || this;\r
+ this._closed = false;\r
+ this._src = source;\r
\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
- X_Audio_rawAudio = null;\r
+ if( X_HTMLAudio_shortPlayFix ){\r
+ this._shortPlayFixON = X_URL_getEXT( source ) === 'm4a';\r
};\r
+ \r
+ this.setState( option );\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
+ if( option[ 'useVideo' ] ){\r
+ 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
+ X_elmBody.appendChild( raw );\r
+ } else {\r
+ raw = X_TEMP.rawAudio || new X_Audio_constructor( source );\r
+ // X_Doc_create( 'audio', { src : source } )[ 'appendTo' ]( X.Doc.body );\r
+ raw.autobuffer = raw.autoplay = false;\r
+ };\r
\r
- this.listenOnce( X.Event.KILL_INSTANCE );\r
- },\r
- \r
- handleEvent : function( e ){\r
- switch( e.type ){\r
+ this[ '_rawObject' ] = raw;\r
+ \r
+ this[ 'listen' ]( [\r
+ X_EVENT_KILL_INSTANCE,\r
+ X_HTMLAudio_playTrigger,\r
+ //'loadstart', 'load',\r
+ 'progress', 'error',\r
+ // 'suspend', 'abort', 'emptied', 'stalled',\r
+ // 'play', 'pause', 'seeked', 'ratechange', 'volumechange',\r
+ 'loadedmetadata', 'loadeddata', 'canplay', 'canplaythrough',\r
+ 'playing', 'waiting', 'seeking',\r
+ 'durationchange', 'timeupdate', 'ended' ] );\r
\r
- case X.Event.KILL_INSTANCE :\r
- break;\r
+ if( X_TEMP.rawAudio ){\r
+ raw.src = source;\r
+ raw.load(); // AOSP2 で必要\r
+ delete X_TEMP.rawAudio;\r
};\r
},\r
- /*\r
- * http://uguisu.skr.jp/html/table3.html\r
- */\r
- handleEventProxy : function( e ){\r
- console.log(e.type);\r
+ \r
+ handleEvent : function( e ){\r
+ var raw = this[ '_rawObject' ],\r
+ actualEnded = e.type === 'ended',\r
+ ended = actualEnded,\r
+ ready = e.type === X_HTMLAudio_playTrigger,\r
+ eventType, duration, end, now;\r
+ \r
+ // global に公開\r
+ //window[ '__rawAudio' ] = this[ '_rawObject' ];\r
\r
+ e.type !== 'timeupdate' && console.log( ' > ' + e.type );\r
+ \r
switch( e.type ){\r
- case 'loadstart' : // ブラウザがコンテンツの検索を開始した場合に発生\r
+\r
+ case X_EVENT_KILL_INSTANCE :\r
+ // 【javascript】モバイル向けブラウザでも音を鳴らしたい【WebAudio】\r
+ // http://ingaouhou.com/archives/3633\r
+ // ・使い終わったインスタンスはload()しておくとやや安定\r
+ this.playing && this.actualPause();\r
+ delete this._closed;\r
+ delete this._loaded;\r
+ \r
+ raw.src = '';\r
+ raw.load();\r
+ \r
+ // removeChild for video\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
+\r
+ //case 'loadstart' : // ブラウザがコンテンツの検索を開始した場合に発生\r
+ //break;\r
+ case 'progress' : // ブラウザがコンテンツの取得を実行した場合に発生\r
+ // console.log( e.loaded + ' ' + e.total * 100 + '%' );\r
+ // iem9 で常に0 raw.networkState;\r
+ // opera Android 12 で buffered.end() へのアクセスはエラー try catch も無効、iem9 は常に end(0) = 0\r
+ //console.log( 'buffered.end ' + raw.buffered && raw.buffered.end(0) ); \r
break;\r
- case 'suspend' : // ブラウザが意図的にコンテンツの取得を現在行っていない場合に発生（ダウンロードは未完了）\r
- case 'abort' : // ダウンロードの完了前にコンテンツの取得を停止した場合に発生（この停止はエラーによるものではない）\r
- case 'error' : // コンテンツの取得実行中にエラーが発生した場合に発生\r
- case 'emptied' : // 読み込み中に致命的なエラーが発生したか、実行状態ででload()メソッドが実行された場合に発生\r
- case 'stalled' : // ブラウザがコンテンツの取得を試みたが、データがまだ用意されていない場合に発生\r
- case 'play' : // 再生が開始された。play()メソッドからの復帰後に発生する場合に発生\r
- case 'pause' : // 再生が一時停止された。pauseメソッドからの復帰後に発生する場合に発生\r
- case 'loadedmetadata' : // ブラウザがメディアリソースの長さと寸法を判定した場合に発生\r
- case 'loadeddata' : // コンテンツの表示を現在の再生位置で初めて行えるようになった場合に発生\r
- case 'waiting' : // 次のフレームが利用不可のため再生を停止したが、そのフレームがやがて利用可能になると想定している場合に発生\r
- case 'playing' : // 再生が開始された場合に発生\r
- case 'canplay' : // 今すぐに再生を再開できるが、バッファリングが不十分でコンテンツを最後まで表示できないと予測している場合に発生\r
+ \r
+ case 'loadeddata' : // コンテンツの表示を現在の再生位置で初めて行えるようになった場合に発生\r
+ if( !this._endedFixON ){\r
+ ready = true;\r
+ };\r
+ case 'canplay' : // 今すぐに再生を再開できるが、バッファリングが不十分でコンテンツを最後まで表示できないと予測している場合に発生\r
+ if( X_HTMLAudio_durationFix && !X_HTMLAudio_need1stTouch && this._durationFixPhase === 1 ){\r
+ console.log( '▲ DurationFix の開始 @' + e.type );\r
+ this._durationFixPhase = 2;\r
+ raw.play();\r
+ raw.currentTime = 0; // 必要！\r
+ };\r
case 'canplaythrough' : // 今すぐに再生を開始してもバッファリングで停止することなく最後まで表示できると予測している場合に発生\r
- case 'seeking' : // シークがtrueに変化し、イベントを発生させるのに十分な時間がシーク操作にかかっている場合に発生\r
- case 'seeked' : // シークがfalseに変化した場合に発生\r
- case 'timeupdate' : // 通常の再生が行われ現在の再生位置の変化が起こった場合に発生\r
+ if( this._endedFixON ){\r
+ console.log( '▽ onEndedFix の終了 @' + e.type );\r
+ this._endedFixON = false;\r
+ this.actualPlay();\r
+ };\r
+ case 'loadedmetadata' : // ブラウザがメディアリソースの長さと寸法を判定した場合に発生\r
+ case 'durationchange' : // duration属性が更新された場合に発生\r
+ if( !this.duration ){\r
+ duration = raw.duration;\r
+ };\r
break;\r
- \r
- case 'ended' :\r
- //!this._closed && this._lastUserAction !== 'stop' && this._loop && this.play();\r
+ \r
+ // TODO firefox で 短い音声でtimeupdate, ended が発火しない <- 最後の音に無音部分を追加する\r
+ case 'timeupdate' : // 通常の再生が行われ現在の再生位置の変化が起こった場合に発生\r
+ if( this._durationFixPhase & 3 ){ // 1 or 2\r
+ duration = raw.duration;\r
+ } else\r
+ if( raw.currentTime === this._lastCurrentTime ){\r
+ eventType = X_EVENT_MEDIA_WAITING;\r
+ } else {\r
+ this._lastCurrentTime = raw.currentTime;\r
+\r
+ if( this.playing ){\r
+ end = X_Audio_getEndTime( this ) + this._shortPlayFixTime;\r
+ now = this.getActualCurrentTime();\r
+ //console.log( now + ' / ' + end );\r
+ if( 0 + end <= 0 + now ){ // 0+ なぜか iem9 で必要,,,\r
+ if( this.autoLoop ){\r
+ console.log( '☆★☆ 曲の最後に到達 @timeupdate now-end:' + ( now - end ) );\r
+ ended = true;\r
+ if( X_HTMLAudio_endedFixIOS ) actualEnded = true;\r
+ } else {\r
+ this.actualPause();\r
+ eventType = X_EVENT_MEDIA_ENDED;\r
+ };\r
+ } else {\r
+ eventType = X_EVENT_MEDIA_PLAYING;\r
+ };\r
+ };\r
+ };\r
break;\r
\r
- case 'ratechange' : // defaultPlaybackRate属性とplaybackRate属性のどちらかが更新された場合に発生\r
- case 'durationchange' : // duration属性が更新された場合に発生\r
- case 'volumechange' : // volume属性とmuted属性のどちらかが変化した場合に発生\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
+ // Opera12 src = '' で error が発生、無視する\r
+ // eventType = X_EVENT_ERROR;\r
+ break;\r
+ \r
+ case 'playing' : // 再生が開始された場合に発生\r
+ if( X_HTMLAudio_volumeFix ){\r
+ raw.volume = this.gain;\r
+ };\r
+ if( X_HTMLAudio_currentTimeFix ){\r
+ this._currentFixStart = X_Timer_now(); // 正確な再生開始時間に補正\r
+ };\r
+ eventType = !this._durationFixSkip && !this._endedFixON ? X_EVENT_MEDIA_PLAYING : X_EVENT_MEDIA_WAITING;\r
+ //case 'play' : // 再生が開始された。play()メソッドからの復帰後に発生する場合に発生\r
+ //case 'pause' : // 再生が一時停止された。pauseメソッドからの復帰後に発生する場合に発生\r
+ //case 'seeked' : \r
+ //case 'ratechange' : // defaultPlaybackRate属性とplaybackRate属性のどちらかが更新された場合に発生\r
+ //case 'volumechange' : // volume属性とmuted属性のどちらかが変化した場合に発生\r
+ break;\r
+ \r
+ case 'waiting' : // 次のフレームが利用不可のため再生を停止したが、そのフレームがやがて利用可能になると想定している場合に発生\r
+ eventType = X_EVENT_MEDIA_WAITING;\r
+ break;\r
+ case 'seeking' : // シークがtrueに変化し、イベントを発生させるのに十分な時間がシーク操作にかかっている場合に発生\r
+ eventType = X_EVENT_MEDIA_SEEKING;\r
+ break;\r
+ };\r
+ \r
+ // duration は Infinity, NaN, 0 の場合があるため、これを除外する\r
+ if( 0 < duration && X_Type_isFinite( duration ) ){\r
+ this.duration = duration * 1000;\r
+\r
+ if( this._durationFixPhase === 2 ){\r
+ console.log( '▼ DurationFix の終了 @' + e.type );\r
+ this._durationFixPhase = 4;\r
+ \r
+ ready = true;\r
+ \r
+ if( this.autoplay || this._loaded ){\r
+ console.log( '☆ 再生 <- DurationFix の終了' );\r
+ this._durationFixSkip = false;\r
+ this.actualPlay();\r
+ } else\r
+ if( X_HTMLAudio_pauseFix ){\r
+ console.log( '☆ PAUSE <- DurationFix の終了' );\r
+ //raw.src = '';\r
+ //raw.load();\r
+ this.actualPause(); \r
+ };\r
+ } else\r
+ if( this._durationFixPhase ){\r
+ this._durationFixPhase = 4;\r
+ }; \r
+ };\r
+\r
+ this._loaded = this._loaded || ready;\r
+\r
+ // \r
+ if( ended ){\r
+ if( !this._closed && this.autoLoop ){\r
+ if( !( this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_BEFORE_LOOP ) & X_CALLBACK_PREVENT_DEFAULT ) ){\r
+ this.looped = true;\r
+ this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_LOOPED );\r
+ ( X_HTMLAudio_endedFixAOSP3 || X_HTMLAudio_endedFixAOSP4 || X_HTMLAudio_endedFixIOS ) && actualEnded && console.log( '☆★☆ 音声の継続用の play() @ended' );\r
+ this.actualPlay(\r
+ ( X_HTMLAudio_endedFixAOSP4 || X_HTMLAudio_endedFixIOS ) && actualEnded,\r
+ ( X_HTMLAudio_endedFixAOSP3 || X_HTMLAudio_endedFixAOSP2 ) && actualEnded );\r
+ };\r
+ } else {\r
+ this.seekTime = 0;\r
+ delete this.playing;\r
+ this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_ENDED );\r
+ };\r
+ } else\r
+ if( this._loaded && this.duration && !this._ready ){\r
+ this._ready = true;\r
+ this.autoplay && X_Timer_once( 16, this, this.play );\r
+ this.disatcher[ 'asyncDispatch' ]( X_EVENT_READY );\r
+ console.log( '> Audio Loaded!! ' + e.type + ' d:' + ( this.duration | 0 ) );\r
+ } else\r
+ if( eventType ){\r
+ this.disatcher[ 'dispatch' ]( eventType );\r
+ eventType === X_EVENT_ERROR && this[ 'kill' ]();\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
- \r
- close : function(){\r
- // pool, proxy を外す\r
- //this.kill();\r
},\r
- \r
- play : function( position ){\r
+\r
+ actualPlay : function( forcePlay, forceReload ){\r
+ var raw = this[ '_rawObject' ],\r
+ 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
- \r
- if( !this._rawObject.paused ){\r
- this.currentTime( this._startTime );\r
- };\r
- this._rawObject.play();\r
+ if( this._closed ) return;\r
+ \r
+ \r
+ if( !raw.src ){ // X_HTMLAudio_pauseFix によって src が空になっている\r
+ console.log( '○ 削除された audio.src の復帰' );\r
+ raw.src = this._src;\r
+ //return;\r
+ }; \r
+ \r
+ if( !this._ready && ( !X_HTMLAudio_durationFix || !X_HTMLAudio_need1stTouch ) ){\r
+ this.autoplay = true;\r
+ return;\r
+ };\r
+\r
+ if( X_HTMLAudio_durationFix && X_HTMLAudio_need1stTouch && this._durationFixPhase === 1 ){\r
+ console.log( '▲ DurationFix の開始(タッチ用)' );\r
+ this._durationFixPhase = 2;\r
+ };\r
+\r
+ end = X_Audio_getEndTime( this );\r
+ begin = X_Audio_getStartTime( this, end, true );\r
+\r
+ this._lastCurrentTime = begin / 1000;\r
+\r
+ if( this._shortPlayFixON ){\r
+ this._shortPlayFixTime = ( 1000 < end - begin ) ? 200 : 400;\r
+ if( this.duration < end + this._shortPlayFixTime ){\r
+ this._shortPlayFixTime = this.duration - end;\r
+ };\r
+ };\r
+\r
+ if( this._durationFixSkip || this._endedFixON ){\r
+ console.log( '☆ audio.play をスキップ ' + begin + ' -> ' + end + ' crt:' + ( raw.currentTime | 0 ) );\r
+ } else {\r
+ if( !this.playing ){\r
+ if( X_HTMLAudio_volumeFix ){\r
+ raw.volume = 0;\r
+ } else {\r
+ raw.volume = X_HTMLAudio_volumeEnabled ? this.gain : 1;\r
+ };\r
+ raw.play();\r
+ this.playing = true;\r
+ \r
+ if( X_UA[ 'AOSP' ] && !this._kickTimerID ){\r
+ this._kickTimerID = X_Timer_add( 100, 0, this, this._kick );\r
+ };\r
+ } else\r
+ if( X_HTMLAudio_needPlayForSeek || forcePlay ){\r
+ raw.play();\r
+ console.log( '[HTMLAudio] currentTime より先.' );\r
+ };\r
+ \r
+ //http://himaxoff.blog111.fc2.com/blog-entry-97.html\r
+ //Firefox3.6では一度も play() していない状態で currentTime = 0 を実行するとエラーになる。\r
+ //また、GoogleChrome7 では currentTime = 0 直後に play() すると、pause()した位置前後の音が混ざることがある。(少なくとも自分の環境では) \r
+ raw.currentTime = this._lastKickTime = this._lastCurrentTime;\r
+ console.log( '[HTMLAudio] play ' + begin + ' -> ' + end + ' crt:' + ( raw.currentTime | 0 ) + ' last:' + this._lastCurrentTime );\r
+ \r
+ // Android4.0.5 で ended イベント時に currentTime が duration に張り付いたまま変更できない\r
+ if( forceReload || ( X_HTMLAudio_endedFixAOSP4 && raw.duration && raw.currentTime === raw.duration ) ){\r
+ raw.src = '';\r
+ raw.src = this._src;\r
+ this.playing = false;\r
+ this._endedFixON = true;\r
+ console.log( '△ onEndedFix の開始' );\r
+ raw.currentTime = this._lastCurrentTime;\r
+ this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_WAITING );\r
+ X_HTMLAudio_endedFixAOSP2 && raw.load();\r
+ }; \r
+ };\r
+\r
+ if( X_HTMLAudio_currentTimeFix ){\r
+ this._currentFixBegin = begin;\r
+ this._currentFixStart = X_Timer_now();\r
+ };\r
},\r
\r
- // [CHROME][FIX] volume\r
- _fixForChrome : X_UA.Chrome && function( volume ){\r
- !this._closed && ( this._rawObject.volume = volume );\r
- },\r
+ _kick : function(){\r
+ var raw = this[ '_rawObject' ];\r
+ \r
+ console.log( ' >> KICK ? ct:' + ( raw.currentTime ) + ' lkt:' + this._lastKickTime );\r
+ if( this.playing && raw.currentTime === this._lastKickTime ){\r
+ this.disatcher[ 'dispatch' ]( X_EVENT_MEDIA_WAITING );\r
+ console.log( ' >> KICK !!' );\r
+ raw.play();\r
+ } else {\r
+ delete this._kickTimerID;\r
+ return X_CALLBACK_UN_LISTEN;\r
+ };\r
+ },\r
\r
- pause : function(){\r
- if( !this._closed && !this._rawObject.error ){\r
- this._lastUserAction = 'pause';\r
- this._rawObject.pause(); \r
- };\r
+ actualPause : function(){\r
+ console.log( '[HTMLAudio] pause' );\r
+ \r
+ this.seekTime = this.getActualCurrentTime();\r
+\r
+ delete this._currentFixStart;\r
+\r
+ !this[ '_rawObject' ].error && this[ '_rawObject' ].pause();\r
+ \r
+ if( X_HTMLAudio_pauseFix ){\r
+ this[ '_rawObject' ].src = '';\r
+ if( X_HTMLAudio_durationFix ){\r
+ delete this._durationFixPhase;\r
+ delete this._durationFixSkip;\r
+ };\r
+ };\r
+ delete this.playing;\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
+ getActualCurrentTime : function(){\r
+ return ( X_HTMLAudio_currentTimeFix ?\r
+ X_Timer_now() - this._currentFixStart + this._currentFixBegin :\r
+ this[ '_rawObject' ].currentTime * 1000 | 0 );\r
},\r
- \r
- loop : function( v ){\r
- if( v === undefined ) return this._loop;\r
- this._rawObject.loop = this._loop = v;\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
+ getActualError : function(){\r
+ return this[ '_rawObject' ].error || 0;\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
\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
+ afterUpdateState : function( result ){\r
+ if( result & 3 ){ // seek\r
+ this.actualPlay();\r
+ } else\r
+ if( ( result & 4 ) && X_HTMLAudio_volumeEnabled ){\r
+ this[ '_rawObject' ].volume = this.gain;\r
+ }; \r
}\r
\r
}\r
);\r
\r
+ X_HTMLAudio && X_Audio_BACKENDS.push(\r
+ {\r
+ backendID : 2,\r
+ \r
+ backendName : 'HTMLAudio',\r
+ \r
+ canPlay : X_Audio_codecs,\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
+ proxy[ 'asyncDispatch' ]( { type : X_EVENT_COMPLETE, canPlay : X_Audio_codecs[ ext ] } );\r
+ },\r
+ \r
+ klass : X_HTMLAudio\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
