How can I play the file uploaded to an Amazon S3 bucket in html?

I solved this, and my app now plays an MP3 audio file located in an Amazon S3 bucket.

I used the jPlayer Below are the steps I took to fix the issue:

1. Install the JQuery plug-in by following the instructions in the jPlayer documentation.

2. Add the plug-in to your page, along with the required the CSS.

   • Here is My HTML Page:

     <!DOCTYPE HTML>
     <html xmlns:th="https://www.thymeleaf.org">
     <head>
         <meta charset="utf-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
     
     
         <link rel="stylesheet" th:href="|https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css|"/>
         <link rel="stylesheet" th:href="|https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/skin/pink.flag/css/jplayer.pink.flag.css|"/>
         <script th:src="|https://code.jquery.com/jquery-1.12.4.min.js|"></script>
         <script th:src="|https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/jplayer/jquery.jplayer.min.js|"></script>
         <script src="../public/js/items.js" th:src="@{/js/items.js}"></script>
         <link rel="stylesheet" href="../public/css/styles.css" th:href="@{/css/styles.css}" />
         <link rel="icon" href="../public/img/favicon.ico" th:href="@{/img/favicon.ico}" />
     
         <title>Audio Stream Sample App</title>
     </head>
     
     <body>
     <div class="container">
     
         <h2>Audio Stream Sample App</h2>
     
         <p>This sample application plays Amazon S3 audio content.<p>
     
         <div id="jquery_jplayer_1" class="jp-jplayer"></div>
         <div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
             <div class="jp-type-single">
                 <div class="jp-gui jp-interface">
                     <div class="jp-volume-controls">
                         <button class="jp-mute" role="button" tabindex="0">mute</button>
                         <button class="jp-volume-max" role="button" tabindex="0">max volume</button>
                         <div class="jp-volume-bar">
                             <div class="jp-volume-bar-value"></div>
                         </div>
                     </div>
                     <div class="jp-controls-holder">
                         <div class="jp-controls">
                             <button class="jp-play" role="button" tabindex="0">play</button>
                             <button class="jp-stop" role="button" tabindex="0">stop</button>
                         </div>
                         <div class="jp-progress">
                             <div class="jp-seek-bar">
                                 <div class="jp-play-bar"></div>
                             </div>
                         </div>
                         <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
                         <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
                         <div class="jp-toggles">
                             <button class="jp-repeat" role="button" tabindex="0">repeat</button>
                         </div>
                     </div>
                 </div>
                 <div class="jp-details">
                     <div class="jp-title" aria-label="title">&nbsp;</div>
                 </div>
                 <div class="jp-no-solution">
                     <span>Update Required</span>
                     To play the media you will need to either update your browser to a recent version or update your <a href="https://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                 </div>
             </div>
         </div>
         </div>
       </body>
     </html>
     

   • My JS file:

     $(document).ready(function(){
         $("#jquery_jplayer_1").jPlayer({
             ready: function () {
                 $(this).jPlayer("setMedia", {
                     title: "Bubble",
                     mp3: "https://<BUCKETNAME>.s3.amazonaws.com/<MP3 FILE NAME>"
                 });
             },
             cssSelectorAncestor: "#jp_container_1",
             swfPath: "/js",
             supplied: "mp3",
             useStateClassSkin: true,
             autoBlur: false,
             smoothPlayBar: true,
             keyEnabled: true,
             remainingDuration: true,
             toggleDuration: true
         });
     });
     

3. Place your MP3 file into a bucket and make the MP3 file public.

4. Copy the "Object URL" from S3, as shown here:

   • 

5. Then, add to the URL to the following line of code in the JavaScript file:

   $(this).jPlayer("setMedia", {
       title: "Bubble",
       mp3: "https://<BUCKETNAME>.s3.amazonaws.com/<MP3 FILE NAME>"
   });
   

Now your app will play an MP3 file located in an Amazon S3 bucket. Enjoy!