forked from RelistenNet/gapless.js
-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
55 lines (51 loc) · 2.17 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
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html, body {
width: 600px;
}
.loaded {
color: green;
}
</style>
</head>
<body>
<h4>
You'll want to wait until WebAudio is loaded for both the current track and the next track before jumping to the end. Otherwise you may notice a slight gap. If both WebAudios are fully loaded you should hear no discernable gap most of the time.
</h4>
<div onClick="player.currentTrack.seekToEnd()">Click to jump to end of track</div>
<div onClick="player.currentTrack.togglePlayPause()">Toggle Play/Pause</div>
<pre id="ready">Both tracks are not loaded</pre>
<pre id="status"></pre>
<script type="text/javascript" src="./index.js"></script>
<script type="text/javascript">
window.player = new Gapless.Queue({
// tracks: [
// "http://phish.in/audio/000/012/321/12321.mp3",
// "http://phish.in/audio/000/012/322/12322.mp3",
// "http://phish.in/audio/000/012/323/12323.mp3",
// "http://phish.in/audio/000/012/324/12324.mp3"
// ]
tracks: [
"https://archive.org/download/jrad2017-03-17.cmc621.cmc64.sbd.matrix.flac16/jrad2017-03-17.cmc621.cmc64.sbd.matrix-s2t03.mp3",
"https://archive.org/download/jrad2017-03-17.cmc621.cmc64.sbd.matrix.flac16/jrad2017-03-17.cmc621.cmc64.sbd.matrix-s2t04.mp3",
"https://archive.org/download/jrad2017-03-17.cmc621.cmc64.sbd.matrix.flac16/jrad2017-03-17.cmc621.cmc64.sbd.matrix-s2t05.mp3",
"https://archive.org/download/jrad2017-03-17.cmc621.cmc64.sbd.matrix.flac16/jrad2017-03-17.cmc621.cmc64.sbd.matrix-s2t06.mp3"
],
onProgress: function(track) {
if (player.nextTrack && player.nextTrack.webAudioLoadingState === 'LOADED') {
document.querySelector('#ready').classList.add('loaded');
document.querySelector('#ready').innerHTML = 'Both tracks are LOADED';
}
document.querySelector('#status').innerHTML = JSON.stringify({
currentTrack: track ? track.completeState : {},
nextTrack: player.nextTrack ? player.nextTrack.completeState : {}
}, null, 2);
}
});
player.play();
</script>
</body>
</html>