diff --git a/_includes/mplayer.html b/_includes/mplayer.html
new file mode 100644
index 0000000..72fb157
--- /dev/null
+++ b/_includes/mplayer.html
@@ -0,0 +1,19 @@
+<div id="player">
+	<span id="player-text"></span>
+	<a href="javascript:void(0)" onClick="stopPlayer()">stop</a>
+	<a href="javascript:void(0)" onClick="MIDIjs.play('/assets/mid/canyon.mid')">play</a>
+</div>
+
+<script>
+	var duration = 0;
+	function updatePlayerStatus(msg) {
+		document.getElementById("player-text").innerHTML = msg;
+	}
+	function stopPlayer() {
+		MIDIjs.stop();
+		document.getElementById("player-text").innerHTML = "";
+	}
+
+	MIDIjs.message_callback = updatePlayerStatus;
+</script>
+
diff --git a/_layouts/default.html b/_layouts/default.html
index 9d76c1d..706984b 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -8,6 +8,7 @@ navbar: topnav
 		<title>{{ page.title }}</title>
 		<link rel="stylesheet" href="/assets/css/styles.css">
 		<link rel="stylesheet" href="https://webcomicring.org/js/comicring.css">
+		<script type='text/javascript' src='//midijs.net/lib/midi.js'></script>
 	</head>
 	<body>
 		<img src="/assets/images/crt1.png" class="overlay">
@@ -17,6 +18,7 @@ navbar: topnav
 		<script data-goatcounter="https://slimepondcount.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
 
 		{% include background.html %}
+		{% include mplayer.html %}
 		<div class="vcol">
 			<div class="columns">
 				<div class="left-sidebar">
diff --git a/_sass/main.scss b/_sass/main.scss
index db012c6..d357061 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -75,3 +75,24 @@ img {
 	background-color: white;
 	justify-content: center;
 }
+
+#player {
+	display: flex;
+	justify-content: flex-end;
+	position: fixed;
+	bottom: 15vh; left: 4vw;
+	padding: 10px;
+	gap: 10px;
+	width: 25vw;
+	background-color: black;
+	color: white;
+
+	transform: rotate(3deg);
+	z-index: 5;
+}
+
+#player * {
+	color: white;
+	text-decoration: none;
+}
+
