为什么HTML5音频在文件加载时从服务器加载所有歌曲 [英] Why does Html5 audio load all songs from server on file load
问题描述
我的本地Web应用程序(使用java spark框架)创建了一个Html5报告，并且某些页面包含可以播放的音频文件.
my local web application (using java spark framework) creates a Html5 report and some of the pages contain audio files that can be played.
最初，这完全是通过HTML来完成的，例如
Originally this done purely via Html such as
<audio controls="controls">
<source src="/Music/Melco\TestMusic\TestMusic\WAV\Music\David Ferrard\Across The Troubled Wave\02 - The Slave's Lament.WAV">
</audio>
，但是只有在音乐位于Web应用程序根文件夹的子文件夹中时，它才起作用.因此，为了解决这个问题，我创建了一个指向根文件夹的符号链接(/Music是Web服务器目录中/的符号链接)
but it only worked if the music was in a subfolder of the Web applications root folder. So to get round this I created a symbolic link to the root folder (/Music is a symbolic link in the webservers dir to /)
但是符号链接在Windows上不可用，在UNIX上，符号链接导致另一个工具出现问题，因此我正在寻找另一个解决方案.
But symbolic link is not available on WIndows, and on UNIX the symbolic link causes a issue for another tool, so I was looking for another appraoch.
现在我正尝试使用服务器端点，因为所有文件对服务器都是可见的
Now I am trying to use a server end point because all files are visible to the server
<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端点方法是这个
and the play_music endpoint method is this
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;
}
现在这种方法可以工作了，但是有很多问题.
Now this sort of worked but there were a number of problems.
我希望只在我实际单击控件上的播放时才调用play_music url，但实际上，我一开始就为前6个文件调用了它 该日志输出证明打开了网页
I expected the play_music url to only be called when I actually click play on the control, but in fact it called it for the first 6 files as soon as I opened the webpage,as evidenced by this log output
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
为什么要这么做?
这些文件可以播放，但是所有文件的总曲目长度设置为相同的错误值.
These files could be played but the total track length for all was set to the same incorrect value.
可以播放的文件呈现错误(将前六个文件与其余文件进行比较)
The rendering of the files that could be played was wrong (compare first six with the remainder)
其他文件均无法播放
这是Wav文件，然后我尝试使用mp3版本的文件，现在它加载了所有文件，并且音轨长度正确.因此，我想这是一个资源问题，但是此应用程序将部署在运行大多数wav文件的速度较慢的计算机上，因此在页面显示后立即尝试加载所有文件是不可接受的.仅在用户想要播放它们时才加载它们的方式，因为在大多数情况下，他们实际上并不想播放任何内容.
This was with Wav files I then tried on mp3 versions of the files, now it loaded all the files and the tracklength was correct. So I guess it is a resource problem but this application is going to be deployed on a slow machine serving most wav files so its not acceptable for it to be trying to load all the files as soon as the page is displayed, so is there a way for them to only be loaded when user wants to play them, because in most cases they wont actually want to play anything.
推荐答案
在音频标签中添加preload="none"可以解决主要问题.这样可以防止在页面加载后立即加载文件，而是仅在用户选择播放歌曲时才加载文件. (preload的默认值为auto，它将在加载网页时尝试加载文件内容)
Adding preload="none" to the audio tag fixed the main issue. It prevents the files being loaded as soon as the page is loaded, instead they are only loaded if the user elects to play a song. (The default value for preload is auto and that will atttempt to load the files contents as the webpage is loaded)
这篇关于为什么HTML5音频在文件加载时从服务器加载所有歌曲的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
