basti1012.bplaced.net

Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
    Mp3 Player den jeder gebrauchen kann

    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>