basti1012.bplaced.net

Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
    Ein Mp3 Player mit Playliste und co

    Code

                                        
                                     <style>
    #musikinhalt{
       opacity:0;
       display:none;
    }
    #player {
      background: brown;
      height: 160px;
      width: 250px;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      border-radius: 5px;
    }
    progress {
      background-color: black;
      border: 0;
      width: 99%;
      height: 3px;
      display: flex;
      align-self: flex-end;
    }
    #lcd {
      font-family: 'Press Start 2P', cursive;
      font-size: 10px;
      display: flex;
      ex-wrap: wrap;
      ign-self: flex-start;
      justify-content: space-between;
      margin-top: 10px;
      padding: 5px;
      margin-bottom: 3px;
      background: black;
      height: 55%;
      width: 95%;
      color: green;
    }
    #songInfo {
      height: 80%;
    }
    #time {
      display: flex;
      align-self: flex-end;
    }
    button i:hover {
      color: red;
    }
    .red {
      color: #e00f0f;
    }
    .separador {
      width: 3%;
      height: 6%;
    }
    #lista {
      background: #000;
      max-height: 0;
      width: 60%;
      margin: 10px;
      overflow-y: scroll;
      color: green;
      -webkit-transition: all 1s linear;
      transition: all 1s linear;
      border-radius: 5px;
    }
    #lista.expand {
      max-height: 140px;
      border: 5px solid brown;
    }
    #lista div:hover {
      cursor: pointer;
    }
    #lista div:active {
      color: yellow;
    }
    #mp3player{
      width:200px;
      height:200px;
      position:absolute;
      top:60px;
      left:60px;
    }
    .player__play {
      position:absolute;
      width:50px;
      height:50px;
      border-radius: 50%;
    	padding: 5px;
    	top: 5px;
    	left: 5px;
    	background :  #a15ce5;
      transition: all .5s;
    }
    #player-play.blink .player__play-inner:after,
    #player-play.blink .player__play-inner:before{
      animation: color 2s infinite;
    }
    @keyframes color {
    	0% {
    		filter:hue-rotate(0deg);
    	}
    	30% {
    		filter:hue-rotate(120deg);
    	}
    	60% {
    		filter:hue-rotate(210deg);
    	}
    	100% {
    		filter:hue-rotate(360deg);
    	}
    }
    .player__play-inner {
    	position: absolute;
    	width: 90%;
    	height: 90%;
      left:5%;
      top:5%;
    	background-color: black;
    	border-radius: 50%;
    	display: flex;
      justify-content: center;
      flex-direction: column;
      align-items:center;
    }
    .player__play-inner::after,
    .player__play-inner::before {
    	content:'';
    	display: block;
    	height: 0;
    	width: 0;
    	border-color:transparent;
      transform: translateX(2px);
    	transition: all 1.5s;
    }
    .player__play-inner::after {
    	border-top: 8px solid #a15ce5;
    	border-right: 10px solid transparent;
    	border-left: none;
    	border-top-style: ;
    	top: 50%;
    }
    .player__play-inner::before {
    	border-bottom: 8px solid #a15ce5;
    	border-right: 10px solid transparent;
    	border-left: none;
    	left: 50%;
    }
    .active .player__play-inner::before {
    	border-right: 7px solid #a15ce5;
    	border-left: 7px solid #a15ce5;
    	transform: translateX(0) rotate(180deg);
    }
    .active .player__play-inner::after {
    	border-right: 7px solid #a15ce5;
    	border-left: 7px solid #a15ce5;
    	transform: translateX(0) rotate(180deg);
    }
    .disco{
        animation:blinki  2s infinite;
    }
    @keyframes blinki{
    	0% {
    		  background:  green;
    	}
    	50% {
    		   background: white;
    	}
    
    	100% {
    		   background: green;
    	}
    }
    .wachsen{
        animation:gross  2s linear forwards;
    }
    @keyframes gross{
      0%{
      width:20px;
      height:20px;
    }
    100%{
      border-radius:4%;
      width:252px;
      height:160px
    }
    
    </style>
    <link rel="stylesheet" href="/css_webseite/awesome470.css">
        <script src="/js_webseite/jquery.js"></script>
    <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 src="https://cdnjs.cloudflare.com/ajax/libs/jsmediatags/3.4.0/jsmediatags.min.js"></script>
    -->
    <script>
    localStorage.setItem('h',1)
    $('.player__play-inner').on('click', function(){
        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 ='';//http://sebastian1012@sebastian1012.bplaced.net/12-willi_herren_-_ich_geh_mit_meiner_laterne-zzzz.mp3';
    
    var songs = [];
    var currentSong = 0;
    var random = false;
     
     
    songs.push('/mediaLightless%20Dawn.mp3');
    songs.push('/media/Danger%20Storm.mp3');
    songs.push('/media/Eastern%20Thought.mp3');
    songs.push('/media/Overcast.mp3');
    songs.push('/media/Kool%20Kats.mp3');
    songs.push('/media/Dewdrop%20Fantasy.mp3');
    songs.push('/media/Carefree.mp3');
    songs.push('/media/Hitman.mp3');
    songs.push('/media/Atlantean%20Twilight.mp3');
    songs.push('/media/8bit%20Dungeon%20Boss.mp3');
    songs.push('/media/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 Sebastian Köster')
    }
      </script>