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

问题

my local web application (using java spark framework) creates a Html5 report and some of the pages contain audio files that can be played.

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&#x27;s Lament.WAV">
        </audio>

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 /)

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>

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.

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

why does it do that ?

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)

None of the other files could be played

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.

回答1:

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)

来源：https://stackoverflow.com/questions/51693730/why-does-html5-audio-load-all-songs-from-server-on-file-load

标签

html5

html5-audio

spark-java