You can play an Audio file (MP3) that is located in your Amazon S3 bucket in your web page.
You can follow these steps:
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.
<!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"> </div>
<div class="jp-duration" role="timer" aria-label="duration"> </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"> </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>
Here is the JS file:
3. Place your MP3 file into a bucket and make the MP3 file public. Copy the URL here:$(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
});
});
4. Add to the URL to this line of code in the JS 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!!!!
