Mein Code funktioniert nicht. Kann mir jemand helfen?

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

Sempervivum · 17. August 2020

Kommt mir irgend wie bekannt vor

Der Fehler liegt in der Funktion getSong:

Code

        function getSong(idx) {
            song.src = songs[idx];
            // $("#songTitle").text() = songs[idx]; <-- dies ist fehlerhaft
            $("#songTitle").text(songs[idx]);
            $("#image img").attr("src", poster[idx]);
            $("#bg img").attr("src", poster[idx]);
        }

Sempervivum · 17. August 2020

... und wenn wir eine Funktion getSong definieren, sollten wir sie auch konsequent einsetzen.

Und man kann bei diesem Player problemlos auf jQuery verzichten.

Code

     <script>

        var songs = [
            "audio/01_-_The_Greatest_Cowboy_Of_Them_All.mp3",
            "audio/05-Lagos_de_Moreno.mp3",
            "audio/09-Asi_Semos_en_Jalisco.mp3"
        ];
        var nameSongs = ["Control", "Sunshine", "Ruleta", "Bebe", "Better Days", "Instagram", "Intentions", "Rojo", "SICKO", "Superstar", "Troubled Water"];
        var poster = ["images/busleft.png", "images/busright.png", "images/01_th.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();
                document.querySelector("#play img").src = "Images/buttonpause.png";
            }
            else {
                song.pause();
                document.querySelector("#play img").src = "Images/buttonplay.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;
            }
            getSong(currentSong);
            song.play();
        }
        function pre() {

            currentSong--;
            if (currentSong < 0) {
                currentSong = songs.length - 1;
            }
            getSong(currentSong);
            song.play();
        }

        function getSong(idx) {
            song.src = songs[idx];
            document.querySelector("#songTitle").textContent = nameSongs[idx];
            document.querySelector("#image img").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>

Alles anzeigen

Und mit ein wenig CSS kann man auch den Fortschrittsbalken zum Leben erwecken:

Code

    <style>
        #seek-bar {
            max-width: 200px;
            height: 20px;
            background-color: lightgrey;
        }

        #fill {
            height: 100%;
            background-color: aqua;
            width: 0;
        }
    </style>

Alles anzeigen

Mein Code funktioniert nicht. Kann mir jemand helfen?

Jetzt mitmachen!

Teilen

Tags