-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
122 lines (114 loc) · 5.53 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="Frequency Trainer is a free online (audio) frequency trainer."/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Frequency Trainer</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:900" />
<link rel="stylesheet" type="text/css" href="css/default.css" />
<script src="frequencyTrainer.js"></script>
</head>
<body>
<div class="body">
<div class="title">
<h1>Frequency Trainer</h1>
</div>
<div class="controls">
<br />
<button type="button" id="start-button" class="control-button">Start</button>
<button type="button" id="stop-button" class="control-button">Stop</button>
<button type="button" id="next-button" class="control-button">Next</button><br />
<br />
Volume:<br />
<input type="range" id="volume-control" class="volume-control" min="0" max="20" value="2" step="0.1" /><br />
<br />
<button type="button" id="difficulty-easy" class="difficulty-button" data-difficulty="easy">Easy</button>
<button type="button" id="difficulty-normal" class="difficulty-button" data-difficulty="normal">Normal</button>
<button type="button" id="difficulty-hard" class="difficulty-button" data-difficulty="hard">Hard</button>
<button type="button" id="difficulty-pro" class="difficulty-button" data-difficulty="pro">Pro</button><br />
<br />
</div>
<div class="grid">
</div>
<div class="footer">
<a href="https://github.com/MaxVMH/frequency-trainer/releases/tag/0.0.4-alpha">v 0.0.4</a>
</div>
</div>
<script>
(function () {
'use strict';
let difficultyMode = 'easy'; // default difficulty mode
let frequencyTrainer = startFrequencyTrainer(difficultyMode, null);
let frequency = frequencyTrainer.frequency;
let frequencyContainers = null;
// Control buttons
let startButton = document.getElementById('start-button');
startButton.onclick = function () {
stopToneGenerator();
startToneGenerator(frequency, volumeControl, 0, 3);
};
let stopButton = document.getElementById('stop-button');
stopButton.onclick = function () {
stopToneGenerator();
};
let nextButton = document.getElementById('next-button');
nextButton.onclick = function () {
stopToneGenerator();
stopFrequencyTrainer();
frequency = startFrequencyTrainer(difficultyMode, frequency).frequency;
startToneGenerator(frequency, volumeControl, 0.05, 3);
};
let volumeControl = document.getElementById('volume-control');
volumeControl.oninput = function () {
changeVolume(volumeControl);
};
function fillFrequencyGrid(frequencies) {
let frequencyFormatted = null;
let frequencyGrid = document.getElementsByClassName('grid')[0];
frequencyGrid.innerHTML = '';
frequencies.forEach(function (frequency) {
frequencyFormatted = frequencyFormatter(frequency);
frequencyGrid.insertAdjacentHTML('beforeend', '<div class="frequency-container" data-frequency="' + frequency + '">' + frequencyFormatted + 'Hz</div>');
});
}
function makeFrequencyGridInteractive() {
frequencyContainers = document.getElementsByClassName('frequency-container');
Array.prototype.forEach.call(frequencyContainers, function (frequencyContainer) {
frequencyContainer.onclick = function () {
let frequencyChosen = frequencyContainer.getAttribute('data-frequency');
let frequencyChosenFormatted = frequencyFormatter(frequencyChosen);
stopToneGenerator();
if (frequencyChosen === frequency) {
if (window.confirm(frequencyChosenFormatted + 'Hz is correct!\nLet\'s try another one!')) {
stopFrequencyTrainer();
frequency = startFrequencyTrainer(difficultyMode, frequency).frequency;
startToneGenerator(frequency, volumeControl, 0.05, 3);
}
} else {
window.alert(frequencyChosenFormatted + 'Hz is not correct.\nPlease try again.');
startToneGenerator(frequency, volumeControl, 0.05, 3);
}
};
});
}
// Generate frequency grid
fillFrequencyGrid(frequencyTrainer.frequencies);
makeFrequencyGridInteractive();
// Difficulty buttons
let difficultyButtons = document.getElementsByClassName('difficulty-button');
Array.prototype.forEach.call(difficultyButtons, function (difficultyButton) {
difficultyButton.onclick = function () {
stopToneGenerator();
stopFrequencyTrainer();
difficultyMode = difficultyButton.getAttribute('data-difficulty');
frequencyTrainer = startFrequencyTrainer(difficultyMode, frequency);
frequency = frequencyTrainer.frequency;
fillFrequencyGrid(frequencyTrainer.frequencies);
makeFrequencyGridInteractive();
};
});
}());
</script>
</body>
</html>