1000首MP3歌曲让HTML5音频标签滞后

Question

我有一个个人网站： http://antonfrolov.net/music.html

我需要一个MP3播放器在那里。 我已经有超过1000首MP3曲目。

事情是我已经尝试过令人敬畏的Flash播放器，但它不会读西里尔文的名字。 所以我去了HTML5 <音频>标签，但对于一些（对你来说显而易见）的理由是它加载了每一首歌曲，即使歌曲没有播放，并且该标签没有“自动播放”属性。

对于1000多首歌曲，最简单的方法是什么？ 看看如何快速闪存是：http://antonfrolov.net/musicbackup.html

（ENG命名为轨道＃6完美的作品，而RU-命名为轨道7号拒绝读取）

谢谢你们和SO社区=）

Answer 1

请勿在“播放”按钮点击之前加载音频。动态销毁以前的音频对象。

删除所有音频标签，并添加相对属性与适当的音源，这样的事情（jQuery的）来播放按钮：

<span class="playb" rel="j/28 Days Later/28 Days Later - Ave Maria.mp3"></span> 
... 
... 
... 
<span class="playb" rel="..."></span> 
... 
<script> 
$('.playb').click(function(){ 
    $('audio').remove(); 
    $('<audio controls class><source src="'+$(this).attr('rel')+'" type="audio/mpeg"></audio>').appendTo($(this).parent()); 
}); 
</script> 

PS。有人可能会说，将这样的字符串合并并不是最佳做法，您应该先创建source元素，然后设置其src属性并用audio标记进行换行。但是这个速度更快，因为jQuery不需要对给定代码进行1000次分析。