Why does Html Audio control fails in html if served rather than treated as a regular file

Question

I have a Java application that can run as a regular java Swing application but creates a standard html5 report that opens in a webbrowser.

e.g

Browser Url is:

file:///C:/Users/Paul/AppData/Roaming/SongKong/Reports/FixSongsReport00574/FixSongsReport00574.html

As part of that it uses a audio tag to allow the song to be played in the browser

    <h5>
        <audio controls="controls">
            <source src="file:/E:/Test4/test.WAV">
        </audio>
    </h5>

and that works fine.

But the application can also run with a Html User Interface, it then runs a webserver using Java Spark on port 4567, if I then serve the exact same report (yes i am actually serving files the same files on the disk) to the same computer so the audio file is local to the computer it will no longer play the song.

This would be the Browser Url

http://localhost:4567/FixSongsReport00574/FixSongsReport00574.html

So why is this, since I am specifying the full path in the source element and therefore I dont see why it would be affected by factors such as where static files are served from.

But in case relevant this is the java-spark start method

    CustomJettyServerFactory customJettyServerFactory = new CustomJettyServerFactory();
    EmbeddedServers.add(
            EmbeddedServers.Identifiers.JETTY,
            new EmbeddedJettyFactory(customJettyServerFactory));

    staticFiles.externalLocation(Platform.getPlatformReportFolder().getPath());
    staticFiles.location("");
    staticFiles.expireTime(600);

    SongKong.songKong.setRemote(true);

    StartPage.recreateIndexPage();
    init();
    configureWebEndPoints();
    configureApiWebEndPoints();

    before((request, response) -> {
      MainWindow.logger.severe(">>>>>"+request.uri());
    });

    listenForFinish();

The follow up question is that although I don't understand why it doesn't work on a local computer I can see that if was connecting via a remote browser then it would not work because the file url is relative to the server not the client machine, how would i make file playable in such a case.

You may had reach the «Content-Security-Policy» of web browsers that disallow playing from localhost : output silence. You can: 1/ Use CORS 2/ Use https/ssl 3/ Pass your audio as a blob/dataURI 4/ Use the file reader API https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy — NVRM, May 15 '18 at 10:49
@Cryptopat You prompted me to check the browser console. it says 'All candidate resources failed to load. Media load paused.', does that help narrow it down ? — Paul Taylor, May 15 '18 at 10:55
Yep, this looks very much like it. Check in firefox, the message is more explicit. Check the «network» tab, the audio should have a http header different than «200 ok» See https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP , and good luck ;) — NVRM, May 15 '18 at 11:01
@Cryptopat i am already using Firefox, and there is nothing in the network tab — Paul Taylor, May 15 '18 at 11:19
If it was possible, that would mean any website could just access any visitor's computer's HDD. If you have a server (even local), why don't you store your file in its authorized storage area? — Kaiido, May 17 '18 at 11:05
@Kaiido but cant i get it working locally, this is an internal app not a website. Dont know what you mean about authorized storage area but I dont want to copy audio files just provide a way for server to allow an audio to be played via browser so how do I do that ? — Paul Taylor, May 17 '18 at 11:10
When you configured your localhost you must have set its root somewhere on your disk. You just have to store your files inside this somewhere. Alternatively, it might be possible to allow the server to go down prior its root position, but I'm not too sure about it. If it can be done, your URI would have to go down and then branch to the correct location. But the file uri scheme is relative to the user's disk, and browsers don't allow website from an http scheme to access it. — Kaiido, May 17 '18 at 11:15

score 1 · Accepted Answer · answered May 17 '18 at 14:32

1

You can't mix HTTP server and file protocols into one for security reasons. So what you need to do is below

While serving any html file read its contents and replace file:/ by something like /localfile?url=

And then you will need to create a /localfile endpoint in your embedded server code, which will read the url and then stream the file locally. Your server code will be able to access the local file and stream it.

There used to be few techniques back in the days of FF11, but they are not valid anymore

How do I view file:// images from http://localhost served pages in Firefox 11?

answered May 17 '18 at 14:32

Tarun Lalwani

142,312
9
204
265

I have relatized the filepath to where the server serves static files, i.e if I start from location that would be used for so I have but it doesnt find it, webconsole shows HTTP load failed with status 404. Load of media resource http://localhost:4567/Music/AKO/Find%20Yourself/13%20-%20Work%20Alone.wav failed, it seems to be ignoreing the ',.''s ? – Paul Taylor May 21 '18 at 11:51
Any numbers of `.` cannot take you beyond the root directory in case of web, you need to resolve the file from your code only – Tarun Lalwani May 21 '18 at 12:14
Server location was C:/Users/paulAppData/SongKong/Reports, but the music files are in C:/Users/paul/Music. So are you saying the files have to be below the server location (which they are not), would I be able to get round this using hard/symbolic links (on UNIX) or Window shortcut files ? – Paul Taylor May 21 '18 at 14:20
Unix symbolic link will help but I am not sure on windows shortcut as such if they work. Basically if you root your folder to `C:/Users/paulAppData/SongKong/Reports` then in the server you can only access paths from that root, not its parent. – Tarun Lalwani May 21 '18 at 14:24
okay, thanks I can confirm I did get it to play something under C:/Users/paulAppData/SongKong/Reports, but not had any luck with windows shortcuts. – Paul Taylor May 21 '18 at 15:17

score -1 · Answer 2 · answered May 15 '18 at 10:42

-1

try this i hope it will help you

How to? In order to make your web page plays music, the html code can be as simple as

<audio src="the location of the music url" controls> </audio>

example

<audio controls>
    <source src="/assets_tutorials/media/Loreena_Mckennitt_Snow_56bit.mp3" type="audio/mpeg">
    <source src="/assets_tutorials/media/Loreena_Mckennitt_Snow_56bit.ogg" type="audio/ogg">
    Your browser does not support the audio tag.
</audio>

answered May 15 '18 at 10:42

G. Oluwafemi

89
5

Thanks for trying but that is invalid html5 format and it doesnt fix the problem of why it works in one situation but not the other. – Paul Taylor May 15 '18 at 10:44
Thank you In HTML5, there are 3 supported audio formats: MP3, Wav, and Ogg. – G. Oluwafemi May 15 '18 at 11:07
What i am sayihg is your shorteded html using controls instead of having proper open/close tags is invalid html5 – Paul Taylor May 15 '18 at 11:17

Why does Html Audio control fails in html if served rather than treated as a regular file

2 Answers2