The audio tag does not play mp3 files.

Asked 2 years ago, Updated 2 years ago, 514 views

Run Environment
exclude java 1.8
payaraserver version 5
built in the environment.

Dynamic web project name
|
|
|
src
| main
   |
    |- java
   |  |
| -resources
   |
|webapp
         |
   | metalf
   | webinf
   |
   sample.mp3
   test.xhtml

It's a deployment.
The code is:
test.xhtml->

<: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:p="http://primefaces.org/ui"
        xmlns:jsf="http://java.sun.com/jsf/composite/javax.faces">
        <h:head>
        <title>Welcome to the test page</title>
        </h:head>
        <h:body>
        <:audio src="src/sample.mp3" controls="controls">
        </:audio>
        </h:body>
        </:html>

The results of the visit are
Failed to load resource: the server responded with a status of 404 (Not Found) and
The interface is displayed, but I can't press the playback button

Could the mp3 file be deployed?
Or is it not recognized?
Is the mp3 file not recognized due to the specifications of eclipse?
Can't I deploy without using sftp or something like that?

I look forward to hearing from you

eclipse java-ee servlet jsf xhtml

2022-09-30 22:03

1 Answers

The simple answer is that changing the src designation in the xhtml file from src/sample.mp3 to sample.mp3 will result in the expected behavior.

Payara contains DefaultServlet and The default setting seems to have been configured to take advantage of this, so it seems that static resources can be answered without any additional configuration.

If you have a file in src/main/webapp/sample.mp3, you should be able to access it at http://localhost:8080/<your-app-name>/small.mp3.
Next Command

 curl --head http://localhost:8080/<your-app-name>/small.mp3

Run at the command prompt (e.g., ) to see that 200 OK is returned.

Sample Results:

HTTP/1.1200 OK
Server:Payara Server 5.2022.1#badassfish
X-Powered-By: Servlet/4.0 JSP/2.3 (Payara Server 5.2022.1#badassfish Java/Eclipse Adoptium/17)
Accept-Ranges:bytes
ETag:W/"1314238-1648841686349"
Last-Modified:Fri, 01 Apr 2022 19:34:46 GMT
Content-Length: 1314238
Content-Type—audio/x-mpeg
X-Frame-Options—SAMEORIGIN

Then write src/main/webapp/test.xhtml as follows:

<html
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html"
>
  <h:head>
    <title>Facelets Hello World</title>
  </h:head>
  <h:body>
    <audio controls="controls">
      <source src="sample.mp3" type="audio/mp3"/>
    </audio>
  </h:body>
</html>

(Added with comments)

When you open http://localhost:8080/<your-app-name>/foo/bar/baz.xhtml in a web browser, the server needs to implement how to respond to the request path /foo/bar/baz.xhtml.
The Jakarta EE (formerly known as Java EE) specification, including Payara, requires this implementation to be done in a class called Servlet.

To be a little more specific, by specification, if it were originally,

  • Implementation of Servlet to send the resource sample.mp3 in the .war file as a response when a request arrives
  • Rule setting to map to Servlet on ↑ when a request for the path /src/sample.mp3 arrives.

is required.
In addition, any requests that deviate from the configured rules will be handled by a servlet named "default" provided by the framework (this time Payara).
(Therefore default servlet behavior should have been described in the Payara manual, but it didn't seem to be there (so this time I googled the implementation).

The explicit implementation/configuration described above is not required because the default servlet has the ability to return static content in Payara.
However, if you are using the default servlet, you must associate the resource file with the /path as the default servlet expects.

(Conversely, if you do not use the default servlet and implement/configure the servlet as described above, you can leave it as test.xhtml in the questionnaire to work as expected.I don't think there's any incentive to implement it like that.)

How did you know that "<source src="sample.mp3" type="audio/mp3"/>" would pass?

defaultIf you think about the natural implementation of Servlet, you can imagine that it would be so, even if it was not mentioned in the manual/without checking the implementation.
(At least I can't think of any reason to map below /src/ as in the questionnaire.)

Incidentally, you can see how resources are stored in the .war file with the jar command:

jartf<your-file>.war

If you look at the results, you can see that sample.mp3 is stored in the top tier.
If so, I think it is natural that the request path should also be http://localhost:8080/<your-app-name>/smaple.mp3 directly below the context route.

"Run curl --head localhost:8080/<your-app-name>/smaple.mp3 on the command prompt (e.g., ), and see if you get 200 OK." I don't even know what this is doing

It is the same as opening http://localhost:8080/<your-app-name>/small.mp3 in your browser to verify.
This time, we explained it using the curl command to make sure that the HTTP status code is 200 OK.


2022-09-30 22:03

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.