mp3 Player animiert
Ein Mp3 Player mit Playliste und co
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>