いくつかのミュージシャン サイトを SWFObject フラッシュ プレーヤーから HTML5 に暫定的に変換し始めました。率直に言って、SWFObject と Flash は常に効率的かつ確実に機能してきました。また、各オーディオ クリップの 3 つのバージョンをロードしなければならないのは (x ブラウザーとの互換性のため)、面倒です。
HTML5 オーディオは 1 つのファイルに対しては正常に動作するようですが、非常に単純なランダム 'プレーヤー' を追加し、多数のファイルに対してプログレス バーを表示したところ、サイトの速度が実際に低下しているようです。ページがハングすることがあります。ページは正常に動作しているように見えますが、FireFox で「待機中」ステータス メッセージが表示されることがあります。
私の当面の質問は次のとおりだと思います：1）オーディオタグがサーバーから要求している特定の「トラフィック」を監視する簡単な方法はありますか？コードまたはタグ自体のボトルネックを特定するために？
2) このパフォーマンスの問題は HTML5 の既知の問題ですか? IOW: 今のところ Flash を使い続けるべきですか?
3) そしてもちろん、初心者にはわからないようなコードの問題はありますか?
ページは: http://jchmusic.com/detroit-the-opera/
以下は私の初歩的なオーディオ プレーヤー コードです... php の次に jQuery です。
ティア、
---JC
function jchAudioPlayer() {
$path = '/var/chroot/home/content/html/downloads/snippets' ;
$str = '';
if ($handle = opendir( $path ) ) {
$num=0;
$a = array();
while (false !== ($entry = readdir($handle))) {
if ($entry != "." && $entry != "..")
$path_parts = pathinfo( $entry);
if( $path_parts['extension'] == 'mp3')
$a[] = $entry;
}
shuffle($a);
$path_parts = pathinfo( $a[0] );
$openingfile = $path_parts['filename'];
$str .= '<div class="autoplay audioplayer-wrapper" rel="/downloads/snippets/detroit/' . $openingfile . '">';
$str .= '<div class="audio-controls"><div class="progress-wrapper"><span class="progress"></span></div><a class="play5 pause" href="#"></a></div>';
$str .= '<div class="audioplayer">';
foreach($a as $entry) {
$path_parts = pathinfo( $entry);
$basefile = $path_parts['filename'];
$num++;
$rn = rand(6,36);
$str .= '<div class="songpara"><a style="font-size: ' . $rn . 'px" rel="' . $num . '" class="play5' . ( ($basefile == $openingfile) ? ' playing' : '') . '" href="/downloads/snippets/' . $basefile . '">' . $basefile . '</a></div>' ;
}
$str .= '</div>';
$str .= '</div>';
closedir($handle);
}
return $str;
}
?>
jQuery( init );
// Initialize the form
function init() {
//audio
var audioTagSupport = !!(document.createElement('audio').canPlayType);
if( audioTagSupport ) {
var myAudio= new Audio("");
// Need to check the canPlayType first or an exception will be thrown for those browsers that don't support it
if (myAudio.canPlayType) {
// Currently canPlayType(type) returns: "no", "maybe" or "probably"
canPlayOgg = ("no" != myAudio.canPlayType("audio/ogg")) && ("" != myAudio.canPlayType("audio/ogg"));
canPlayMp3 = ("no" != myAudio.canPlayType("audio/mpeg")) && ("" != myAudio.canPlayType("audio/mpeg"));
canPlayWav = ("no" != myAudio.canPlayType("audio/wav")) && ("" != myAudio.canPlayType("audio/wav"));
var ext;
if(canPlayOgg)
ext = '.ogg';
else if(canPlayMp3)
ext = '.mp3';
else if(canPlayWav)
ext = '.wav';
}
// ext = '.mp3';
// alert( ext );
jQuery('.play5').addClass('paused');
if( ext && audioTagSupport ) {
var audioElements = [];
jQuery('.play5').each( function(i) {
var y = 0;
var x;
var xv = jQuery(this);
x = jQuery(this).attr('href') + ext;
audioElements.push( document.createElement('audio') );
y = audioElements.length-1;
audioElements[y].setAttribute('src', x);
audioElements[y].load();
audioElements[y].addEventListener("canplay", function(){ xv.addClass('canplay'); });
audioElements[y].addEventListener("timeupdate", function() {
var value = 0;
var aLink = this;
if ( aLink.currentTime > 0)
{ value = Math.floor( (100 / aLink.duration) * aLink.currentTime); }
jQuery('.progress').css('width', value + "%")}, false);
// audioElements[y].currentTime=0;
});
function updateProgress( aLink ) {
var value = 0;
if ( aLink.currentTime > 0)
{ value = Math.floor( (100 / aLink.duration) * aLink.currentTime); }
jQuery('.progress').css('width', value + "%");
}
// add a 'self play' function. usually put on wrapper div
jQuery('.autoplay').each( function(i) {
if( jQuery(this).attr("rel") ) {
var xv = jQuery(this);
var y = 0;
var x;
x = jQuery(this).attr('rel') + ext;
audioElements.push( document.createElement('audio') );
//alert(audioElements.length);
//alert(xv);
// alert(x);
y = audioElements.length-1;
audioElements[y].setAttribute('src', x);
audioElements[y].load();
audioElements[y].addEventListener("canplay", function(){ xv.addClass('canplay'); });
audioElements[y].play();
// alert(x);
// return true;
}
});
// stop playback on click through (note returns true so default carries on)
jQuery('.autoplay a').click( function(e) {
var playMsg = 'Play';
var pauseMsg = 'Pause';
var y = audioElements.length-1;
if( jQuery(this).hasClass('playpause') ) {
e.preventDefault();
if( jQuery(this).hasClass('paused') ) {
audioElements[y].play();
jQuery(this).text(pauseMsg)
jQuery(this).removeClass('paused')
}else{
audioElements[y].pause();
jQuery(this).text(playMsg)
jQuery(this).addClass('paused')
}
} else {
audioElements[y].pause();
return true;
}
});
//audio player
jQuery('.play5').click(function(e) {
e.preventDefault();
if( jQuery(this).hasClass('pause') ) {
for( var p = 0; p < audioElements.length;)
{ audioElements[p].pause();
//audioElements[p].currentTime=0;
p++; };
jQuery('.play5.playing').removeClass('playing').addClass('paused');
} else if( jQuery(this).hasClass('paused') && jQuery(this).hasClass('canplay') ) {
jQuery('.play5').each( function(i) {
var x = jQuery(this);
jQuery(x).removeClass('playing');
jQuery(x).addClass('paused');
var z = jQuery(x).attr('rel');
audioElements[z].pause();
});
for( var p = 0; p < audioElements.length;) { audioElements[p].pause(); p++; };
jQuery(this).removeClass('paused');
jQuery(this).addClass('playing');
var z = jQuery(this).attr('rel');
audioElements[z].currentTime=0;
audioElements[z].play();
} else {
jQuery('#title').removeClass('playing');
jQuery(this).removeClass('playing');
jQuery(this).addClass('paused');
var z = jQuery(this).attr('rel');
audioElements[z].pause();
}
});
}
} // audioTagSupport
}