diff --git a/core/basepage.php b/core/basepage.php
index 76696c65..3b972af7 100644
--- a/core/basepage.php
+++ b/core/basepage.php
@@ -383,8 +383,6 @@ class BasePage
         $data_href = get_base_href();
         $theme_name = $config->get_string(SetupConfig::THEME, 'default');
 
-        $this->add_html_header("<script type='text/javascript'>base_href = '$data_href';</script>", 40);
-
         # static handler will map these to themes/foo/static/bar.ico or ext/static_files/static/bar.ico
         $this->add_html_header("<link rel='icon' type='image/x-icon' href='$data_href/favicon.ico'>", 41);
         $this->add_html_header("<link rel='apple-touch-icon' href='$data_href/apple-touch-icon.png'>", 42);
@@ -558,6 +556,7 @@ class BasePage
 
         $body_attrs = [
             "data-userclass" => $user->class->name,
+            "data-base-href" => get_base_href(),
         ];
 
         print emptyHTML(
diff --git a/ext/autocomplete/script.js b/ext/autocomplete/script.js
index 55211167..24eb0d6a 100644
--- a/ext/autocomplete/script.js
+++ b/ext/autocomplete/script.js
@@ -42,7 +42,7 @@ function updateCompletions(element) {
 	}
 	else {
 		element.completer_timeout = setTimeout(() => {
-			fetch(base_href + '/api/internal/autocomplete?s=' + word).then(
+			fetch(document.body.getAttribute("data-base-href") + '/api/internal/autocomplete?s=' + word).then(
 				(response) => response.json()
 			).then((json) => {
 				if(element.selected_completion !== -1) {
diff --git a/ext/handle_mp3/script.js b/ext/handle_mp3/script.js
new file mode 100644
index 00000000..b3a214a9
--- /dev/null
+++ b/ext/handle_mp3/script.js
@@ -0,0 +1,30 @@
+document.addEventListener("DOMContentLoaded", () => {
+  let main_image = document.getElementById("main_image");
+  if (main_image) {
+    main_image.setAttribute("volume", 0.25);
+  }
+
+  let base_href = document.body.getAttribute("data-base-href");
+  let audio_src = document.getElementById("audio_src");
+  if (audio_src) {
+    let ilink = audio_src.getAttribute("src");
+    window.jsmediatags.read(location.origin + base_href + ilink, {
+      onSuccess: function (tag) {
+        var artist = tag.tags.artist,
+          title = tag.tags.title;
+
+        document.getElementById("audio-title").innerText = title;
+        document.getElementById("audio-artist").innerText = artist;
+        document
+          .getElementById("audio-download")
+          .setAttribute(
+            "download",
+            (artist + " - " + title).substring(0, 250) + ".mp3",
+          );
+      },
+      onError: function (error) {
+        console.log(error);
+      },
+    });
+  }
+});
diff --git a/ext/handle_mp3/theme.php b/ext/handle_mp3/theme.php
index b7702919..ea94094c 100644
--- a/ext/handle_mp3/theme.php
+++ b/ext/handle_mp3/theme.php
@@ -13,31 +13,11 @@ class MP3FileHandlerTheme extends Themelet
         $ilink = $image->get_image_link();
         $html = "
 			<audio controls class='shm-main-image audio_image' id='main_image' alt='main image'>
-				<source src=\"$ilink\" type=\"audio/mpeg\">
+				<source id='audio_src' src=\"$ilink\" type=\"audio/mpeg\">
 				Your browser does not support the audio element.
 			</audio>
 			<p>Title: <span id='audio-title'>???</span> | Artist: <span id='audio-artist'>???</span></p>
 
-			<script>
-				$('#main_image').prop('volume', 0.25);
-
-				var jsmediatags = window.jsmediatags;
-				jsmediatags.read(location.origin+base_href+'$ilink', {
-					onSuccess: function(tag) {
-						var artist = tag.tags.artist,
-						    title  = tag.tags.title;
-
-						$('#audio-title').text(title);
-						$('#audio-artist').text(artist);
-
-						$('#audio-download').prop('download', (artist+' - '+title).substr(0, 250)+'.mp3');
-					},
-					onError: function(error) {
-						console.log(error);
-					}
-				});
-			</script>
-
 			<p><a href='$ilink' id='audio-download'>Download</a>";
 
         $page->add_html_header("<script src='{$data_href}/ext/handle_mp3/lib/jsmediatags.min.js' type='text/javascript'></script>");