websockets-streaming-audio/src/common.css

Click a browser button to launch a node.js process on the server side which streams audio using web sockets back to the browser which is then rendered using web audio API My plan is to make this modular enough to get added to your process as simple API

::selection {
  color: #eee;
  background: darkred;
}
body ::-webkit-scrollbar {
  height: 16px;
  overflow: visible;
  width: 16px;
}
body ::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, .1);
  background-clip: padding-box;
  border: solid transparent;
  min-height: 28px;
  padding: 100px 0 0;
  box-shadow: inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07);
  border-width: 1px 1px 1px 6px;
}
body ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
body ::-webkit-scrollbar-button {
  height: 0;
  width: 0;
}
::-webkit-scrollbar-track {
  background-clip: padding-box;
  border: solid transparent;
  border-width: 0 0 0 4px;
}
body ::-webkit-scrollbar-corner {
  background: transparent;
}
html, body {
  height: 80%;
  /*overflow: hidden;*/
  /*overflow: auto;*/
    overflow: visible;
  margin: 0;
  padding: 0;
}
body {
  color: #222;
  font-family: 'Open Sans', arial, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  padding: 2em;
  background: -webkit-gradient(radial, center center, 500, center center, 1400, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.6))) #fff;
  background: -moz-radial-gradient(farthest-side, rgba(0,0,0,0) 90%, rgba(0,0,0,0.2) 150%) #fff;
  background: -webkit-radial-gradient(farthest-side, rgba(0,0,0,0) 90%, rgba(0,0,0,0.2) 150%) #fff;
  background: -ms-radial-gradient(farthest-side, rgba(0,0,0,0) 90%, rgba(0,0,0,0.2) 150%) #fff;
  background: -o-radial-gradient(farthest-side, rgba(0,0,0,0) 90%, rgba(0,0,0,0.2) 150%) #fff;
  background: radial-gradient(farthest-side, rgba(0,0,0,0) 90%, rgba(0,0,0,0.2) 150%) #fff;
  box-sizing: border-box;
}
a {
  color: navy;
}
details {
  position: absolute;
  top: 0;
  left: 1em;
  margin: 1em 0;
  padding: 10px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.3);
  border-radius: 5px;
  max-width: 600px;
  font-size: 10pt;
  z-index: 100;
  background: #F7F7F7;
}
details > div {
  margin: 10px 0;
}
details > summary {
  cursor: pointer;
  white-space: nowrap;
}
button {
  display: inline-block;
  background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F9F9F9), to(#E3E3E3));
  background: -webkit-linear-gradient(#F9F9F9 40%, #E3E3E3 70%);
  background: -moz-linear-gradient(#F9F9F9 40%, #E3E3E3 70%);
  background: -ms-linear-gradient(#F9F9F9 40%, #E3E3E3 70%);
  background: -o-linear-gradient(#F9F9F9 40%, #E3E3E3 70%);
  background: linear-gradient(#F9F9F9 40%, #E3E3E3 70%);
  border: 1px solid #999;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: pointer;
  text-shadow: 1px 1px #fff;
  font-weight: 700;
  font-size: 10pt;
}
button:not(:disabled):hover,
button:not(:disabled).active {
  border-color: black;
}
button:not(:disabled):active,
button:not(:disabled).active {
  background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#E3E3E3), to(#F9F9F9));
  background: -webkit-linear-gradient(#E3E3E3 40%, #F9F9F9 70%);
  background: -moz-linear-gradient(#E3E3E3 40%, #F9F9F9 70%);
  background: -ms-linear-gradient(#E3E3E3 40%, #F9F9F9 70%);
  background: -o-linear-gradient(#E3E3E3 40%, #F9F9F9 70%);
  background: linear-gradient(#E3E3E3 40%, #F9F9F9 70%);
}
input[type="range"]{
  -webkit-appearance: none !important;
  background-color: #555;
  box-shadow: 0 -1px 1px rgba(255,255,255,0.5) inset;
  border-radius: 10px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 20px;
  height: 8px;
  box-shadow: 1px 1px 5px rgba(0,0,0,1);
  cursor: pointer;
  border-top: 1px solid #fff;
  background: #ccc -webkit-linear-gradient(top, rgb(240, 240, 240), rgb(210, 210, 210));
}
h2 {
  margin: 0;
  font-weight: 300;
}