Skip to content

Commit 787aa66

Browse files
RajWorkingRajWorking
committed
[feat] UI for toggling playback speed
Radiobuttons format is used with 7 options from 0.25x to 2x
1 parent ff10fc7 commit 787aa66

3 files changed

Lines changed: 71 additions & 16 deletions

File tree

‎index.html‎

Lines changed: 52 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@
9898

9999
<div class="dropdown">
100100
<div class="dropdown-trigger">
101-
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
101+
<button class="button" id="findAndReplace" aria-haspopup="true" aria-controls="dropdown-menu4">
102102
<span>Find and Replace</span>
103103
<span class="icon is-small">
104104
<i class="fas fa-angle-down" aria-hidden="true"></i>
@@ -337,15 +337,64 @@
337337
<div class="field is-horizontal">
338338

339339

340-
<div class="gap-example field audio-container">
340+
<!-- <div class="gap-example field audio-container">
341341
<audio id="hyperplayer" style="z-index: 5000000; position:relative; height:calc(100% - 40px)">
342342
343343
<source src="data/demo_hi.mp3" type="audio/mpeg">
344344
345345
</audio>
346-
</div>
346+
</div> -->
347347

348+
<div style="width: 100%; display: flex;">
349+
<audio id="hyperplayer" controls style="height: 100%; width: 100%; display: inline-block;">
350+
<source src="data/demo_hi.mp3" type="audio/mpeg">
351+
</audio>
348352

353+
<div class="dropdown is-hoverable" style="margin: 2%;">
354+
<div class="dropdown-trigger" style="align-items: center; display: flex;">
355+
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu5"
356+
style="padding: 0; border: none; background: none;">
357+
<span><i class="fas fa-cog fa-lg" style="color: black;"></i></span>
358+
</button>
359+
</div>
360+
<div class="dropdown-menu" id="dropdown-menu5" role="menu">
361+
<div class="dropdown-content">
362+
<div class="dropdown-item">
363+
<input class="playback-rate" type="radio" value="0.25" name="speed">
364+
<label for="0.25x">0.25x</label>
365+
</div>
366+
<div class="dropdown-item">
367+
<input class="playback-rate" type="radio" value="0.5" name="speed">
368+
<label for="0.5x">0.5x</label>
369+
</div>
370+
<div class="dropdown-item">
371+
<input class="playback-rate" type="radio" value="0.75" name="speed">
372+
<label for="0.75x">0.75x</label>
373+
</div>
374+
<div class="dropdown-item">
375+
<input class="playback-rate" type="radio" value="1" name="speed" checked>
376+
<label for="1x">1x</label>
377+
</div>
378+
<div class="dropdown-item">
379+
<input class="playback-rate" type="radio" value="1.25" name="speed" checked>
380+
<label for="1.25x">1.25x</label>
381+
</div>
382+
<div class="dropdown-item">
383+
<input class="playback-rate" type="radio" value="1.5" name="speed" checked>
384+
<label for="1.5x">1.5x</label>
385+
</div>
386+
<div class="dropdown-item">
387+
<input class="playback-rate" type="radio" value="1.75" name="speed" checked>
388+
<label for="1.75x">1.75x</label>
389+
</div>
390+
<div class="dropdown-item">
391+
<input class="playback-rate" type="radio" value="2" name="speed">
392+
<label for="2x">2x</label>
393+
</div>
394+
</div>
395+
</div>
396+
</div>
397+
</div>
349398
<!-- <p class="control">
350399
<button name="confidence" onclick="displayConfidence()" class="button is-small is-primary">Display
351400
Confidence</button>

‎javascript/editor.js‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ function exportToCsv() {
9494

9595
$(document).ready(function () {
9696

97-
new GreenAudioPlayer('.gap-example');
97+
// new GreenAudioPlayer('.gap-example');
9898

9999
// load audio
100100
var myAudio = document.getElementById("hyperplayer");
@@ -137,43 +137,49 @@ $(document).ready(function () {
137137
isPlaying = false;
138138
};
139139

140+
myAudio.controlsList = "nodownload noplaybackrate";
141+
140142
document.addEventListener('keydown', function (e) {
141143
// play and pause audio
142-
if (e.ctrlKey && e.keyCode == 32 && !(e.shiftKey)) {
144+
if (e.ctrlKey && e.key == " " && !(e.shiftKey)) {
143145
togglePlay()
144146
};
145-
// stop audio (ctrl + space)
146-
if (e.ctrlKey && e.shiftKey && e.keyCode == 32) {
147-
myAudio.load();
148-
isPlaying = false;
149-
};
147+
// // stop audio (ctrl + space)
148+
// if (e.ctrlKey && e.shiftKey && e.keyCode == 32) {
149+
// myAudio.load();
150+
// isPlaying = false;
151+
// };
150152
// speed up audio (ctrl + shift + >)
151-
if (e.ctrlKey && e.shiftKey && e.keyCode == 190) {
152-
if (playbackRate < 3.0) {
153+
if (e.ctrlKey && e.shiftKey && e.key == "ArrowRight") {
154+
if (playbackRate < 2.0) {
153155
playbackRate = playbackRate + 0.25;
154156
};
155157
myAudio.playbackRate = playbackRate;
156158
console.log('playback rate: ' + playbackRate);
157159

158160
};
159161
// slow down audio (ctrl + shift + <)
160-
if (e.ctrlKey && e.shiftKey && e.keyCode == 188) {
162+
if (e.ctrlKey && e.shiftKey && e.key == "ArrowLeft") {
161163
if (playbackRate > 0.25) {
162164
playbackRate = playbackRate - 0.25;
163165
};
164166
myAudio.playbackRate = playbackRate;
165167
console.log('playback rate: ' + playbackRate);
166168
};
167169
// skip forward 5 seconds (ctrl + >)
168-
if (e.ctrlKey && e.keyCode == 190 && !(e.shiftKey)) {
170+
if (e.ctrlKey && e.key == "ArrowRight" && !(e.shiftKey)) {
169171
myAudio.currentTime += 5.0;
170172
};
171173
// skip back 5 seconds (ctrl + <)
172-
if (e.ctrlKey && e.keyCode == 188 && !(e.shiftKey)) {
174+
if (e.ctrlKey && e.key == "ArrowLeft" && !(e.shiftKey)) {
173175
myAudio.currentTime -= 5.0;
174176
};
175177
});
176178

179+
$('.playback-rate').change(function (e) {
180+
myAudio.playbackRate = e.target.defaultValue;
181+
console.log('playback rate: ' + myAudio.playbackRate);
182+
});
177183

178184

179185
});

‎javascript/tooltip.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ function findText() {
5050
}
5151
}
5252

53-
var button = document.querySelector('.dropdown-trigger button');
53+
var button = document.querySelector('#findAndReplace');
5454

5555
// Listen for click events on body
5656
document.body.addEventListener('click', function (event) {

0 commit comments

Comments
 (0)