我暂时开始将一些音乐家网站从SWFObject flash播放器转换为HTML5 ...更多的是它提供的样式易于设置。坦率地说，SWFObject和Flash一直为我高效/可靠地工作。并且必须加载每个音频剪辑的3个版本（用于x浏览器兼容性）是一种阻力。
HTML5音频 - 似乎 - 可以正常工作1个文件，但是我添加了一个非常简单的随机“播放器”，其中包含十几个文件的进度条，看起来它确实减慢了网站速度。有时页面会挂起。有时在FireFox中有一个“等待”状态消息---虽然该页面似乎正常工作。
我想我的直接问题是： 1）有一种简单的方法来监控音频标签从服务器请求的特定“流量” - 在我的代码或标签本身中查明瓶颈吗？
2）这个性能问题是HTML5的已知问题吗？ IOW：我现在应该坚持使用Flash，因为它本质上仍然更有效率吗？
3）当然，是否有一些代码问题像拇指一样伸出来，我不认为这是一个新手？
页面为：http://jchmusic.com/detroit-the-opera/
下面是我的基本音频播放器代码... php然后是jQuery。
TIA，
--- 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
}