-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
135 lines (118 loc) · 4.55 KB
/
test.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
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html>
<body>
<audio id="song" preload="metadata"></audio>
<div>Playback position: <span id="position"></span> seconds</div>
<button type="button" onclick="playPause()" id="playpause">Play music</button>
<br>
<div>Play speed is currently: <span id="speed"></span>x speed</div>
<br>
<div>Loop start: <span id="startpos"></span>s</div>
<div>Loop end: <span id="endpos"></span>s</div>
<br>
<input type="file" id="input" />
<br>
<br>
<button onclick="increasePlaySpeed()" type="button">Increase playback speed 5%</button>
<br>
<button onclick="decreasePlaySpeed()" type="button">Decrease playback speed -5%</button>
<br>
<br>
<button onclick="skipForward()" type="button">Skip forward 5s</button>
<br>
<button onclick="goBackward()" type="button">Go backward -5s</button>
<br>
<br>
<button type="button" onclick="changeLoopButtonText()" id="changeButton">Set loop start</button>
<script>
input.onchange = function () {
//when new song uploaded, reset
var music = document.getElementById('song');
music.src = URL.createObjectURL(this.files[0]);
music.loop = 1;
setLoop(2);
updateSpeed();
music.onend = function () {
URL.revokeObjectURL(this.src);
}
}
var music = document.getElementById("song");
var start = 0;
var end = music.duration;
music.onloadedmetadata = function () {
setLoop(2);
};
updateSpeed();
music.ontimeupdate = function () { checkTime() };
function checkTime() {
document.getElementById("position").innerHTML = music.currentTime.toFixed(1);
// check whether to update or not
if (music.currentTime > end) {
music.currentTime = start;
} else if (music.currentTime < start) {
music.currentTime = start;
}
}
function updateSpeed() {
document.getElementById("speed").innerText = music.playbackRate.toFixed(2);
}
function increasePlaySpeed() {
music.playbackRate += 0.05;
updateSpeed();
}
function decreasePlaySpeed() {
music.playbackRate -= 0.05;
updateSpeed();
}
function skipForward() {
music.currentTime += 5;
}
function goBackward() {
music.currentTime -= 5;
}
function setLoop(stage) {
if (stage == -1) { //music not uplodaded yet
document.getElementById("startpos").innerHTML = "Music not uplodaded yet";
document.getElementById("endpos").innerHTML = "Music not uplodaded yet";
} else if (stage == 0) { //setting start marker
start = music.currentTime;
document.getElementById("startpos").innerHTML = start.toFixed(1);
} else if (stage == 1) { //set end marker
end = music.currentTime;
document.getElementById("endpos").innerHTML = end.toFixed(1);
} else { //reset markers
start = 0;
end = music.duration;
document.getElementById("startpos").innerHTML = start;
document.getElementById("endpos").innerHTML = end.toFixed(1);
}
}
function changeLoopButtonText() {
var elem = document.getElementById("changeButton");
if (isNaN(music.duration)) {
setLoop(-1);
} else if (elem.innerHTML=="Set loop start") {
elem.innerHTML = "Set loop end";
setLoop(0);
} else if (elem.innerHTML=="Set loop end") {
elem.innerHTML = "Reset loop markers";
setLoop(1);
} else if (elem.innerHTML=="Reset loop markers") {
elem.innerHTML = "Set loop start";
setLoop(2);
}
}
function playPause() {
var elem = document.getElementById("playpause");
if (isNaN(music.duration)) {} //music not uploaded yet
else if (elem.innerHTML == "Play music") {
music.play();
elem.innerHTML = "Pause music";
} else if (elem.innerHTML == "Pause music") {
music.pause();
elem.innerHTML = "Play music";
}
}
</script>
</body>
</html>