mp3-player.php

Quell Code

<script src="/js/index.php?js=3.2.1-jquery.min.js"></script>
 <script src="js/index.php?js=jsmediatags.min.js"></script>
 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div id="mp3player">
  <div id="player-play"  class="player__play">
  <div id="musikinhalt">
  <div id="player">
  <div id="lcd">
    <div id="songInfo"></div>
    <div id="time"></div>
    <progress id="progreso" value="0" max="100"></progress>
  </div>
  <audio id="song"></audio>
  <button id="hamburger" onClick="expand()">
    <i class="fa fa-bars" aria-hidden="true"></i>
  </button>
  <div class="separador"></div>
  <button onClick="atras()" >
    <i class="fa fa-fast-backward" aria-hidden="true"></i>
  </button>
  <button onClick="retroceder()">
    <i class="fa fa-backward" aria-hidden="true"></i>
  </button>
  <button onClick="reproducir()">
    <i class="fa fa-play" aria-hidden="true"></i>
  </button>
  <button onClick="pausar()">
 <i class="fa fa-pause" aria-hidden="true"></i>
  </button>
  <button onClick="parar()">
  <i class="fa fa-stop" aria-hidden="true"></i>
  </button>
  <button onClick="adelantar()">
    <i class="fa fa-forward" aria-hidden="true"></i>
  </button>
  <button onClick="siguiente()" >
    <i class="fa fa-fast-forward" aria-hidden="true"></i>
  </button>
  <div class="separador"></div>
  <button id="aleatorio" onClick="aleatorio()">
    <i class="fa fa-random" aria-hidden="true"></i>
  </button>
  <button onClick="volumeDown()">
    <i class="fa fa-volume-down" aria-hidden="true"></i>
  </button>
  <button onClick="volumeUp()">
    <i class="fa fa-volume-up" aria-hidden="true"></i>
  </button>
  <div class="separador"></div>
  <button onClick="info()">
    <i class="fa fa-info" aria-hidden="true"></i>
  </button>
  <div id="lista"></div>
</div> 
  </div>
  <div class="player__play-inner"></div> 
	</div> 

 </div>
 </div>
<script>

   localStorage.setItem('h',1)
 $('.player__play-inner').on('click', function(){

   // $('#player-play').toggleClass('wachsen');
 var h =localStorage.getItem('h')
  
  if(h == 0){
    $('#musikinhalt').animate({
    opacity: 0
  }, 2000, function() {
      
     $('#musikinhalt').css('display','none');
  $('#player-play').animate({
    opacity: 1,
 width:"50px",
   height: "50px",
   borderRadius:'50%',
  }, 1000, function() {
    $('.player__play-inner').animate({
  top: '3px',
 left:'3px',
 width:'90%',
 height:'90%',
 
  }, 1000, function() {

     $('#musikinhalt').css('display','none');   
  
  localStorage.setItem('h',1)
  });
  });
 
  });
 
  }else if(h==1){
 
   $('#player-play').animate({
    opacity: 1,
 width:"250px",
   height: "160px",
   borderRadius:'5px',
  }, 1000, function() {
    $('.player__play-inner').animate({
   bottom: '10px',
 left:'10px',
 width:'15px',
 height:'15px',
 
  }, 1000, function() {
$('#musikinhalt').css('display','block');  
    $('#musikinhalt').animate({
    opacity: 1 
  }, 2000, function() {
      
      });
     
 localStorage.setItem('h',0)
  });
  });
    }
  });
  

lied1 ='/audio/Lightless%20Dawn.mp3';

var songs = [];
var currentSong = 0;
var random = false;

songs.push('/audio/Lightless%20Dawn.mp3');
songs.push('/audio/Danger%20Storm.mp3');
songs.push('/audio/Eastern%20Thought.mp3');
songs.push('/audio/Overcast.mp3');
songs.push('/audio/Kool%20Kats.mp3');
songs.push('/audio/Dewdrop%20Fantasy.mp3');
songs.push('/audio/Carefree.mp3');
songs.push('/audio/Hitman.mp3');
songs.push('/audio/Atlantean%20Twilight.mp3');
songs.push('/audio/8bit%20Dungeon%20Boss.mp3');
songs.push('/audio/Life%20of%20Riley.mp3');

var audio = document.getElementById('song');
var lcdSongInfo = document.getElementById('songInfo');
var lcdTime = document.getElementById('time');
var progress = document.getElementById('progreso');
var bAleatorio = document.getElementById('aleatorio');
var list = document.getElementById('lista');
var bHamburger = document.getElementById('hamburger');
audio.src = songs[0];
mostrar();
for(i in songs){
  list.innerHTML += '<div onClick="reproducirCancion(' + i + ')">' + nombre2(songs[i]) + '</div>';
}

function nombre2(o) {
  var nombre = decodeURIComponent(o);
  var pos = nombre.lastIndexOf('/');
  var nombre = nombre.substring(pos + 1);
  nombre = nombre.replace('.mp3', '');
  return nombre;
}

function reproducirCancion(n){
  currentSong = n;
  audio.src = songs[currentSong];
  reproducir();
}

function expand() {
  list.classList.toggle("expand");
  bHamburger.classList.toggle("red");
}

function nombre() {
  var nombre = decodeURIComponent(songs[currentSong]);
  var pos = nombre.lastIndexOf('/');
  var nombre = nombre.substring(pos + 1);
  nombre = nombre.replace('.mp3', '');
  return currentSong+1 + " - " + nombre;
}

function reproducir() {
    $('#player-play').toggleClass('active blink');
     $('#player-play').toggleClass('disco');
  audio.play();
  mostrar();
}

function pausar() {
  audio.pause();
  mostrar();
}

function parar() {
    $('#player-play').removeClass('active blink');
     $('#player-play').removeClass('disco');
  pausar();
  audio.currentTime=0;
}

function siguiente() {
  if(!random){
    if(currentSong+1 != songs.length)
      audio.src = songs[++currentSong];
    else
      audio.src = songs[currentSong = 0];
  }
  else{
    currentSong = Math.floor(Math.random()*songs.length);
    audio.src = songs[currentSong];
  }
    reproducir();
    mostrar();
}

function atras() {
  if(currentSong-1 > 0)
    audio.src = songs[--currentSong];
  else
    audio.src = songs[currentSong = songs.length-1];
  
  reproducir();
  mostrar();
}
function retroceder() {
  audio.currentTime-=10;
  mostrar();
}
function adelantar() {
  audio.currentTime+=10;
  mostrar();
}
function time () {
  var currentTimeSec = audio.currentTime;
  var currentTimeMin = 0;
  while(currentTimeSec>60){
    currentTimeMin++;
    currentTimeSec-=60;
  }
  var durationTimeSec = audio.duration;
  var durationTimeMin = 00;
  while(durationTimeSec>60){
    //durationTimeMin++;
    durationTimeSec-=60;
  }
  lcdTime.textContent = currentTimeMin + ":" + Math.floor(currentTimeSec) + " - "+ durationTimeMin + ":" + Math.floor(durationTimeSec);
  //progress.value = Math.floor(audio.currentTime / audio.duration *100) ;
}
function mostrar() {
  lcdSongInfo.textContent = nombre();
  intervalID = setInterval(time , 100);
}
function aleatorio() {
  random = !random;
  bAleatorio.classList.toggle("red")
}
function volumeDown(){
  audio.volume = audio.volume - 0.1;
}
function volumeUp(){
  audio.volume = audio.volume + 0.1;
}
function info(){
alert('Vielen dank das sie meine Seite benutzen \n Mfg Basti1012')
}
</script>