网页上的音乐导致加载时间缓慢 - 嵌入音乐的最佳方式

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?

您必须在 audio 标签上设置 preload="none" :

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

网页上的音乐导致加载时间缓慢 - 嵌入音乐的最佳方式

Music on webpage causing slow load times - best way to embed music

embed

jquery

audio-player