音乐在网页造成缓慢的加载时间 - 嵌入音乐的最佳方式

Question

我正在开发一个网页（其中包括）允许访问者选择音乐曲目进行预览。

我有大约20首曲目可以选择，它引起了我的注意（通过Web Page Test），通过我已经实现的方式，浏览器正在下载所有曲目（它报告我的网页是30MB！）。

这里是我已经习惯把上预览按钮的页面的代码（我使用的插件mp3 Player？）：

<audio id='audio<?php echo $uniqueID; ?>'> 
     <source src='<?php echo $fullMusicURLs; ?>' type='audio/mpeg' /> 
     <object id='flash_obj<?php echo $uniqueID; ?>' class='playerpreview' type='application/x-shockwave-flash' data='<?php echo TEMPLATE_URL; ?>/music_player/player_mp3_multi.swf' width='200' height='200'> 
     <param name='movie' value='<?php echo TEMPLATE_URL; ?>/music_player/player_mp3_multi.swf' /> 
     <param name='bgcolor' value='#085c68' /> 
     <param name='FlashVars' id='paramFlashVars<?php echo $uniqueID; ?>' value='<?php echo $flashVars; ?>' /> 
     <embed href='<?php echo TEMPLATE_URL; ?>/music_player/player_mp3_multi.swf' bgcolor='#085c68' width='200' height='200' name='movie' align='' type='application/x-shockwave-flash' flashvars='<?php echo $flashVars; ?>' /> 
     </object> 

    </audio> 
    <div id='custom_player_fallback<?php echo $uniqueID; ?>'></div> 
    <div id="musicPlayer<?php echo $uniqueID; ?>"> 
     <div class="pcss3f pcss3f-layout-resp pcss3f-size-small"> 
      <button type='button' class="musicPreviewButtonButton" id="previewMusicButton<?php echo $uniqueID; ?>" onClick="document.getElementById('audio<?php echo $uniqueID; ?>').play()">Preview</button> 
     </div> 
    </div> 

    <script> 
    var templateURL = "<?php echo TEMPLATE_URL; ?>"; 
    var musicURL = "<?php echo trim($fullMusicURLs); ?>"; 
    var musicTitle = "<?php echo trim($fullMusicTitles); ?>"; 
    var idIncrement = "<?php echo $uniqueID; ?>"; 
    if (document.createElement('audio').canPlayType) { 
    if (!document.createElement('audio').canPlayType('audio/mpeg') && 
     !document.createElement('audio').canPlayType('audio/ogg')) { 

    swfobject.embedSWF(templateURL+"/music_player/player_mp3_multi.swf", 
         "custom_player_fallback"+idIncrement, "200", "200", "9.0.0", "", 
         {"mp3":musicURL, "title":musicTitle}, 
         {"bgcolor":"#085c68"} 
         ); 
    } 
    } 
</script> 

的代码工作出色，做一切我需要做的。它适用于iPhone和iPad等。

有没有办法改变代码，使其不会下载音乐曲目，直到用户点击预览按钮？

非常感谢任何帮助，你可以给我这个。

Answer 1

请参阅此相关的问题：How to prevent HTML5 audio from predownload/streaming on load?

必须设置preload="none"在audio标签：

<audio id='audio<?php echo $uniqueID; ?>' preload="none">