-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
106 lines (80 loc) · 3.32 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
<html>
<head>
<title>Radiojazz Player Demo</title>
<meta charset="utf-8">
<script src="core-promise.js"></script>
<script src="radiokit-toolkit-playback.js"></script>
<script>
function init() {
window.player = new RadioKitToolkitPlayback.Channel.Player("b4b03c05-6d82-42d6-89ce-b1f822836ccf", "123");
window.player.on('track-playback-started', function(track) {
document.getElementById('track-id').innerHTML = 'TRACK ID: ' + track.getId();
track.getInfoAsync()
.then(function(trackInfo) {
// Name
document.getElementById('track-name').innerHTML = 'NAME: ' + trackInfo.getName();
// Metadata
var metadataInfo = trackInfo.getMetadata();
var metadataText = 'METADATA:<ul>';
metadataKeys = Object.keys(metadataInfo);
for(var i = 0; i < metadataKeys.length; i++) {
metadataText += '<li><b>' + metadataKeys[i] + '</b>: ' + metadataInfo[metadataKeys[i]] + '</li>';
}
metadataText += '</ul>';
document.getElementById('track-metadata').innerHTML = metadataText;
})
.catch(function(reason) {
throw reason;
});
});
window.player.on('track-position', function(track, position, duration) {
document.getElementById('track-position').innerHTML = 'POSITION: ' + position + ' / ' + duration + ' ms';
});
window.player.on('playlist-fetched', function(playlist) {
var tracks = Object.keys(playlist.getTracks());
var tracksHTML = "<div>PLAY LIST:</div><br />";
for (var i = 0; i < tracks.length; i++) {
tracksHTML += "<div>" + tracks[i] + "</div>";
}
document.getElementById('playlist').innerHTML = tracksHTML;
});
}
function toggle() {
var button = document.getElementById('button');
if(window.player.isStarted()) {
button.innerHTML = "PLAY";
window.player.stop();
} else {
button.innerHTML = "STOP";
window.player.start();
}
}
function fetchPlaylist() {
window.player.fetchPlaylist();
}
function setVolume(volume) {
window.player.setVolume(volume);
}
</script>
</head>
<body onload="init()" style="text-align: center">
<button onclick="toggle()" id="button" style="width: 400px; height: 200px; font-size: 24pt">PLAY</button>
<br /><br />
<button onclick="fetchPlaylist()" style="width: 97px; height: 50px; font-size: 11pt">FETCH PLAYLIST</button>
<br /><br />
<button onclick="setVolume(0.25)" style="width: 97px; height: 50px; font-size: 11pt">VOL 25%</button>
<button onclick="setVolume(0.50)" style="width: 97px; height: 50px; font-size: 11pt">VOL 50%</button>
<button onclick="setVolume(0.75)" style="width: 97px; height: 50px; font-size: 11pt">VOL 75%</button>
<button onclick="setVolume(1.0)" style="width: 97px; height: 50px; font-size: 11pt">VOL 100%</button>
<br><br>
<div id="track-id" style="width: 400px; text-align: center; margin: 0 auto"></div>
<br>
<div id="track-position" style="width: 400px; text-align: center; margin: 0 auto"></div>
<br>
<div id="track-name" style="width: 400px; text-align: center; margin: 0 auto"></div>
<br>
<div id="track-metadata" style="width: 400px; text-align: left; margin: 0 auto"></div>
<br>
<div id="playlist" style="width: 400px; text-align: left; margin: 0 auto"></div>
</body>
</html>