Boombox: Spacialisation

HTML

              
                <div id="boombox">

	<div class="boombox-body">

		<div class="bb-front">

			<section class="master-controls">
				<input type="range" id="volume" class="control-volume" min="0" max="2" value="1" list="gain-vals" step="0.01" data-action="volume" />
				<datalist id="gain-vals">
					<option value="0" label="min"></option>
					<option value="2" label="max"></option>
				</datalist>
				<label for="volume">VOL</label>

				<input type="range" id="panner" class="control-panner" list="pan-vals" min="-1" max="1" value="0" step="0.01" data-action="panner" />
				<datalist id="pan-vals">
					<option value="-1" label="left"></option>
					<option value="1" label="right"></option>
				</datalist>
				<label for="panner">PAN</label>

				<button class="control-power" role="switch" aria-checked="false" data-power="on">
					<span>On/Off</span>
				</button>
			</section>

			<section class="tape">

				<audio src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/858/furry.mp3" crossorigin="anonymous"></audio>

				<button data-playing="false" class="tape-controls-play" role="switch" aria-checked="false">
					<span>Play/Pause</span>
				</button>
			</section>
		</div><!--bb-front-->

		<div class="bb-top"></div>
		<div class="bb-right"></div>
		<div class="bb-bottom"></div>
		<div class="bb-left"></div>
		<div class="bb-back"></div>


	</div><!-- boombox-body -->

</div>

<div id="move-controls" aria-labelledby="move-boombox">
	<h3 id="move-boombox">Move Boombox</h3>

	<section class="move-controls_xy">
		<button data-control="left" aria-labelledby="move-boombox left-label">
			<span id="left-label">Left</span>
		</button>
		<button data-control="up" aria-labelledby="move-boombox up-label">
			<span id="up-label">Up</span>
		</button>
		<button data-control="right" aria-labelledby="move-boombox right-label">
			<span id="right-label">Right</span>
		</button>
		<button data-control="down" aria-labelledby="move-boombox down-label">
			<span id="down-label">Down</span>
		</button>
	</section>

	<section class="move-controls_z">
		<button data-control="back" aria-labelledby="move-boombox back-label">
			<span id="back-label">Back</span>
		</button>
		<button data-control="forward" aria-labelledby="move-boombox for-label">
			<span id="for-label">Forward</span>
		</button>
	</section>

	<section class="move-controls_rotate">
		<button data-control="rotate-left" aria-labelledby="move-boombox rleft-label">
			<span id="rleft-label">Rotate left</span>
		</button>
		<button data-control="rotate-down" aria-labelledby="move-boombox rdown-label">
			<span id="rdown-label">Rotate downwards</span>
		</button>
		<button data-control="rotate-right" aria-labelledby="move-boombox rright-label">
			<span id="-label">Rotate right</span>
		</button>
		<button data-control="rotate-up" aria-labelledby="move-boombox rup-label">
			<span id="rup-label">Rotate upwards</span>
		</button>
	</section>

</div>

CSS

              
                :root {
	--orange: hsla(32, 100%, 50%, 1);
	--yellow: hsla(49, 99%, 50%, 1);
	--lime: hsla(82, 90%, 45%, 1);
	--green: hsla(127, 81%, 41%, 1);
	--red: hsla(342, 93%, 53%, 1);
	--pink: hsla(314, 85%, 45%, 1);
	--blue: hsla(211, 92%, 52%, 1);
	--purple: hsla(283, 92%, 44%, 1);
	--cyan: hsla(195, 98%, 55%, 1);
	--white: hsla(0, 0%, 95%, 1);
	--black: hsla(0, 0%, 10%, 1);

	/* abstract our colours */
	--boxMain: var(--green);
	--boxSecond: var(--lime);
	--boxHigh: var(--red);

	--border: 6px solid var(--black);
	--borderRad: 2px;

	/* dimensions */
	--boxWidth: 800px;
	--boxHeight: 440px;
	--boxDepth: 200px;

}
@media screen and (max-width: 800px) {
	:root {
		--boxWidth: 460px;
		--boxHeight: 600px;
	}
}
* {box-sizing: border-box;}

/* everything has to be pixels for 3D reasons */
body {
	background-color: var(--white);
	min-height: 90vh; padding: 4vmax; margin:0px;
	font-family: sans-serif, system-ui; color: var(--black);
}

#boombox {
	width: var(--boxWidth); height: var(--boxHeight);
	margin: 0px auto;
	perspective: 1000px;
	perspective-origin: 50% 100px;
	transform-style: preserve-3d;
}
.boombox-body {
	position: relative;
	width: var(--boxWidth); height: var(--boxHeight);
	transform-style: preserve-3d;
	transform: scale(0.8);
}

[class^="bb"] {
	position: absolute;
	transform-style: preserve-3d;
	background-color: var(--green);
	border: var(--border);
}
.bb-top {
	width: var(--boxWidth); height: var(--boxDepth);
	transform: rotateX( -90deg);
	transform-origin: top right;
}
.bb-right {
	width: var(--boxDepth); height: var(--boxHeight);
	right:0px;
	transform: rotateY(-90deg);
	transform-origin: top right;
}
.bb-bottom {
	width: var(--boxWidth); height: var(--boxDepth);
	bottom: 0px;
	transform: rotateX(90deg);
	transform-origin: bottom left;
}
.bb-left {
	width: var(--boxDepth); height: var(--boxHeight);
	transform: rotateY(90deg);
	transform-origin: top left;
}
.bb-back {
	width: var(--boxWidth); height: var(--boxHeight);
	transform: translateZ(-200px) rotateY(180deg);
}

.bb-front {
	/*gradient with two circles for speakers*/
	width: var(--boxWidth); height: var(--boxHeight);
	background: var(--boxMain) repeat-x bottom left;
	background-image:
		radial-gradient(circle,
			var(--boxMain) 2vmin,
			var(--black) 2vmin,
			var(--black) 3vmin,
			var(--boxSecond) 3vmin,
			var(--boxSecond) 9vmin,
			var(--black) 9vmin,
			var(--black) 9.5vmin,
			var(--boxSecond) 9.5vmin,
			var(--boxSecond) 12vmin,
			var(--black) 12vmin,
			var(--black) 13vmin,
			var(--boxMain) 13vmin);
	background-size: 33.3% 70%;
	border: 6px solid var(--black);
	border-radius: var(--borderRad);
}
/*small screen with one circle*/
@media screen and (max-width: 800px) {
	.bb-front {
		background-repeat: no-repeat;
		background-position: center top;
		background-size: 100% 70%;
		background-image:
		radial-gradient(circle,
			var(--boxMain) 4vmin,
			var(--black) 4vmin,
			var(--black) 5vmin,
			var(--boxSecond) 5vmin,
			var(--boxSecond) 21vmin,
			var(--black) 21vmin,
			var(--black) 21.5vmin,
			var(--boxSecond) 21.5vmin,
			var(--boxSecond) 24vmin,
			var(--black) 24vmin,
			var(--black) 25vmin,
			var(--boxMain) 25vmin);
	}
}

.master-controls {
	display: grid;
	grid-template-rows: repeat(2, auto);
	grid-template-columns: repeat(2, 1fr) 12%;
	/*name our grid areas so they are more manipulative later*/
	grid-template-areas:
		"volin panin power"
		"vollab panlab power";
	justify-items: center; align-items: center;
	padding: 30px; height: 120px;
	background-color: var(--boxSecond);
	border-bottom: var(--border);
}
/* change control grid areas for smaller boom box */
@media screen and (max-width: 800px) {
	.master-controls {
		/*grid-gap: 10px;*/
		grid-template-columns: 16% 1fr 12%;
		grid-template-areas:
			"vollab volin power"
			"panlab panin power";
	}
}
.master-controls input, .master-controls label {display: block;}
.master-controls label {padding-top:20px;}
@media screen and (max-width: 800px) {
	.master-controls label {padding-top: 6px;}
}
.master-controls input::before, .master-controls input::after {
	line-height: 2; color: var(--black);
}
.master-controls input::before {padding-right: 1vw;}
.master-controls input::after {padding-left: 1vw;}

.control-volume {grid-area: volin;}
.control-volume::before {content: 'min';}
.control-volume::after {content: 'max';}
label[for="volume"] {grid-area: vollab; margin-top:10px;}
.control-panner {grid-area: panin;}
.control-panner::before {content: 'left';}
.control-panner::after {content: 'right';}
label[for="panner"] {grid-area: panlab; margin-top: 10px;}

@media screen and (max-width: 800px) {
	label[for="volume"], label[for="panner"] {margin-top: 0px;}
	.control-volume {margin-bottom: 20px;}
}

.control-power {
	grid-area: power; align-self: center;
	width: 40px; height: 40px;
	border: 3px solid var(--black); border-radius: 20px;
	cursor: pointer;
}
.control-power span {display: none;}

/* tape area ~~~~~~~~~~~~~~~~~~~~~*/
.tape {
	display: grid;
	grid-template-rows: 222px 80px;
	grid-template-columns: repeat(5, 1fr);
	grid-template-areas: "tape tape tape tape tape"
		"back play play play next";

	width: 300px; margin: 0px auto;
	background: var(--boxMain) no-repeat center center;
	background-image:
		radial-gradient(circle at 80px,
			var(--boxSecond) 20px,
			var(--black) 20px,
			var(--black) 25px,
			transparent 25px),
		radial-gradient(circle at 210px,
			var(--boxSecond) 20px,
			var(--black) 20px,
			var(--black) 25px,
			transparent 25px),
		linear-gradient(180deg,
			transparent 93px,
			var(--black) 93px,
			var(--black) 101px,
			var(--boxHigh) 101px,
			var(--boxHigh) 201px,
			var(--black) 201px,
			var(--black) 209px,
			transparent 209px),
		radial-gradient(circle at 80px,
			var(--boxHigh) 50px,
			var(--black) 50px,
			var(--black) 58px,
			transparent 58px),
		radial-gradient(circle at 210px,
			var(--boxHigh) 50px,
			var(--black) 50px,
			var(--black) 58px,
			transparent 58px);
	background-size: 100% 100%, 100% 100%, 42% 100%, 100% 100%, 100% 100%;
	border: var(--border); border-bottom-width: 0px;
	border-radius: var(--borderRad);
}
@media screen and (max-width: 800px) {
	.tape {
		/*width: 80%; margin-top: 30vh;*/
		margin-top: 220px;
		grid-template-rows: 168px 74px;
		background-image:
			radial-gradient(circle at 80px,
				var(--boxSecond) 20px,
				var(--black) 20px,
				var(--black) 25px,
				transparent 25px),
			radial-gradient(circle at 210px,
				var(--boxSecond) 20px,
				var(--black) 20px,
				var(--black) 25px,
				transparent 25px),
			linear-gradient(180deg,
				transparent 63px,
				var(--black) 63px,
				var(--black) 71px,
				var(--boxHigh) 71px,
				var(--boxHigh) 171px,
				var(--black) 171px,
				var(--black) 179px,
				transparent 179px),
			radial-gradient(circle at 80px,
				var(--boxHigh) 50px,
				var(--black) 50px,
				var(--black) 58px,
				transparent 58px),
			radial-gradient(circle at 210px,
				var(--boxHigh) 50px,
				var(--black) 50px,
				var(--black) 58px,
				transparent 58px);
	}
}
audio {
	grid-area: tape;
}
[class^="tape-controls"] {
	border: none;
}
[class^="tape-controls"] span {display: none;}
.tape-controls-play {grid-area: play;}

/* ~~~~~~~~~~~~~~~~ All the crazy range styling */
input[type=range] {
  -webkit-appearance: none;
	width: 30vw;
  background: transparent;
}
/* set min & max for different screen sizes */
@media screen and (min-width: 1100px) {
	input[type=range] {width: 270px;}
}
@media(max-width: 680px) {
	input[type=range] {
		width: 180px;
	}
}
@media(max-width: 380px) {
	input[type=range] {
		width: 130px;
	}
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -1vh;
	height: 4vh; width: 2vw;
	border: 0.5vmin solid var(--black);
  border-radius: var(--borderRad);
  background-color: var(--boxMain);
  cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  height: 4vh; width: 2vw;
	border: 0.5vmin solid var(--black);
  border-radius: var(--borderRad);
  background-color: var(--boxMain);
  cursor: pointer;
}
input[type=range]::-ms-thumb {
  height: 4vh; width: 2vw;
	border: 0.5vmin solid var(--black);
  border-radius: var(--borderRad);
  background-color: var(--boxMain);
  cursor: pointer;
}

input[type=range]::-webkit-slider-runnable-track {
  height: 2vh;
  cursor: pointer;
  background-color: var(--black);
  border-radius: var(--borderRad);
}
input[type=range]::-moz-range-track {
  height: 2vh;
  cursor: pointer;
  background-color: var(--black);
  border-radius: var(--borderRad);
}
input[type=range]::-ms-track {
  height: 2vh;
  cursor: pointer;
  background-color: var(--black);
  border-radius: var(--borderRad);
}

input[type=range]:focus {
  outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: var(--boxMain);
}


/*~~~~~~~~~~~~~~~~ the play pause & power icons*/
[data-playing] {
		background: transparent url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z" fill="black" /></svg>') no-repeat center center;
		background-size: 60% 60%;
		cursor: pointer;
}
[data-playing]:hover {
	background: transparent url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z" fill="hsla(32, 100%, 50%, 1)" /></svg>') no-repeat center center;
	background-size: 60% 60%;
}
[data-playing="true"] {
	background: transparent url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z" fill="black" /></svg>') no-repeat center center;
	background-size: 60% 60%;
}
[data-playing="true"]:hover {
				background: transparent url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z" fill="hsla(32, 100%, 50%, 1)" /></svg>') no-repeat center center;
			background-size: 60% 60%;
}
[data-power] {
	background: var(--boxSecond) url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M400 54.1c63 45 104 118.6 104 201.9 0 136.8-110.8 247.7-247.5 248C120 504.3 8.2 393 8 256.4 7.9 173.1 48.9 99.3 111.8 54.2c11.7-8.3 28-4.8 35 7.7L162.6 90c5.9 10.5 3.1 23.8-6.6 31-41.5 30.8-68 79.6-68 134.9-.1 92.3 74.5 168.1 168 168.1 91.6 0 168.6-74.2 168-169.1-.3-51.8-24.7-101.8-68.1-134-9.7-7.2-12.4-20.5-6.5-30.9l15.8-28.1c7-12.4 23.2-16.1 34.8-7.8zM296 264V24c0-13.3-10.7-24-24-24h-32c-13.3 0-24 10.7-24 24v240c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24z" fill="black" /></svg>') no-repeat center center;
	background-size: 60% 60%;
}
[data-power]:hover, [data-power="on"] {
	background: var(--boxHigh) url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M400 54.1c63 45 104 118.6 104 201.9 0 136.8-110.8 247.7-247.5 248C120 504.3 8.2 393 8 256.4 7.9 173.1 48.9 99.3 111.8 54.2c11.7-8.3 28-4.8 35 7.7L162.6 90c5.9 10.5 3.1 23.8-6.6 31-41.5 30.8-68 79.6-68 134.9-.1 92.3 74.5 168.1 168 168.1 91.6 0 168.6-74.2 168-169.1-.3-51.8-24.7-101.8-68.1-134-9.7-7.2-12.4-20.5-6.5-30.9l15.8-28.1c7-12.4 23.2-16.1 34.8-7.8zM296 264V24c0-13.3-10.7-24-24-24h-32c-13.3 0-24 10.7-24 24v240c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24z" fill="black" /></svg>') no-repeat center center;
	background-size: 60% 60%;
}


/* controls ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#move-controls {
	position: fixed; bottom: 0px; right: 0px;
	display: flex;
	justify-content: flex-end;
	background: hsla(0, 0%, 100%, 0.5);
	border: var(--border);
}
/* little hack for small screens to make sure you can press play */
@media screen and (max-width: 800px) {
	body {padding-bottom: 70px;}
}
#move-controls h3 {display: none;}
.move-controls_xy, .move-controls_rotate {
	display: grid;
	grid-template-rows: repeat(3, auto);
	grid-template-columns: repeat(3, 10vmin);
	margin: 3vmin;
}
.move-controls_xy button:nth-of-type(1),
.move-controls_rotate button:nth-of-type(1)
	{grid-area: 2 / 1 / 3 / 2;}
.move-controls_xy button:nth-of-type(2),
.move-controls_rotate button:nth-of-type(2)
	{grid-area: 1 / 2 / 2 / 3;}
.move-controls_xy button:nth-of-type(3),
.move-controls_rotate button:nth-of-type(3)
	{grid-area: 2 / 3 / 3 / 4;}
.move-controls_xy button:nth-of-type(4),
.move-controls_rotate button:nth-of-type(4)
	{grid-area: 3 / 2 / 4 / 3;}

.move-controls_z { display: grid; justify-items: center;}
.move-controls_z button:nth-of-type(1) {align-self: end;}
.move-controls_z button:nth-of-type(2) {align-self: start;}

#move-controls button {
	display: inline-block;
	margin: 0px; padding: 3vmin 4vmin;
	background-color: var(--green);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 70% 70%;
	border: var(--border); border-radius: var(--borderRad);
	cursor: pointer;
}
@media screen and (max-width: 800px) {
	#move-controls button {
		padding: 2vmin 3vmin;
	}
}

#move-controls button:hover {background-color: var(--lime);}
#move-controls button span {display:none;}

/* control icons */
#move-controls button[data-control="left"] {
	background-image: url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198.43 198.43"><path d="M187.297,67.908h-82.468V17.505c0-7.606-9.242-11.446-14.575-6.044L8.995,93.147c-3.34,3.341-3.34,8.674,0,12.016 l81.259,81.685c5.402,5.404,14.575,1.564,14.575-6.041v-50.334h82.468c4.691,0,8.53-3.839,8.53-8.531V76.44C195.827,71.747,191.988,67.908,187.297,67.908z"/></svg>');
}
#move-controls button[data-control="up"] {
	background-image: url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198.43 198.43"><path d="M132.405,185.293v-82.468h50.403c7.606,0,11.446-9.242,6.044-14.575L107.167,6.991c-3.341-3.34-8.674-3.34-12.016,0 L13.467,88.25c-5.404,5.402-1.564,14.575,6.041,14.575h50.334v82.468c0,4.691,3.839,8.53,8.531,8.53h45.501 C128.566,193.823,132.405,189.985,132.405,185.293z"/></svg>');
}
#move-controls button[data-control="right"] {
	background-image: url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198.43 198.43"><path d="M15.021,130.402h82.468v50.403c0,7.606,9.242,11.446,14.575,6.044l81.259-81.686c3.34-3.341,3.34-8.673,0-12.015 l-81.259-81.685c-5.402-5.404-14.575-1.564-14.575,6.041v50.334H15.021c-4.691,0-8.53,3.839-8.53,8.531v45.5 C6.491,126.563,10.33,130.402,15.021,130.402z"/></svg>');
}
#move-controls button[data-control="down"] {
	background-image: url('data:image/svg+xml; charset=utf8,<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198.43 198.43"><path d="M69.913,13.018v82.468H19.509c-7.606,0-11.446,9.241-6.043,14.574l81.685,81.259c3.341,3.34,8.673,3.34,12.015,0 l81.685-81.259c5.404-5.402,1.564-14.574-6.041-14.574h-50.334V13.018c0-4.691-3.839-8.53-8.531-8.53h-45.5 C73.752,4.488,69.913,8.326,69.913,13.018z"/></svg>');
}

#move-controls button[data-control="back"] {
	background-image: url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198.43 198.43"><path d="M142.706,182.798l-13.872-81.329l37.906-0.012c5.721-0.002,3.264-9.116-3.361-14.374l-53.61-80.126 c-0.319-3.294-0.823-3.294-1.402,0l-59.94,80.16c-7.087,5.331-10.219,14.378-4.5,14.377l37.855-0.012l-20.336,81.342 c-1.157,4.628,3.1,8.411,9.46,8.409l61.672-0.02C138.938,191.212,143.495,187.426,142.706,182.798z"/></svg>');
}
#move-controls button[data-control="forward"] {
	background-image: url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198.43 198.43"><path d="M90.711,12.843L74.096,93.626H28.482c-6.883,0-15.651,9.053-13.343,14.278l77.002,79.599 c4.844,3.271,12.844,3.271,17.784,0l79.272-79.599c2.421-5.293-6.051-14.278-12.933-14.278h-45.551l-14.347-80.783 c-0.815-4.596-2.861-8.356-4.545-8.356H95.492C93.808,4.487,91.656,8.247,90.711,12.843z"/></svg>');
}

#move-controls button[data-control="rotate-left"] {
	background-image: url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="3.101 111.617 190.645 83.712"><path d="M12.402,114.717h51.956c8.287,0,12.437,10.02,6.577,15.879l-16.18,16.181c12.116,11.345,27.84,17.563,44.521,17.549 c30.004-0.027,55.93-20.597,63.09-49.161c0.521-2.079,2.372-3.547,4.516-3.547h22.208c2.905,0,5.113,2.639,4.575,5.494 c-8.385,44.53-47.482,78.218-94.449,78.218c-25.752,0-49.139-10.129-66.395-26.619l-13.842,13.842 c-5.859,5.859-15.878,1.709-15.878-6.577v-51.956C3.101,118.882,7.265,114.717,12.402,114.717z"/></svg>');
}
#move-controls button[data-control="rotate-up"] {
	background-image: url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="56.567 58.151 83.712 190.644"><path d="M137.18,67.453v51.955c0,8.287-10.02,12.438-15.879,6.577l-16.182-16.181c-11.344,12.116-17.562,27.84-17.548,44.521 c0.027,30.004,20.597,55.93,49.161,63.09c2.078,0.521,3.547,2.372,3.547,4.516v22.208c0,2.905-2.639,5.113-5.494,4.575 c-44.53-8.385-78.218-47.482-78.218-94.449c0-25.752,10.129-49.139,26.619-66.394L69.345,74.029 c-5.859-5.859-1.709-15.878,6.577-15.878h51.955C133.014,58.151,137.18,62.315,137.18,67.453z"/></svg>');
}
#move-controls button[data-control="rotate-right"] {
	background-image: url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="3.101 111.617 190.645 83.712"><path d="M193.745,124.019v51.956c0,8.286-10.019,12.437-15.878,6.577l-13.842-13.842c-17.256,16.49-40.643,26.619-66.395,26.619 c-46.967,0-86.064-33.688-94.449-78.218c-0.538-2.855,1.67-5.494,4.575-5.494h22.208c2.144,0,3.995,1.468,4.516,3.547 c7.16,28.564,33.086,49.134,63.09,49.161c16.682,0.015,32.405-6.204,44.521-17.549l-16.181-16.181 c-5.86-5.859-1.71-15.879,6.577-15.879h51.955C189.581,114.717,193.745,118.882,193.745,124.019z"/></svg>');
}
#move-controls button[data-control="rotate-down"] {
	background-image: url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="56.567 58.151 83.712 190.645"><path d="M127.877,248.795H75.922c-8.286,0-12.437-10.02-6.577-15.879l13.842-13.842c-16.49-17.255-26.619-40.642-26.619-66.394 c0-46.967,33.688-86.064,78.218-94.449c2.855-0.538,5.494,1.67,5.494,4.575v22.208c0,2.144-1.469,3.995-3.547,4.516 c-28.564,7.16-49.134,33.086-49.161,63.09c-0.015,16.682,6.204,32.405,17.548,44.521l16.182-16.181 c5.859-5.86,15.879-1.71,15.879,6.577v51.954C137.18,244.631,133.014,248.795,127.877,248.795z"/></svg>');
}

JS

              
                console.clear();
// instigate our audio context ~~~~~~~~~~~~~~~ 1

// for cross browser way
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

const listener = audioCtx.listener;

// Let's set the position of our listener based on where our boombox is.
const posX = window.innerWidth/2;
const posY = window.innerHeight/2;
const posZ = 300;

if(listener.positionX) {
  listener.positionX.value = posX;
	listener.positionY.value = posY;
	listener.positionZ.value = posZ-5;
} else {
  listener.setPosition(posX, posY, posZ-5);
}

if(listener.forwardX) {
  listener.forwardX.value = 0;
	listener.forwardY.value = 0;
	listener.forwardZ.value = -1;
	listener.upX.value = 0;
	listener.upY.value = 1;
	listener.upZ.value = 0;
} else {
  listener.setOrientation(0, 0, -1, 0, 1, 0);
}

const pannerModel = 'HRTF';

const innerCone = 40;
const outerCone = 50;
const outerGain = 0.4;

const distanceModel = 'linear';

const maxDistance = 20000;

const refDistance = 1;

const rollOff = 10;

const positionX = posX;
const positionY = posY;
const positionZ = posZ;

const orientationX = 0.0;
const orientationY = 0.0;
const orientationZ = -1.0;

// let's use the class method for creating our panner node and pass in all those parameters we've set.

const panner = new PannerNode(audioCtx, {
	panningModel: pannerModel,
	distanceModel: distanceModel,
	positionX: positionX,
	positionY: positionY,
	positionZ: positionZ,
	orientationX: orientationX,
	orientationY: orientationY,
	orientationZ: orientationZ,
	refDistance: refDistance,
	maxDistance: maxDistance,
	rolloffFactor: rollOff,
	coneInnerAngle: innerCone,
	coneOuterAngle: outerCone,
	coneOuterGain: outerGain
})

const moveControls = document.querySelector('#move-controls').querySelectorAll('button');
const boombox = document.querySelector('.boombox-body');

// the transforms we can set
let transform = {
	xAxis: 0,
	yAxis: 0,
	zAxis: 0.8,
	rotateX: 0,
	rotateY: 0
}


// set up our bounds
const topBound = -posY;
const bottomBound = posY;
const rightBound = posX;
const leftBound = -posX;
const innerBound = 0.1;
const outerBound = 1.5;

// set up rotation constants
const rotationRate = 60; // bigger number slower sound rotation

const q = Math.PI/rotationRate; //rotation increment in radians

// get degrees for css
const degreesX = (q * 180)/Math.PI;
const degreesY = (q * 180)/Math.PI;

// function for setting the panner values and changing the styling
function moveBoombox(direction, prevMove) {
	switch (direction) {
		case 'left':
			if (transform.xAxis > leftBound) {
				transform.xAxis -= 5;
				panner.positionX.value -= 0.1;
			}
		break;
		case 'up':
			if (transform.yAxis > topBound) {
				transform.yAxis -= 5;
				panner.positionY.value -= 0.3;
			}
		break;
		case 'right':
			if (transform.xAxis < rightBound) {
				transform.xAxis += 5;
				panner.positionX.value += 0.1;
			}
		break;
		case 'down':
			if (transform.yAxis < bottomBound) {
				transform.yAxis += 5;
				panner.positionY.value += 0.3;
			}
		break;
		case 'back':
			if (transform.zAxis > innerBound) {
				transform.zAxis -= 0.01;
				panner.positionZ.value -= 20;
			}
		break;
		case 'forward':
			if (transform.zAxis < outerBound) {
				transform.zAxis += 0.01;
				panner.positionZ.value += 20;
			}
		break;
		case 'rotate-right':
			transform.rotateY += degreesY;
			console.log(transform.rotateY);
     	// 'left' is rotation about y-axis with negative angle increment
      z = panner.orientationZ.value*Math.cos(-q) - panner.orientationX.value*Math.sin(-q);
      x = panner.orientationZ.value*Math.sin(-q) + panner.orientationX.value*Math.cos(-q);
      y = panner.orientationY.value;

      panner.orientationX.value = x;
      panner.orientationY.value = y;
      panner.orientationZ.value = z;
		break;
		case 'rotate-left':
			transform.rotateY -= degreesY;
			// 'right' is rotation about y-axis with positive angle increment
      z = panner.orientationZ.value*Math.cos(q) - panner.orientationX.value*Math.sin(q);
      x = panner.orientationZ.value*Math.sin(q) + panner.orientationX.value*Math.cos(q);
      y = panner.orientationY.value;
      panner.orientationX.value = x;
      panner.orientationY.value = y;
      panner.orientationZ.value = z;
		break;
		case 'rotate-up':
		transform.rotateX += degreesX;
			// 'up' is rotation about x-axis with negative angle increment
      z = panner.orientationZ.value*Math.cos(-q) - panner.orientationY.value*Math.sin(-q);
      y = panner.orientationZ.value*Math.sin(-q) + panner.orientationY.value*Math.cos(-q);
      x = panner.orientationX.value;
      panner.orientationX.value = x;
      panner.orientationY.value = y;
      panner.orientationZ.value = z;
		break;
		case 'rotate-down':
			transform.rotateX -= degreesX;
			// 'down' is rotation about x-axis with positive angle increment
      z = panner.orientationZ.value*Math.cos(q) - panner.orientationY.value*Math.sin(q);
      y = panner.orientationZ.value*Math.sin(q) + panner.orientationY.value*Math.cos(q);
      x = panner.orientationX.value;
      panner.orientationX.value = x;
      panner.orientationY.value = y;
      panner.orientationZ.value = z;
		break;
	}

  boombox.style.transform = 'translateX('+transform.xAxis+'px) translateY('+transform.yAxis+'px) scale('+transform.zAxis+') rotateY('+transform.rotateY+'deg) rotateX('+transform.rotateX+'deg)';

  const move = prevMove || {};
  move.frameId = requestAnimationFrame(() => moveBoombox(direction, move));
	return move;
}


moveControls.forEach(function(el) {

	let moving;
	el.addEventListener('mousedown', function() {

		let direction = this.dataset.control;
		if (moving && moving.frameId) {
			window.cancelAnimationFrame(moving.frameId);
		}
		moving = moveBoombox(direction);

	}, false);

	window.addEventListener('mouseup', function() {
		if (moving && moving.frameId) {
			window.cancelAnimationFrame(moving.frameId);
		}
	}, false)

})



// BOOMBOX FUNCTIONALITY HERE ~~~~~~~~~~~~~~~~~~~~~~~~~~~ 2
const audioElement = document.querySelector('audio');
const track = audioCtx.createMediaElementSource(audioElement);

const playButton = document.querySelector('.tape-controls-play');

// play pause audio
playButton.addEventListener('click', function() {

	// check if context is in suspended state (autoplay policy)
	if (audioCtx.state === 'suspended') {
		audioCtx.resume();
	}

	if (this.dataset.playing === 'false') {
		audioElement.play();
		this.dataset.playing = 'true';
	// if track is playing pause it
	} else if (this.dataset.playing === 'true') {
		audioElement.pause();
		this.dataset.playing = 'false';
	}

	let state = this.getAttribute('aria-checked') === "true" ? true : false;
	this.setAttribute( 'aria-checked', state ? "false" : "true" );

}, false);

// if track ends - an event is fired once the track ends via the audio api. We can listen for this and set the correct params on the html element
audioElement.addEventListener('ended', () => {
	playButton.dataset.playing = 'false';
	playButton.setAttribute( "aria-checked", "false" );
}, false);

// volume ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 4
const gainNode = audioCtx.createGain();

const volumeControl = document.querySelector('[data-action="volume"]');
volumeControl.addEventListener('input', function() {
	gainNode.gain.value = this.value;
}, false);

const pannerOptions = {pan: 0};
const stereoPanner = new StereoPannerNode(audioCtx, pannerOptions);
const pannerControl = document.querySelector('[data-action="panner"]');
pannerControl.addEventListener('input', function() {
	stereoPanner.pan.value = this.value;
}, false);

track.connect(gainNode).connect(stereoPanner).connect(panner).connect(audioCtx.destination);

const powerButton = document.querySelector('.control-power');

powerButton.addEventListener('click', function() {
	if (this.dataset.power === 'on') {
		audioCtx.suspend();
		this.dataset.power = 'off';
	} else if (this.dataset.power === 'off') {
		audioCtx.resume();
		this.dataset.power = 'on';
	}
	this.setAttribute( "aria-checked", state ? "false" : "true" );
	console.log(audioCtx.state);
}, false);

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions