javascript - 1000 mp3 songs make HTML5 audio tag lag

Question

I have a personal website: http://antonfrolov.net/music.html

I need an mp3 player over there. I've got over 1 thousand mp3 tracks.

The thing is I have tried awesome Flash-mp3 Player but it doesn't read Cyrillic names. So I went to HTML5 < audio > tag but for some (obvious for you) reason it loads every single song even though the songs are not playing, and the tag doesn't have 'autoplay' attribute.

What would be the Easiest way to do this for 1000+ songs? Look how fast the Flash is: http://antonfrolov.net/musicbackup.html

(ENG-named track #6 works flawlessly, while RU-named track #7 refuses to be read)

Thank you guys and SO community =)

Answer 1

在“播放”按钮单击之前不要加载音频。创建音频对象动态销毁前一个。

删除所有音频标签，并添加 rel 属性以播放具有正确音频源的按钮，如下所示（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 次。