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

2023-12-09

我的本地 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 是网络服务器目录中到 / 的符号链接)

但符号链接在 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

为什么要这样做?

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

可播放文件的渲染错误(将前六个与其余文件进行比较)

enter image description here

其他文件均无法播放

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


Adding preload="none"音频标签解决了主要问题。它可以防止页面加载后立即加载文件,而是仅在用户选择播放歌曲时才加载文件。 (预加载的默认值为自动,它将在加载网页时尝试加载文件内容)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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