<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<head>
<title>Player</title>
<meta name="author" content="Maint, FreeShare Inc.">
<meta name="description" content="Music player created by Maint(FS Corp)">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://freeshared.org/css/bootstrap.css">
<link rel="stylesheet" href="http://freeshared.org/css/bootstrap.min.css">
<script src="http://freeshared.org/js/jquery.js"></script>
<script src="http://freeshared.org/js/bootstrap.js"></script>
<script src="http://freeshared.org/js/bootstrap.min.js"></script>
<script src="http://freeshared.org/js/npm.js"></script>
</head>
<body>
<br>
<div class="col-md-12">
<audio id="audio" preload="auto"></audio>
<div class="btn-group">
<button onclick="Play('music.mp3','audio');" class="btn btn-custom"><span title="Play" id="play" class="glyphicon glyphicon-play aligned"></span></button>
<button onclick="Stop('music.mp3','audio');" class="btn btn-custom"><span title="Stop" id="stop" class="glyphicon glyphicon-stop aligned"></span></button>
<button onclick="Restart('music.mp3','audio');" class="btn btn-custom"><span title="Restart" id="restart" class="glyphicon glyphicon-step-backward aligned"></span></button>
<button onclick="Backward5('music.mp3','audio');" class="btn btn-custom"><span title="-5 seconds" id="play" class="glyphicon glyphicon-fast-backward aligned"></span></button>
<button onclick="Forward5('music.mp3','audio');" class="btn btn-custom"><span title="+5 seconds" id="play" class="glyphicon glyphicon-fast-forward aligned"></span></button>
<button onclick="Backward1('music.mp3','audio');" class="btn btn-custom"><span title="-1 second" id="play" class="glyphicon glyphicon-chevron-left aligned"></span></button>
<button onclick="Forward1('music.mp3','audio');" class="btn btn-custom"><span title="+1 second" id="play" class="glyphicon glyphicon-chevron-right aligned"></span></button>
<button onclick="VolumeUp('music.mp3','audio');" class="btn btn-custom"><span title="Volume Up" id="volumeup" class="glyphicon glyphicon-plus aligned"></span></button>
<button onclick="VolumeDown('music.mp3','audio');" class="btn btn-custom"><span title="Volume Down" id="volumedown" class="glyphicon glyphicon-minus aligned"></span></button>
</div>
</div>
</body>
</html>
@font-face { font-family: Myriad; src: url('http://freeshared.org/fonts/Myriad.OTF'); }
body
{
font-family: Myriad;
}
.aligned {
text-align: center;
padding-bottom:28%;
}
.aligned_input {
text-align: center;
padding-bottom:-10%;
}
.aligned_text {
text-align: center;
font-size: 88%;
}
.no:hover {
background:none;
} .no:active {
background: none;
}
#seconds {
font-size:10px;
}
.btn-custom {
background-color: black;
color:white;
transition-property: background, opacity;
transition-duration: 0.5s;
} .btn-custom:hover, .btn-custom:active, .btn-custom:focus {
cursor: pointer;
opacity:0.5;
color:white;
//background-color:white;
}
var status = 0;
function Play(music,id) {
var audio = $("#"+id);
if(status == 0 || status == 2)
{
if(status == 0) audio.attr("src", music);
audio[0].play();
$("#play").attr("class","glyphicon glyphicon-pause aligned")
status = 1;
} else if(status == 1) {
audio[0].pause();
$("#play").attr("class","glyphicon glyphicon-play aligned")
status = 2;
}
}
function Stop(music,id) {
var audio = $("#"+id);
audio.attr("src", '');
$("#play").attr("class","glyphicon glyphicon-play aligned")
status = 0;
}
function Restart(music,id) {
var audio = $("#"+id);
audio.prop("currentTime",0)
}
function VolumeUp(music,id) {
var audio = $("#"+id);
var volume = $("#"+id).prop("volume")+0.1;
if(volume > 1) volume = 1;
$("#"+id).prop("volume",volume);
}
function VolumeDown(music,id) {
var audio = $("#"+id);
var volume = $("#"+id).prop("volume")-0.1;
if(volume < 0) volume = 0;
$("#"+id).prop("volume",volume);
}
function Forward5(music,id) {
var audio = $("#"+id);
audio.prop("currentTime",audio.prop("currentTime")+5);
}
function Backward5(music,id) {
var audio = $("#"+id);
audio.prop("currentTime",audio.prop("currentTime")-5);
}
function Forward1(music,id) {
var audio = $("#"+id);
audio.prop("currentTime",audio.prop("currentTime")+1);
}
function Backward1(music,id) {
var audio = $("#"+id);
audio.prop("currentTime",audio.prop("currentTime")-1);
}
