78 lines
No EOL
3.3 KiB
HTML
78 lines
No EOL
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<title>BoomBox</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
|
|
|
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Lato|Staatliches" rel="stylesheet">
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<h1>Happy BoomBox</h1>
|
|
<text>You can customize the happy boombox by changing or adding additional songs to the userdata on the boombox entity. Click a song title to play a tune!</text><br>
|
|
<br>
|
|
<table id = "controls">
|
|
<tr>
|
|
<td>
|
|
<div id = "volume-div">
|
|
<i class="fa fa-volume-down" aria-hidden="true"></i>
|
|
<input type="range" style="visibility: invisible" name = "slider" id="volume" min="0" max = "10">
|
|
<i class="fa fa-volume-up" aria-hidden="true"></i>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<button class = "red" id="stop">Stop Music</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<div id ="songList">
|
|
<h1>Song List</h1>
|
|
<text id = "songs">Fetching songs...</text>
|
|
</div>
|
|
<br>
|
|
<text>Default music provided by BenSound (bensound.org)</text>
|
|
<script>
|
|
function main() {
|
|
var initialized = false;
|
|
EventBridge.scriptEventReceived.connect(function(message) {
|
|
message = JSON.parse(message);
|
|
if (message.type === "updateSongList" && !initialized) {
|
|
initialized = true;
|
|
document.getElementById("volume").value = parseInt(message.volume * 10);
|
|
$("#controls").css('visibility', 'visible');
|
|
|
|
$("#songs").text("");
|
|
var songJSON = message.songList;
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
'type' : 'confirmSongList'
|
|
}));
|
|
var songKeys = Object.keys(songJSON);
|
|
for (var i = 0; i < songKeys.length; i++) {
|
|
var url = songJSON[songKeys[i]];
|
|
$("#songList").append("<button class = \"white\" id = " + url + ">" + songKeys[i] + "</button><br>");
|
|
};
|
|
$(':button').click(function(){
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
'type' : 'playSong',
|
|
'song' : this.id
|
|
}));
|
|
});
|
|
$("#volume").change(function(){
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
'type' : 'adjustVolume',
|
|
'volume' : $(this).val() / 10
|
|
}))
|
|
});
|
|
}
|
|
});
|
|
|
|
};
|
|
$(document).ready(main);
|
|
|
|
</script>
|
|
</body>
|
|
</html> |