Mp3 Player
Mp3 Player den jeder gebrauchen kann
Der hier verwendete Code
<style>
*{
margin: 0;
padding: 0;
border: none;
outline: none;
}
body{
font-family:arial;
font-size:13px;
line-height:1.5em;
color:#fff;
background: url(/image/bg.png);
}
.clearfix{
clear:both;
}
#container{
width:330px;
min-height:400px;
background:#333;
overflow:auto;
margin:60px auto;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border:#666 solid 2px;
}
#audio-image{
position:relative;
overflow:hidden;
height:200px;
margin-bottom:15px;
}
#audio-info{
text-align:center;
}
#audio-info .artist{
font-weight:bold;
}
.cover{
width:100%;
z-index:1;
}
input#volume {
width:95%;
margin-left:2%;
-webkit-appearance: none !important;
background:#ccc;
height:1px;
margin-bottom:20px;
}
input#volume::-webkit-slider-thumb {
-webkit-appearance: none !important;
background:url(/image/knob.png) no-repeat;
height:12px;
width:12px;
}
#buttons{
width:90%;
display: block;
margin: 15px auto;
margin-left:23px;
overflow:auto;
}
button#play{
width:70px;
height:70px;
background:url(/image/play.png) no-repeat;float:left;
}
button#pause{
width:70px;
height:70px;
background:url(/image/pause.png) no-repeat;float:left;
}
button#stop{
width:70px;
height:70px;
background:url(/image/stop.png) no-repeat;float:left;
}
button#prev{
width:70px;
height:70px;
background:url(/image/prev.png) no-repeat;
float:left;
margin-top:15px;
}
button#next{
width:70px;
height:70px;
background:url(/image/next.png) no-repeat;
float:right;
margin-top:15px;
}
#playlist {
list-style-type: none;
padding:10px;
}
#playlist li {
cursor: pointer;
margin:5px;
}
#tracker{
position:relative;
width:100%;
}
#playlist li.active {
font-weight: bold;
padding:3px;
background:#666;
}
#progressBar {
width:80%;
margin-left:2%;
margin-bottom:20px;
margin-top:9px;
height:10px;
background:url(/image/progress_bg.png) no-repeat;
float:left;
}
#progress {
background:url(/image/progress.png) no-repeat;
height:10px;
display:inline-block;
}
#duration{
position:absolute;
top:0;
right:10px;
padding:4px 8px;
background:#000;
border-radius:5px;
}
</style>
<body>
<div id = "container">
<div id = "audio-img">
<img class = "cover"/>
</div>
<div id = "audio-player">
<div id = "audio-info">
<span class="artist"></span> - <span class="title"></span>
</div>
<input id="volume" type="range" min="0" max="10" value="5">
<br>
<div id="audio-buttons">
<span>
<button id="prev"></button>
<button id="play"></button>
<button id="pause"></button>
<button id="stop"></button>
<button id="next"></button>
</span>
</div>
<div class ="clearfix"></div>
<div id="tracker">
<div id="progressbar">
<span id="progress"></span>
</div>
<span id="duration"></span>
</div>
<div class ="clearfix"></div>
<ul id="playlist" class="hidden">
<li song="Pichle saat Dinon Mein - Rock On!! - OST.mp3" cover="cover.jpg" artist="Rock On">Pichle Saat Dino Main.mp3</li>
<li song="Sinbad The Sailor [Full Song] Rock On!!.mp3" cover="cover.jpg" artist="Rock On">Siindbad The Sailor.mp3</li>
<li song="Socha Hai [Full Song] Rock On!!.mp3" cover="cover.jpg" artist="Rock On">Socha Hai.mp3</li>
<li song="Voh Dekhnay Mein - London Paris New York Ali Zafar Aditi Rao Hydari.mp3" cover="cover.jpg" artist="Ali Zafar">Vo Dekhne Main.mp3</li>
</ul>
</div>
</div>
<script src="js_webseite/jquery.js"></script>
<script>
var audio;
//Hide Pause Initially
$('#pause').hide();
//Initializer - Play First Song
initAudio($('#playlist li:first-child'));
function initAudio(element){
var song = element.attr('song');
var title = element.text();
var cover = element.attr('cover');
var artist = element.attr('artist');
//Create a New Audio Object
audio = new Audio('media/' + song);
if(!audio.currentTime){
$('#duration').html('0.00');
}
$('#audio-player .title').text(title);
$('#audio-player .artist').text(artist);
//Insert Cover Image
$('img.cover').attr('src','image/' + cover);
$('#playlist li').removeClass('active');
element.addClass('active');
}
//Play Button
$('#play').click(function(){
audio.play();
$('#play').hide();
$('#pause').show();
$('#duration').fadeIn(400);
showDuration();
});
//Pause Button
$('#pause').click(function(){
audio.pause();
$('#pause').hide();
$('#play').show();
});
//Stop Button
$('#stop').click(function(){
audio.pause();
audio.currentTime = 0;
$('#pause').hide();
$('#play').show();
$('#duration').fadeOut(400);
});
//Next Button
$('#next').click(function(){
audio.pause();
var next = $('#playlist li.active').next();
if (next.length == 0) {
next = $('#playlist li:first-child');
}
if($('#play').is(':visible')){
$('#play').hide();
$('#pause').show();
}
initAudio(next);
audio.play();
showDuration();
});
//Prev Button
$('#prev').click(function(){
audio.pause();
var prev = $('#playlist li.active').prev();
if (prev.length == 0) {
prev = $('#playlist li:last-child');
}
if($('#play').is(':visible')){
$('#play').hide();
$('#pause').show();
}
initAudio(prev);
audio.play();
showDuration();
});
//Playlist Song Click
$('#playlist li').click(function () {
audio.pause();
initAudio($(this));
$('#play').hide();
$('#pause').show();
$('#duration').fadeIn(400);
audio.play();
showDuration();
});
//Volume Control
$('#volume').change(function(){
audio.volume = parseFloat(this.value / 10);
});
//Time Duration
function showDuration(){
$(audio).bind('timeupdate', function(){
//Get hours and minutes
var s = parseInt(audio.currentTime % 60);
var m = parseInt((audio.currentTime / 60) % 60);
//Add 0 if seconds less than 10
if (s < 10) {
s = '0' + s;
}
$('#duration').html(m + '.' + s);
var value = 0;
if (audio.currentTime > 0) {
value = Math.floor((100 / audio.duration) * audio.currentTime);
}
$('#progress').css('width',value+'%');
//After song ends play next song
$(audio).on("ended", function() {
audio.pause();
var next = $('#playlist li.active').next();
if (next.length == 0) {
next = $('#playlist li:first-child');
}
initAudio(next);
audio.play();
showDuration();
});
});
}
$("#progressbar").mouseup(function(e){
var leftOffset = e.pageX - $(this).offset().left;
var songPercents = leftOffset / $('#progressbar').width();
audio.currentTime = songPercents * audio.duration;
});
</script>
</body>