-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.html
83 lines (78 loc) · 3.1 KB
/
demo.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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Windsor Demo: Default Theme</title>
<script type="text/javascript" src="windsor.js"></script>
<script type="text/javascript">
var trackRating = 0; // little trick for demo purposes :)
var runtime = new Windsor.Runtime();
runtime.ignoreHTTPStatusCodes = true; // so we can run this locally
runtime.playerName = 'Demo';
runtime.playerDelegate = {
play: function(){
document.getElementById('demoTrackPlayer').play();
runtime.changePlayState(1);
},
pause: function(){
document.getElementById('demoTrackPlayer').pause();
runtime.changePlayState(2);
},
playPause: function(){
var el = document.getElementById('demoTrackPlayer');
if (el.paused)
{
el.play();
runtime.changePlayState(1);
}
else
{
el.pause();
runtime.changePlayState(2);
}
},
nextTrack: function(){
alert('The theme asked us to skip to the next track! We\'ll just stay put for now.');
},
previousTrack: function(){
alert('The theme asked us to skip to the previous track! We\'ll just stay put for now.');
},
rating: function(){
return trackRating;
}
};
function loadWindsor(){
var spinner = document.getElementById('spinner');
spinner.style.display = null;
runtime.loadTheme('Default.bowtie', function(success, el){
if (!success)
{
alert('Windsor failed to load the default theme!');
return;
}
spinner.style.display = 'none';
el.style.display = null;
});
}
function playDemoTrack(){
document.getElementById('demoTrackPlayer').play();
trackRating = 60;
runtime.changeTrack({
title: 'MasqueradeE',
artist: 'Celestial Aeon Project',
album: 'Aeon 3'
});
runtime.changeArtwork('demo-art.jpg');
runtime.changePlayState(1);
}
</script>
</head>
<body>
<h1>Windsor Demo: Default Theme</h1>
<p>This is a demonstration of using Windsor (a browser-based Bowtie theme runtime) with the default Bowtie theme, known internally as Flip. Click the first button to load the Default theme into Windsor, and then the second to play a royalty-free demo track that can be controlled by the Bowtie theme. Requires HTML5 Audio support with MP3 files (works in Safari on Mac).</p>
<p>Double-click the theme to flip it over!</p>
<p><button id="startFlip" onclick="loadWindsor();">Load Windsor with Default Theme</button> <button id="demoTrack" onclick="playDemoTrack();">Play Demo Track (Requires MP3 HTML5 Audio Support)</button></p>
<p><audio id="demoTrackPlayer" src="demo-audio.mp3"></p>
<p id="spinner" style="display: none;"><img src="demo-spinner.gif"></p>
</body>
</html>