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/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/covers/' + 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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!