Beiträge von Hxzzx

Hxzzx · 16. August 2020

Hallo, ich habe einen Musik Player erstellt in einer html-Datei. Dieser hat auch mega funktioniert. Dann habe ich den Code in eine anderen Datei kopiert und nun funktioniert er nicht richtig. Es läuft zwar die Musik aber die Bilder verändern sich oben nicht. Und auch die Play-Taste wird nicht zu Pause-Taste, wenn man sie drückt. Ich hoffe, jemand kann mir helfen

HTML

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="Main.css">
</head>
<body>
    <div id="main">
        <div id="image">
            <img src="Poster1.jpg"/>
        </div>
        <div id="player">
            <div id="songTitle">Control</div>
            <div id="buttons">
                <button id="pre" onclick="pre()"><img src="Pre.png" height="90%" width="90%"/></button>
                <button id="play" onclick="playOrPauseSong() "><img src="Play.png"/></button>
                <button id="next" onclick="next()"><img src="Next.png" height="90%" width="90%"/></button>
            </div>
            
            <div id="seek-bar">
                <div id="fill"></div>
                <div id="handle"></div>
            </div>

<div id="currentTime">00:00 / 00:00</div>

        </div>
    </div>

<script>

    
var songs = ["Control.mp3","Sunshine.wav","Ruleta.wav", "Bebe.wav", "Better Days.wav", "Instagram.wav", "Intentsion.mp3","Rojo.mp3", "SICKO.mp3", "Superstar.mp3", "Troubeld Water.mp3"];
    var nameSongs =["Control", "Sunshine", "Ruleta", "Bebe", "Better Days", "Instagram", "Intentions", "Rojo", "SICKO", "Superstar", "Troubled Water" ];
    var poster = ["Poster1.jpg","sun.png","roulette.jpg","Bebepic.jpg","Tree.jpg", "instagram.jpg","wave.jpg", "red.jpg", "lost.jpg", "star.jpg", "water.jpg"];
    
    var songTitle = document.getElementById("songTitle");
    var fillBar = document.getElementById("fill");
    var currentTime = document.getElementById("currentTime");
    
    var song = new Audio();
    var currentSong = 0;    
    
  
    
    function playSong(){
        
        song.src = songs[currentSong];  
        
        songTitle.textContent = nameSongs[currentSong]; 
        
        song.play();   
    }
    
    function playOrPauseSong(){
        
        if(song.paused){
            song.play();
            $("#play img").attr("src","Pause.png");
        }
        else{
            song.pause();
            $("#play img").attr("src","Play.png");
        }
    }
    
    song.addEventListener('timeupdate',function(){ 
        
        var position = song.currentTime / song.duration;
        
        fillBar.style.width = position * 100 +'%';

        convertTime(Math.round(song.currentTime));

        if(song.ended){
            next();
        }

    });
    
function convertTime(seconds){

var min = Math.floor(seconds / 60);
var sec = seconds % 60;

min = (min < 10) ? "0" + min : min;
sec= (sec < 10) ? "0" + sec : sec;
currentTime.textContent = min + ":" + sec;

totalTime(Math.round(song.duration));

}

function totalTime(seconds){

    var min = Math.floor(seconds / 60);
var sec = seconds % 60;

min = (min < 10) ? "0" + min : min;
sec= (sec < 10) ? "0" + sec : sec;
currentTime.textContent += "/" + min + ":" + sec;


}


    function next(){
        
        currentSong++;
        if(currentSong >= songs.length){
            currentSong = 0;
        }
        playSong();
        $("#play img").attr("src","Pause.png");
        $("#image img").attr("src",poster[currentSong]);
        $("#bg img").attr("src",poster[currentSong]);
    }

    function pre(){
        
        currentSong--;
        if(currentSong < 0){
            currentSong = 10; 
        }
        playSong();
        $("#play img").attr("src","Pause.png");
        $("#image img").attr("src",poster[currentSong]);
        $("#bg img").attr("src",poster[currentSong]);
    }
    
    function getSong(idx) {
    song.src = songs[idx];
    $("#songTitle").text() = songs[idx];
    $("#image img").attr("src",poster[idx]);
    $("#bg img").attr("src",poster[idx]);
}

var seekBar = document.getElementById("seek-bar");

function scrub(e){

            const scrubTime =(e.offsetX / seekBar.offsetWidth) * song.duration;

            song.currentTime = scrubTime

            console.log(e);

        }



seekBar.addEventListener('click',scrub);

getSong(0);




</script>
</body>
</html>

Alles anzeigen