mp3 Player animiert

Ein Mp3 Player mit Playliste und co
Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete 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>