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:
Ich hoffe jemand von euch kann mir helfen
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
