Why Apache Tomcat does not see mp3 file?

Question

I develop website that must play music. But tomcat does not see mp3 file that I want to listen.

Here is part of my internalAccountTemplate.xhtml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:ui="http://java.sun.com/jsf/facelets">
<f:view contentType="text/html">
    <h:head>
        <title><ui:insert name="title" /></title>
    </h:head>
    <h:body styleClass="defaultStyle" id="body">
        <audio id="customAudio" preload='none'> 
            <source src='templates/KnifeParty.mp3' type='audio/mpeg' /> 
        </audio>
    </h:body>
</f:view>
</html>

When I press play button I get next error message
/WEB-INF/templates/KnifeParty.xhtml Not Found in ExternalContext as a Resource

My folder structure:

Also I have NewFile1.xhtml which work perfectly. But this file (NewFile1.xhtml) I opened in firefox not on Tomcat Server

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Xhtml work</title>
</head>
<body>
    <audio id="yourAudio" preload='none'> <source
        src='templates/KnifeParty.mp3' type='audio/mpeg' /> </audio>
    <a href="#" id="audioControl">play!</a>
    <script type="text/javascript">
        var yourAudio = document.getElementById('yourAudio'), ctrl = document
                .getElementById('audioControl');

        ctrl.onclick = function() {

            // Update the Button
            var pause = ctrl.innerHTML === 'pause!';
            ctrl.innerHTML = pause ? 'play!' : 'pause!';

            // Update the Audio
            var method = pause ? 'pause' : 'play';
            yourAudio[method]();

            // Prevent Default Action
            return false;
        };
    </script>
</body>
</html>

In the web I saw similar problem (like this) and there people said registrer the extension on Tomcat Server

I wrote diffrent path to KnifeParty.mp3 file and changed his location, but this did not help.

Please, read about how browser asks for resources in a web request. Firstly, the requested url is evaluated (by JSF) and rendered as proper HTML. Then the browser will try to grab other kind of content, but that's done in a separate request and JSF has nothing to do with it. As @BalusC pointed in the answer, the url to the resource cannot be resolved because the resource not being publicly accessible for the browser. So it's not a problem of tomcat. — Aritz, Apr 27 '15 at 09:24

score 2 · Accepted Answer · edited May 23 '17 at 10:24

Resources in /WEB-INF are not publicly accessible. You need to put publicly accessible resources outside /WEB-INF. The /WEB-INF should only be used for configuration files, template files, include files, tag files, etc which are supposed to not be publicly accessible at all.

Once you've moved it into the parent folder of /WEB-INF like so,

WebContent
 |-- META-INF
 |-- WEB-INF
 `-- some.mp3

Then you can reference it as below:

<audio ...> 
    <source src="#{request.contextPath}/some.mp3" type="audio/mpeg" />
</audio>

You can also make use of JSF resource management facility by placing it in JSF dedicated /resources folder (which you should already have for JS/CSS/image files) like so,

WebContent
 |-- META-INF
 |-- WEB-INF
 `-- resources
      `-- audio
           `-- some.mp3

Then you can reference it using #{resource} map in EL as below:

<audio ...>
    <source src="#{resource['audio/some.mp3']}" type="audio/mpeg" />
</audio>

Why Apache Tomcat does not see mp3 file?

1 Answers1

See also: