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">

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

1 个答案: