As i mentioned, several problems.
Code:
<h1>Kompositionsaufgabe</h1>
<br>
<!-- ANZEIGE ----------------------------------------------------------------------------------------------------------------------->
<p id="Zahlenanzeige" data-status="loading"></p>
<!-- SCHALTER ---------------------------------------------------------------------------------------------------------------------->
<button type="button" data-function="button-press" data-value="0">
<img src="https://www2.uibk.ac.at/downloads/c7201049/mct/pause.png" alt="Pause" width="150" height="150">
</button>
<button type="button" data-function="button-press" data-value="1">
<img src="https://www2.uibk.ac.at/downloads/c7201049/mct/button1.png" alt="Schaltfläche 1" width="150" height="150">
</button>
<button type="button" data-function="button-press" data-value="2">
<img src="https://www2.uibk.ac.at/downloads/c7201049/mct/button2.png" alt="Schaltfläche 2" width="150" height="150">
</button>
<button type="button" data-function="button-press" data-value="3">
<img src="https://www2.uibk.ac.at/downloads/c7201049/mct/button3.png" alt="Schaltfläche 3" width="150" height="150">
</button>
<button type="button" data-function="button-press" data-value="4">
<img src="https://www2.uibk.ac.at/downloads/c7201049/mct/button4.png" alt="Schaltfläche 4" width="150" height="150">
</button>
<br>
<br>
<button type="button" data-function="replay">
<img src="https://www2.uibk.ac.at/downloads/c7201049/mct/playbutton.png" height="50" width="50">
</button>
<button type="button" data-function="button-press" data-value="-1">Löschen</button>
Code:
$(document).ready(function() {
if($('#Zahlenanzeige').length > 0) {
// Identify some elements
var thisQuestion = $('#Zahlenanzeige').closest('div[id^="question"]');
var thisInput = $('input[type="text"]', thisQuestion);
// Click events for buttons
$('.questiontext button', thisQuestion).on('click', function(e) {
if($(this).attr('data-function') == 'button-press') {
buttonPress($(this).attr('data-value'));
}
if($(this).attr('data-function') == 'replay') {
replay();
}
});
// Variablen definieren
var audio = new Audio(),
srcList = [
null,
'https://www2.uibk.ac.at/downloads/c7201049/mct/a.mp3',
'https://www2.uibk.ac.at/downloads/c7201049/mct/d.mp3',
'https://www2.uibk.ac.at/downloads/c7201049/mct/g.mp3',
'https://www2.uibk.ac.at/downloads/c7201049/mct/b.mp3'
],
audioIndex = 1,
timeoutReplay = 0,
timeoutReplayPause = 500,
zahlen = [];
// Array zahlen abspielen
function replay() {
if (document.getElementById('Zahlenanzeige').dataset.status !== 'ready') {
return;
}
if (typeof zahlen[audioIndex] !== 'undefined') {
if (zahlen[audioIndex] == 0) {
audioIndex = audioIndex + 1;
setTimeout(replay, timeoutReplayPause);
} else {
document.getElementById('Zahlenanzeige').dataset.status = 'playing';
audio.onended = null;
audio.src = srcList[zahlen[audioIndex]];
audio.onended = function () {
audioIndex = audioIndex + 1;
audio.onended = null;
document.getElementById('Zahlenanzeige').dataset.status = 'ready';
setTimeout(replay, timeoutReplay);
};
audio.play();
}
} else {
audioIndex = 0;
audio.onended = null;
document.getElementById('Zahlenanzeige').dataset.status = 'ready';
}
}
// Audio abspielen
function playAudio() {
document.getElementById('Zahlenanzeige').dataset.status = 'playing';
audio.onended = null;
audio.src = srcList[audioIndex];
audio.onended = function () {
audioIndex = 0;
audio.onended = null;
document.getElementById('Zahlenanzeige').dataset.status = 'ready';
};
audio.play();
}
// Schalter verarbeiten
function buttonPress(value) {
if (document.getElementById('Zahlenanzeige').dataset.status === 'ready') {
switch (Number(value)) {
case -1:
zahlen.pop();
document.getElementById("Zahlenanzeige").innerHTML = zahlen.join(' - ');
break;
case 0:
audioIndex = value;
zahlen.push(value);
break;
case 1:
case 2:
case 3:
case 4:
audioIndex = value;
zahlen.push(value);
playAudio(value);
break;
}
document.getElementById('Zahlenanzeige').innerHTML = zahlen.join(' - ');
thisInput.val(document.getElementById('Zahlenanzeige').innerHTML);
}
}
// Audio Dateien laden
audio.addEventListener('canplaythrough', preLoadAudio, false);
function preLoadAudio() {
if (typeof srcList[audioIndex] !== 'undefined') {
audio.src = srcList[audioIndex];
audioIndex = audioIndex + 1;
} else {
audioIndex = 0;
document.getElementById('Zahlenanzeige').innerHTML = '';
thisInput.val(document.getElementById('Zahlenanzeige').innerHTML);
document.getElementById('Zahlenanzeige').dataset.status = 'ready';
audio.removeEventListener('canplaythrough', preLoadAudio, false);
}
}
// Initialisierung
function init() {
document.getElementById('Zahlenanzeige').innerHTML = 'Lade Audiodaten...';
preLoadAudio();
document.onkeydown = function(event) {
var charCode = event.which || event.keyCode;
switch (charCode) {
case 220:
buttonPress(0);
break;
case 49: // 1
buttonPress(1);
break;
case 50: // 2
buttonPress(2);
break;
case 51: // 3
buttonPress(3);
break;
case 52: // 4
buttonPress(4);
break;
case 32: // spacebar
replay();
break;
case 8: // backspace
buttonPress(-1);
break;
}
}
}
init();
}
});
