"Music Player"
Bootstrap 3.3.0 Snippet by Maint

<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); }

Related: See More


Questions / Comments:

Hello everyone...pls I cant get the bootstrap snippet music player to work on my bootstrap website:
http://pgamultimedia.com/

pls help...I need detailed guidelines..Thanks

Gbenga Adeleye () - 7 years ago - Reply 0