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

Question

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

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

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

但它仅在音乐位于 Web 应用程序根文件夹的子文件夹中时有效。所以为了解决这个问题，我创建了一个符号 link 到根文件夹（/Music 是一个符号 link 在网络服务器目录中到 /）

但是符号 link 在 WIndows 上不可用，而在 UNIX 上，符号 link 会导致另一个工具出现问题，所以我正在寻找另一个方法。

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

    <audio controls="controls">
        <source src="/fixsongs.play_music?url=E:\Melco\TestMusic\TestMusic\WAV\Music\David Ferrard\Across The Troubled Wave - 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: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 - Peg and Awl.WAV
05/08/2018 11.53.38:BST:CmdRemote:lambda$start: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 - The Slave's Lament.WAV
05/08/2018 11.53.38:BST:CmdRemote:lambda$start:SEVERE: >>>>>/fixsongs.play_music
05/08/2018 11.53.38:BST:CmdRemote:lambda$start:SEVERE: >>>>>/fixsongs.play_music
05/08/2018 11.53.38:BST:CmdRemote:lambda$start: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 - 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 - Jackaro.WAV
05/08/2018 11.53.38:BST:CmdRemote:lambda$start: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 - 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 - 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 - 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 - 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 - 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 - 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 - 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 - Once I Knew A Pretty Girl.WAV:44547648

为什么要这样做？

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

可播放的文件渲染错误（比较前六个和其余的）

None 个其他文件可以播放

这是 Wav 文件，然后我尝试了文件的 mp3 版本，现在它加载了所有文件并且音轨长度正确。所以我想这是一个资源问题，但是这个应用程序将部署在一个服务于大多数 wav 文件的慢速机器上，所以它不能接受它在页面显示后立即尝试加载所有文件，所以有没有仅当用户想要播放它们时才加载它们的方式，因为在大多数情况下他们实际上并不想播放任何东西。

Answer 1

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

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

Why does Html5 audio load all songs from server on file load

html

html5-audio

spark-java