0
我正在開發一個網頁(其中包括)允許訪問者選擇音樂曲目進行預覽。音樂在網頁造成緩慢的加載時間 - 嵌入音樂的最佳方式
我有大約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等。
有沒有辦法改變代碼,使其不會下載音樂曲目,直到用戶點擊預覽按鈕?
非常感謝任何幫助,你可以給我這個。
好極了!工作一種享受。謝謝 :-) – 2015-01-09 19:14:08