Bootstrap Snippet Music Player using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
@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;
} 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Music Player"
Bootstrap 3.3.0 Snippet by Maint

Related: See More

Questions / Comments:

"Music Player" Bootstrap 3.3.0 Snippet by Maint

Related: See More

Questions / Comments:

"Music Player"
Bootstrap 3.3.0 Snippet by Maint