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>
Comments