-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
93 lines (86 loc) · 3.15 KB
/
app.js
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
//mapping to the HTML document
const song= document.querySelector(".song");
const play= document.querySelector(".play");
const replay= document.querySelector(".replay");
const video= document.querySelector(".vid-container video");
const outline= document.querySelector(".moving-outline circle");
//sounds
const sounds= document.querySelectorAll(".sound-picker button");
//display
const timeDisplay= document.querySelector(".time-display");
const outlineLength = outline.getTotalLength();
//duration
const timeSelect= document.querySelectorAll(".time-select button");
let fakeDuration= 10;
//--------------------------------------------------------------------------------------------------------
// ::??
//
outline.style.strokeDashoffset= outlineLength;
outline.style.strokeDasharray= outlineLength;
timeDisplay.textContent = `${Math.floor(fakeDuration / 60)}:${Math.floor(
fakeDuration % 60
)}`;
//-----------------------------------------------------------------------------------------------------------
// event Listeners. what happens when buttons are clicked
//this.getAttribute::??
sounds.forEach(sound => {
sound.addEventListener("click", function(){
song.src= this.getAttribute("data-sound");
video.src= this.getAttribute("data-video");
checkPlaying(song);
});
});
play.addEventListener("click", function() {
checkPlaying(song);
});
replay.addEventListener("click", function() {
restartSong(song);
});
timeSelect.forEach(option =>{
option.addEventListener("click", function(){
if(option == document.getElementById("custom")){
fakeDuration = document.getElementById("ctime").value
}else{
fakeDuration= this.getAttribute("data-time");
}
timeDisplay.textContent= `${Math.floor(fakeDuration / 60)}:${
Math.floor(fakeDuration % 60)
}`;
});
});
//-------------------------------------------------------------------------------------------------------------------
//the restart and check playing functions.
//check playing function: what to do depending on playing song
const restartSong = song =>{
let currenttime= song.currentTime;
song.currentTime= 0;
}
const checkPlaying= song=>{
if (song.paused) {
song.play();
video.play();
play.src = "./svg/pause.svg";
}else{
song.pause();
video.pause();
play.src = "./svg/play.svg"
}
};
//-------------------------------------------------------------------------------------------------------------------
//::??
//
song.ontimeupdate = function(){
let currentTime = song.currentTime;
let elapsed= fakeDuration - currentTime;
let seconds= Math.floor(elapsed % 60);
let minutes= Math.floor(elapsed / 60);
timeDisplay.textContent= `${minutes}:${seconds}`;
let progress= outlineLength - (currentTime/fakeDuration) * outlineLength;
outline.style.strokeDashoffset = progress;
if(currentTime >= fakeDuration){
song.pause();
song.currentTime = 0;
play.src = "./svg/play.svg";
video.pause();
}
};