Skip to content

Instantly share code, notes, and snippets.

@NickGreen
Created June 19, 2020 15:30
Show Gist options
  • Save NickGreen/5dd0b201d028192471a5dd69e31dffc3 to your computer and use it in GitHub Desktop.
Save NickGreen/5dd0b201d028192471a5dd69e31dffc3 to your computer and use it in GitHub Desktop.
SONOS API webpage
<!DOCTYPE html>
<html>
<head>
<style>
body {
background:black;
}
#favorites_container {
width:89%;
display:inline-block;
}
.favorite {
opacity:.8;
background-size:cover;
width:250px;
height:250px;
border:0 none;
font-size: 0;
cursor:pointer;
}
#controls {
width:10%;
height:100%;
float:right;
}
#controls input {
font-size:35px;
color:white;
position: relative;
display: inline-block;
padding: 15px 25px;
background-color: #333;
width:90%;
height:100px;
margin:10px;
border:none;
border-radius:10px;
}
#controls input:hover{
cursor:pointer;
}
#volume_display {
color:#ddd;
}
</style>
</head>
<body>
<div id="favorites_container"></div>
<div id="controls">
<h5>Controls</h5>
<input id="playpause" type="submit" value="Play" onclick="playpause()">
<span id="volume_display"></span></br>
<input type="submit" value="๐Ÿ”Š" onclick="volume('+5')">
<input type="submit" value="๐Ÿ”ˆ" onclick="volume('-5')">
</div>
<script type="text/javascript">
const room_name = "TV%20soundbar";
function playpause() {
switch( document.getElementById("playpause").value ) {
case "Pause":
var input_value = "Play";
var command = "pause";
break;
default:
var input_value = "Pause";
var command = "play";
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
document.getElementById("playpause").value = input_value;
}
}
xhr.open('get', 'http://localhost:5005/' + room_name + '/' + command, true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xhr.send();
}
function get_volume() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
var response = JSON.parse( this.responseText );
var volume_span = document.getElementById( "volume_display" );
var volume_percent = document.createTextNode( "Volume: " + response.volume + "%" );
volume_span.innerHTML = '';
unfade( volume_span );
volume_span.appendChild( volume_percent );
fade( volume_span );
}
}
xhr.open('get', 'http://localhost:5005/' + room_name + '/state', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xhr.send();
}
function volume( value ) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
get_volume();
}
}
xhr.open('get', 'http://localhost:5005/' + room_name + '/volume/' + value, true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xhr.send();
}
function play_favorite() {
input_value = event.target.value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
document.getElementById("playpause").value = "Pause";
}
}
xhr.open('get', 'http://localhost:5005/' + room_name + '/favorite/' + input_value, true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xhr.send();
}
function fade(element) {
var op = 1; // initial opacity
var timer = setInterval(function () {
if (op <= 0.1){
clearInterval(timer);
element.style.display = 'none';
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op -= op * 0.1;
}, 50);
}
function unfade(element) {
var op = 0.1; // initial opacity
element.style.display = 'inline-block';
var timer = setInterval(function () {
if (op >= 1){
clearInterval(timer);
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op += op * 0.1;
}, 1);
}
// load all the favorites after everything else is rendered
window.addEventListener("load", function() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if ( xhr.readyState === 4 ) {
document.getElementById( "favorites_container" ).innerHTML = '';
var favorites = "";
var response = JSON.parse( this.responseText );
response.forEach( function render_favorite( favorite ) {
if ( "Gigi" == favorite.title.substring( 0, 4 ) ) {
var favorite_div = '<input type="submit" value="' + favorite.title + '" class="favorite" style="background-image: url(' + favorite.albumArtUri + ');" onclick="play_favorite()"></div>';
favorites = favorites.concat( favorite_div );
}
} );
document.getElementById( "favorites_container" ).innerHTML = favorites;
}
}
xhr.open('get', 'http://localhost:5005/' + room_name + '/favorites/detailed', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xhr.send();
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment