diff --git a/cmd/audio-player/index.html b/cmd/audio-player/index.html
index 0e9e272d..ac10d4a3 100644
--- a/cmd/audio-player/index.html
+++ b/cmd/audio-player/index.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 </head>
 
-<body style="height: 100%">
+<body style="height: 100%" onload="load();">
     <div class="card m-auto" style="width: 40rem;">
         <div class="card-body">
             <div class="container-fluid">
@@ -19,51 +19,7 @@
                 </div>
             </div>
             <div class="container-fluid">
-                <form enctype="multipart/form-data" onsubmit="presubmit();">
-                    <div class="form-group">
-                        <label>App key:</label>
-                        <input class="form-control form-control-sm" type="input" id="ak" name="ak">
-                    </div>
-                    <div class="form-group">
-                        <label>Media ID:</label>
-                        <input class="form-control form-control-sm" type="input" id="id" name="id">
-                    </div>
-                    <div class="form-group">
-                        <label>Start date or timestamp:</label>
-                        <div class="row">
-                            <div class="col">
-                                <input class="form-control form-control-sm" type="datetime-local" id="sd" name="sd" onchange="sync('sd', 'st', true);">
-                            </div>
-                            <div class="col">
-                                <input class="form-control form-control-sm" type="input" id="st" name="st" onchange="sync('sd', 'sd', false);">
-                            </div>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label>Finish date or timestamp:</label>
-                        <div class="row">
-                            <div class="col">
-                                <input class="form-control form-control-sm" type="datetime-local" id="fd" name="fd" onchange="sync('fd', 'ft', true);">
-                            </div>
-                            <div class="col">
-                                <input class="form-control form-control-sm" type="input" id="ft" name="ft" onchange="sync('fd', 'fd', false);">
-                            </div>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <input class="btn btn-primary" type="submit" value="Get Audio" id="submit">
-                    </div>
-                    <div class="form-group">
-                        <input type="hidden" id="ts">
-                    </div>
-                </form>
-                <span class="form-inline mb-3">
-                    <label>MAC:</label>
-                    <input type="input" class="form-control form-control-sm mx-sm-3" id="ma" placeholder="00:00:00:00:00:00">
-                    <label>Pin:</label>
-                    <input type="input" class="form-control form-control-sm mx-sm-3" id="pn" value="V0" style="width: 3rem">
-                    <button class="btn-sm btn-secondary" onClick="updateMID('ma','pn','id');">Convert to Media ID</button>
-                </span>
+                URL: <input type="text" id="url" class="url mb-3 mx-3" onchange="load();"><button onclick="load();">Load</button>
                 <div class="container-fluid">
                     <audio class="mx-auto" controls="controls" id="audio">
                         Your browser does not support the <code>audio</code> element.
diff --git a/cmd/audio-player/main.js b/cmd/audio-player/main.js
index 7a698268..5044a75d 100644
--- a/cmd/audio-player/main.js
+++ b/cmd/audio-player/main.js
@@ -58,88 +58,86 @@ function processData() {
 
 }
 
-function sync(dateID, tsID, dateChanged) {
-	if (dateChanged) { // Go from date to Unix timestamp.
-		var s = document.getElementById(dateID).value;
-		if (s == "") {
-			document.getElementById(tsID).value = "";
-		} else {
-			if (s.length == 16) {
-				s += ':00'; // Append seconds.
-			}
-			s += 'Z';
-			var dt = new Date(s)
-			document.getElementById(tsID).value = (dt.getTime() / 1000).toString();
-		}
-	} else { // Go from Unix timestamp to local date.
-		var s = document.getElementById(dateID).value;
-		if (s == "") {
-			document.getElementById(tsID).value = "";
-		} else {
-			var ts = parseInt(document.getElementById(tsID).value) * 1000;
-			var dt = new Date(ts).toISOString().slice(0, -1);
-			document.getElementById(dateID).value = dt;
-		}
-	}
-}
-
-function presubmit() {
-	if (document.getElementById('st').value == "" && document.getElementById('sd').value != "") {
-		sync('sd', 'st', true);
-	}
-	if (document.getElementById('ft').value == "" && document.getElementById('fd').value != "") {
-		sync('fd', 'ft', true);
-	}
-	if (document.getElementById('ft').value == "") {
-		document.getElementById('ts').value = document.getElementById('st').value;
+// getQuery gets everything after the question mark in the URL.
+function getQuery() {
+	var regex = new RegExp("\\?(.*)");
+	var match = regex.exec(window.location.href);
+	if (match == null) {
+		return '';
 	} else {
-		document.getElementById('ts').value = document.getElementById('st').value + '-' + document
-			.getElementById('ft').value;
+		return decodeURIComponent(match[1].replace(/\+/g, " "));
 	}
 }
 
-// encodeMAC encodes a MAC address into a 48-bit integer.
-function encodeMAC(mac) {
-	if (mac.length != 17) {
-		return 0;
+function load() {
+	var url = document.getElementById('url').value;
+	if (url == "") {
+		url = getQuery()
+		document.getElementById('url').value = url;
 	}
-	var enc = BigInt(0);
-	for (i = 15, shift = 0; i >= 0; i -= 3, shift += 8) {
-		var n = BigInt(parseInt(mac.substring(i, i + 2), 16));
-		enc += (n << BigInt(shift));
+	if (url[0] == '/') {
+		url = window.location.protocol + '//' + window.location.host + url;
 	}
-	return enc;
-}
-
-// encodePin encodes a pin into a 4-bit integer.
-function encodePin(pin) {
-	var enc = Number(0);
-	if (pin.charAt(0) == 'S') {
-		enc = 8;
-	}
-	var pn = Number(pin.charAt(1) - '0');
-	if (pin.length > 2) {
-		pn = pn * 10 + Number(pin.CharAt(2) - '0');
-	}
-	enc |= pn;
-	return enc;
-}
-
-// toMID returns a Media ID as a BigInt given a MAC address and a pin.
-function toMID(mac, pin) {
-	if (mac == "" || pin == "") {
-		return 0;
-	}
-	return (encodeMAC(mac) << BigInt(4)) | BigInt(encodePin(pin))
-}
-
-// updateMID updates a Media ID element using values from MAC and pin elements.
-function updateMID(mac, pin, mid) {
-	var macElem = document.getElementById(mac);
-	var pinElem = document.getElementById(pin);
-	var midElem = document.getElementById(mid);
-	if (!macElem || !pinElem || !midElem) {
+	if (url == "") {
 		return;
 	}
-	midElem.value = toMID(macElem.value, pinElem.value).toString();
+	var video = document.getElementById('video');
+
+	if (Hls.isSupported()) {
+		console.log("play: browser can play HLS.")
+		var hls = new Hls({
+			autoStartLoad: true,
+			debug: true,
+			startFragPrefetch: true
+		});
+		hls.loadSource(url);
+		hls.attachMedia(video);
+
+		hls.on(Hls.Events.ERROR, function (event, data) {
+			if (data.fatal) {
+				switch (data.type) {
+					case Hls.ErrorTypes.NETWORK_ERROR:
+						console.log("play: fatal network error encountered, trying to recover.");
+						hls.startLoad();
+						break;
+					case Hls.ErrorTypes.MEDIA_ERROR:
+						console.log("play: fatal media error encountered, trying to recover.");
+						hls.recoverMediaError();
+						break;
+					default:
+						console.log("play: fatal error, cannot recover.");
+						hls.destroy();
+						break;
+				}
+			} else {
+				console.log("play: " + data.type + "error, " + data.details);
+			}
+		});
+
+		hls.on(Hls.Events.MANIFEST_PARSED, function () {
+			playPromise = video.play();
+			if (playPromise !== undefined) {
+				playPromise.then(_ => {
+					console.log("play: autoplay started.")
+					document.getElementById('msg').innerHTML = "";
+				}).catch(error => {
+					console.log("play: autoplay was prevented.")
+					document.getElementById('msg').innerHTML = "Autoplay prevented. Hit play button to start."
+					// Remove the message once playing starts.
+					video.addEventListener('playing', function (e) {
+						document.getElementById('msg').innerHTML = "";
+					});
+				});
+			}
+		});
+
+	} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+		console.log("play: browser can handle vnd.apple.mpegurl.")
+		video.src = url;
+		video.addEventListener('loadedmetadata', function () {
+			video.play();
+		});
+	} else {
+		console.log("play: HLS not supported by browser.")
+	}
 }
\ No newline at end of file
