为什么HTML5音频会在文件加载时从服务器加载所有歌曲

Question

我的本​​地Web应用程序（使用java spark框架）创建了一个Html5报告，并且某些页面包含可以播放的音频文件。

最初，这完全是通过HTML来完成的，例如

 <audio controls="controls">
            <source src="/Music/Melco\TestMusic\TestMusic\WAV\Music\David Ferrard\Across The Troubled Wave\02 - The Slave&#x27;s Lament.WAV">
        </audio>

，但是只有在音乐位于Web应用程序根文件夹的子文件夹中时，它才起作用。因此，为了解决这个问题，我创建了一个指向根文件夹的符号链接（/ Music是Web服务器目录中/的符号链接）

但是符号链接在Windows上不可用，在UNIX上，符号链接导致另一个工具出现问题，因此我正在寻找另一个解决方案。

现在我正尝试使用服务器端点，因为所有文件对服务器都是可见的

    <audio controls="controls">
        <source src="/fixsongs.play_music?url=E:\Melco\TestMusic\TestMusic\WAV\Music\David Ferrard\Across The Troubled Wave\01 - Peg and Awl.WAV">
    </audio>

而play_music端点方法是这个

public byte[] playUrl(Request request, Response response)
{
    String filename = request.queryParams("url");
    MainWindow.logger.severe("playMusic:"+filename);
    try
    {
        if (filename != null)
        {
            Path path = Paths.get(filename);
            if (Files.exists(path))
            {
                byte[] data = Files.readAllBytes(path);
                MainWindow.logger.severe("playMusic:"+filename+":" + data.length);
                return data;
            }
        }
    }
    catch(Exception ex)
    {
        MainWindow.logger.log(Level.SEVERE, ex.getMessage(), ex);
    }
    return null;
}

现在这种方法可以工作了，但是有很多问题。

我希望只在我实际单击控件上的播放时才调用play_music url，但实际上，我一开始就为前6个文件调用了它 该日志输出证明打开了网页

05/08/2018 11.53.38:BST:CmdRemote:lambda$start$90:SEVERE: >>>>>/fixsongs.play_music
05/08/2018 11.53.38:BST:ServerFixSongs:playUrl:SEVERE: playMusic:E:\Melco\TestMusic\TestMusic\WAV\Music\David Ferrard\Across The Troubled Wave\01 - Peg and Awl.WAV
05/08/2018 11.53.38:BST:CmdRemote:lambda$start$90:SEVERE: >>>>>/fixsongs.play_music
05/08/2018 11.53.38:BST:ServerFixSongs:playUrl:SEVERE: playMusic:E:\Melco\TestMusic\TestMusic\WAV\Music\David Ferrard\Across The Troubled Wave\02 - The Slave's Lament.WAV
05/08/2018 11.53.38:BST:CmdRemote:lambda$start$90:SEVERE: >>>>>/fixsongs.play_music
05/08/2018 11.53.38:BST:CmdRemote:lambda$start$90:SEVERE: >>>>>/fixsongs.play_music
05/08/2018 11.53.38:BST:CmdRemote:lambda$start$90:SEVERE: >>>>>/fixsongs.play_music
05/08/2018 11.53.38:BST:ServerFixSongs:playUrl:SEVERE: playMusic:E:\Melco\TestMusic\TestMusic\WAV\Music\David Ferrard\Across The Troubled Wave\03 - Gilmartin.WAV
05/08/2018 11.53.38:BST:ServerFixSongs:playUrl:SEVERE: playMusic:E:\Melco\TestMusic\TestMusic\WAV\Music\David Ferrard\Across The Troubled Wave\04 - Jackaro.WAV
05/08/2018 11.53.38:BST:CmdRemote:lambda$start$90:SEVERE: >>>>>/fixsongs.play_music
05/08/2018 11.53.38:BST:ServerFixSongs:playUrl:SEVERE: playMusic:E:\Melco\TestMusic\TestMusic\WAV\Music\David Ferrard\Across The Troubled Wave\06 - Calling My Children Home.WAV
05/08/2018 11.53.38:BST:ServerFixSongs:playUrl:SEVERE: playMusic:E:\Melco\TestMusic\TestMusic\WAV\Music\David Ferrard\Across The Troubled Wave\05 - Once I Knew A Pretty Girl.WAV
05/08/2018 11.53.38:BST:ServerFixSongs:playUrl:SEVERE: playMusic:E:\Melco\TestMusic\TestMusic\WAV\Music\David Ferrard\Across The Troubled Wave\01 - Peg and Awl.WAV:31265996
05/08/2018 11.53.38:BST:ServerFixSongs:playUrl:SEVERE: playMusic:E:\Melco\TestMusic\TestMusic\WAV\Music\David Ferrard\Across The Troubled Wave\02 - The Slave's Lament.WAV:36671026
05/08/2018 11.53.39:BST:ServerFixSongs:playUrl:SEVERE: playMusic:E:\Melco\TestMusic\TestMusic\WAV\Music\David Ferrard\Across The Troubled Wave\03 - Gilmartin.WAV:50752138
05/08/2018 11.53.39:BST:ServerFixSongs:playUrl:SEVERE: playMusic:E:\Melco\TestMusic\TestMusic\WAV\Music\David Ferrard\Across The Troubled Wave\04 - Jackaro.WAV:46483668
05/08/2018 11.53.39:BST:ServerFixSongs:playUrl:SEVERE: playMusic:E:\Melco\TestMusic\TestMusic\WAV\Music\David Ferrard\Across The Troubled Wave\06 - Calling My Children Home.WAV:33175954
05/08/2018 11.53.39:BST:ServerFixSongs:playUrl:SEVERE: playMusic:E:\Melco\TestMusic\TestMusic\WAV\Music\David Ferrard\Across The Troubled Wave\05 - Once I Knew A Pretty Girl.WAV:44547648

为什么要这么做？

这些文件可以播放，但是所有文件的总曲目长度设置为相同的错误值。

可以播放的文件呈现错误（将前六个文件与其余文件进行比较）

其他文件均无法播放

这是Wav文件，然后我尝试使用mp3版本的文件，现在它加载了所有文件，并且音轨长度正确。因此，我想这是资源问题，但是此应用程序将部署在运行大多数wav文件的慢速计算机上，因此在页面显示后立即尝试加载所有文件是不可接受的。仅在用户想要播放它们时才加载它们的方式，因为在大多数情况下，他们实际上并不想播放任何内容。

Answer 1

在音频标签中添加preload="none"可以解决主要问题。这样可以防止在页面加载后立即加载文件，而是仅在用户选择播放歌曲时才加载文件。 （preload的默认值为auto，它将在网页加载时尝试加载文件内容）