【发布时间】：2015-01-10 02:42:06
【问题描述】：
我正在开发一个网页（除其他外）允许访问者选择要预览的音乐曲目。
我有大约 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 等。
有没有办法更改代码，使其在用户单击“预览”按钮之前不会下载音乐曲目？
非常感谢您对此提供的任何帮助。
【问题讨论】：
标签： jquery embed audio-player