[GELOEST] Music Player funktioniert nicht

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hanna11

Mitglied
29 Juli 2020
64
1
8
17
Ich wollte zu meinem Vokabeltrainer auch ein Music Player hinzufügen, sodass der User währenddessen Musik hören kann. Ich hab auch schon ein Programm durch ein Youtube- Video zusammengestellt und wenn ich das in einer separaten Datei abspiele funktioniert auch alles. Doch sobald ich alles zu der Vokabeltrainer-Datei hinzufüge funktioniert das Abspielen des Liedes nicht. Hier ist mein kompletter Code:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="/Stylecodes/designvoc.css">
  <link rel="stylesheet" href="/Main.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lektion 1</title>
    <script src="jquery-1.10.2.min.js"></script>

</head>
<body>
    <div id="float2">
<div class="kasten2">Falsch beantwortete Vokabeln:<p id="wrong"></p> Wiederhole diese öfter!</div></div>
<div id="float">

<ul class="navigation">
    <li> <a href="/Startseite.html" target="_blank">Startseite</a></li>
    <li> <a href="/quellcodes/Hauptmenü.html"target="_blank"> Hauptmenü </a></li>
    <li><a href="#" target="_blank">Vokabelliste</a></li>
    <li><a href="/quellcodes/Lektion 2.html" target="_blank"> Lektion 2</a></li>
        </ul>

<div class="kasten"> Richtig beantwortete Vokabeln:<p id ="demo"></p> Restliche Vokabeln: <span id="rechnen"></span> </div>
        </div>



 


  <div class="center">
  <span id="abstand"> <input  type="text" id="vokabel"></span>
    <input type="text" placeholder="Lösung" id="loesung" autofocus>
   <div class="frame"> <button class="custom-btn btn-2" id="pruefen" onclick=Pruefen();>Überprüfen</button> </div>
    
    </div>


    <div id="main">
        <div id="image">
            <img src="/Poster1.jpg"/>
        </div>
        <div id="player">
            <div id="songTitle">Demo</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="/Pause.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>
    </div>



        <script>
var richtigeVokabeln, text;
var index;
var rechnung;
var erg;
var erg2;
        var vokablen = ["hallo", "car", "haus", "geld", "ja", "nein", "Vater", "Mutter", "Kind", "danke", "bitte", "Baum", "rot"];
        var vokablen2 = ["hallo", "car", "haus", "geld", "ja", "nein", "Vater", "Mutter", "Kind", "danke", "bitte", "Baum", "rot"];
        var uebersetzung = ["hello", "auto", "house", "money", "yes", "no", "father", "mother", "child", "thank you", "please", "tree", "red"];
        richtigeVokabeln = [ ];
        falscheVokabeln =  [ ];
        richtigeAntwort = 0;
        var wiederholung;

       var input = document.getElementById("loesung");
       input.addEventListener("keyup", function(event) {
       if (event.keyCode === 13) {
       event.preventDefault();
       document.getElementById("pruefen").click();
  }
});
        var input = document.getElementById("loesung");
        document.getElementById('pruefen').addEventListener("click", pruefen);
        

  

        // Diese Funktion prueft ob die Uebersetzung richtig eingegeben wurde
        // und legt ggf. eine neue Vokabel vor
        function pruefen() {
            // Pruefen ob die Uebersetzung richtig ist
            if (document.getElementById("loesung").value == uebersetzung[index]) {
                // Anzahl der richtigen Antworten erhoehen
                richtigeAntwort++;
                // Rueckmeldung an den Benutzer
                alert("richtig! Du hast " + richtigeAntwort + " richtig beantwortet!");
                erg=richtigeVokabeln.includes(uebersetzung[index]);
                
                if(erg == false){
                richtigeVokabeln.push(uebersetzung[index]);}
                
                // Ist die geforderte Anzahl von richtigen Antworten erreicht
                // geben wir nur eine Rueckmeldung und legen keine neue Vokabel vor
                if (richtigeAntwort == 10) {
                    alert("Super! Du hast 10 Vokabeln richtig geschrieben! Mach eine Pause");
                    
                    text = "<ul>";
                    richtigeVokabeln.forEach(myFunction);
                    text += "</ul>";
                    document.getElementById("demo").innerHTML = text;
                    function myFunction(value) {
                    text += "<li>" + value + "</li>"; }

                    rechnung= vokablen2.length - richtigeVokabeln.length;
                    document.getElementById("rechnen").innerHTML = rechnung;

                    text = "<ul>";
                    falscheVokabeln.forEach(myFunction);
                    text += "</ul>";
                    document.getElementById("wrong").innerHTML = text;
                    function myFunction(value) {
                    text += "<li>" + value + "</li>"; }

                   neueVokabel();

                } else {
                    

                   neueVokabel();

                } 
                
                 else {
                    // Neue Vokabel vorlegen
                    neueVokabel();
                }
                if (richtigeVokabeln.length == vokablen2.length){
                  alert("Sehr gut! Du hast alle Vokabeln richtig beantwortet. Du kehrst jetzt zurück zum Hauptmenü. Komm einfach wieder, um weiter zu lernen");

                  window.location.href = "/quellcodes/Hauptmenü.html";
                }
            } else {
                // Falsche Uebersetzung: Rueckmeldung an Benutzer
                alert("falsch :( Die Lösung ist: " + uebersetzung[index]);
                wiederholung = prompt("Gebe " + uebersetzung[index] + " nochmal ein, um die Vokabel zu verinnerlichen");
                vokablen.push(vokablen[index]);
                uebersetzung.push(uebersetzung[index]);
                erg2=falscheVokabeln.includes(uebersetzung[index]);
                
                if(erg2 == false){
                falscheVokabeln.push(uebersetzung[index]);}

              
                // Neue Vokabel vorlegen
                neueVokabel();
                alert(vokablen);
            }
        }
        
        function neueVokabel() {
            index = Math.floor(Math.random() * vokablen.length);
            document.getElementById("vokabel").value = vokablen[index];
            document.getElementById("loesung").focus();
            // Alte Uebersetzung kann jetzt geloescht werden
            input.value = '';
        }
        // Die erste Vokabel vorlegen
        neueVokabel();

</script>

<script type="text/javascript">
    
    var songs = ["Song1.mp3","Song2.mp3","Song3.mp3"];
    var poster = ["Poster1.jpg","Poster2.jpg","Poster3.jpg"];
    
    var songTitle = document.getElementById("songTitle");
    var fillBar = document.getElementById("fill");
    
    var song = new Audio();
    var currentSong = 0;    // it point to the current song
    
    window.onload = playSong;   // it will call the function playSong when window is load
    
    function playSong(){
        
        song.src = songs[currentSong];  //set the source of 0th song
        
        songTitle.textContent = songs[currentSong]; // set the title of song
        
        song.play();    // play the song
    }
    
    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 +'%';
    });
    

    function next(){
        
        currentSong++;
        if(currentSong > 2){
            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 = 2;
        }
        playSong();
        $("#play img").attr("src","Pause.png");
        $("#image img").attr("src",poster[currentSong]);
        $("#bg img").attr("src",poster[currentSong]);
    }
    









</script>








</div>

</body>
</html>


Ich hoffe jemand von euch kann mir helfen
 

basti1012

Senior HTML'ler
26 November 2017
1.395
144
63
39
Minden
sebastian1012.bplaced.net
in der Console steht
Code:
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
Teste es mal mit einen Button der Play anklickt.
Automatisches abspielen von Sound geht in den neuen Browsern so einfach nicht mehr, nur mit User bestätigung ( zb Play Button )
Das weg machen
Code:
window.onload = playSong;
und testweise einen Button ins html Document einfügen
Code:
  <button onclick="playSong()">Play</button>
 

basti1012

Senior HTML'ler
26 November 2017
1.395
144
63
39
Minden
sebastian1012.bplaced.net
Mal nee Frage.
Du hast 2 mal die gleiche Function
Code:
 function myFunction(value) {
    text += "<li>" + value + "</li>";
}
und das kommt mir auch etwas komisch vor
Code:
                   neueVokabel();
                } else {
                   neueVokabel();
                }  else {
                    // Neue Vokabel vorlegen
                    neueVokabel();
                }
 

Hanna11

Mitglied
29 Juli 2020
64
1
8
17
Danke für dein Antwort. Ich habe das ausprobiert, aber auch das funktioniert leider nicht. Man hört nichts
 

Hanna11

Mitglied
29 Juli 2020
64
1
8
17
Mal nee Frage.
Du hast 2 mal die gleiche Function
Code:
 function myFunction(value) {
    text += "<li>" + value + "</li>";
}
und das kommt mir auch etwas komisch vor
Code:
                   neueVokabel();
                } else {
                   neueVokabel();
                }  else {
                    // Neue Vokabel vorlegen
                    neueVokabel();
                }
Damit der Beitrag nicht zu lang wird, musste ich Sachen rauskürzen. Dann habe ich etwas rausgekürzt, dass waren aber meistens die Wiederholungen. Also wenn die richtigen Antworten = 10/20/30 usw.
Und wegen den 2 Funktion. Ich weiß net, ob das geht aber ich habe einfach copy and paste gemacht, weil 2 mal so eine Liste brauchte.
 

basti1012

Senior HTML'ler
26 November 2017
1.395
144
63
39
Minden
sebastian1012.bplaced.net
Kannst du das mal online stellen oder ein Beispiel bei Codepen erstellen mit deinen kompletten Code?
Du sagst ja das es einzeln läuft, vielleicht fehlen da Klammern oder sonst irgendwas das man bei deinen gekürzten post jetzt nicht sehen kann.
Was steht den bei dir in der Konsole ?
 

Hanna11

Mitglied
29 Juli 2020
64
1
8
17
Jetzt funktioniert alles! Anscheinend war meine Music- Datei nicht im gleichen Ordner wie mein Quellcode.
 

Hanna11

Mitglied
29 Juli 2020
64
1
8
17
Hast du aber eine Idee, wie ich es so machen kann, dass die Musik erst los geht, wenn ich auf deinem Play-Button drücke. Gerade ist es ja so, dass die Musik los geht, wenn die Seite aufgerufen wird. Das ist aber ziemlich nervig. Aber durch den Play-Button wird eben auch die Funktion gesteuert, dass der Song pausiert wird oder abgespielt wird. Wenn ich dann die playSong() funktioniert hinzufüge, entsteht ein ziemliches Chaos. Hast du vielleicht eine Idee?
 

Hanna11

Mitglied
29 Juli 2020
64
1
8
17
Das habe ich versucht und dann ging es auch. Aber dann sieht es so aus:

Musik Player.png

Also des:
Code:
 <div id="songTitle">Demo</div>
wird irgendwie angezeigt. Ich weiß jedoch nicht wie ich das umgehen kann. Man muss erst auf ein "Weiter" drücken, um zu den restlichen Lieder zu kommen.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.007
380
83
67
Auch hier kann eine Funktion die Sache effizienter und leichter machen:
Code:
function getSong(idx) {
    song.src = songs[idx];
    $("#songTitle").text() = songs[idx];
    $("#image img").attr("src",poster[idx]);
    $("#bg img").attr("src",poster[idx]);
}
(Analog zu neueVokabel). Diese kannst Du dann beim Laden der Seite aufrufen und auch anderswo, z. B. beim next():
Code:
    function next(){
    
        currentSong++;
        if(currentSong >= songs.length){
            currentSong = 0;
        }
        getSong(currentSong);
        song.play();
    }
Wie Du siehst, habe ich songs.length statt statisch 2 verwendet, dann musst Du die Stelle im Code nicht aufsuchen und ändern, wenn mal neue Songs zu der Liste hinzu kommen.
 
Zuletzt bearbeitet:

Hanna11

Mitglied
29 Juli 2020
64
1
8
17
@Sempervivum ich verstehe nicht ganz für was die Funktion getSong ist. Soll ich die einfach normal hinzufügen oder ersetzt diese Funktion etwas, denn durch nur das normale hinzufügen hat sich nichts verändert bzw. der Fehler mit dem Vorschaubild "Demo" ist immer noch da.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.007
380
83
67
Sempervivum schrieb:
Diese kannst Du dann beim Laden der Seite aufrufen
Am besten am Ende des script-Tags für das Audio:
Code:
    function pre(){
       
        currentSong--;
        if(currentSong < 0){
            currentSong = 2;
        }
        playSong();
        $("#play img").attr("src","Pause.png");
        $("#image img").attr("src",poster[currentSong]);
        $("#bg img").attr("src",poster[currentSong]);
    }
    // Ersten Song bereit stellen
    getSong(0);  









</script>
Damit ist dann alles erledigt, einschl. Anzeige des Songtitels.
 

Hanna11

Mitglied
29 Juli 2020
64
1
8
17
Hmm also auf Knopfdruck funktioniert es jetzt und es wird auch das erste Lied abgespielt. Trotzdem steht immer noch als Title "Demo" da
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.007
380
83
67
In meiner Testdatei funktioniert es, der Dateiname wird als Titel angezeigt. Ich hatte zuerst den Parameter vergessen:
Code:
getSong();
Hast Du das vielleicht erwischt, bevor ich es editiert hatte?
So ist es richtig:
Code:
getSong(0);
 

Hanna11

Mitglied
29 Juli 2020
64
1
8
17
Also ich habe nochmal alles neu abgetippt. Das hat aber nicht viel gebracht. Es steht immer noch Demo da. Ich habe jetzt aber eine Lösung gefunden. Ich habe nämlich jetzt Demo einfach in meinen ersten Song umbenannt. Dann passt das auch :)
 
Werbung: