diff --git a/src/components/BeaconController.vue b/src/components/BeaconController.vue
index 64409c0..e8d91f5 100644
--- a/src/components/BeaconController.vue
+++ b/src/components/BeaconController.vue
@@ -1,5 +1,5 @@
 <template>
-  <p v-if="beacon.name">
+  <p v-if="beacon.location">
     <button
       id="toggleBeacon"
       class="beacon-button"
@@ -8,7 +8,7 @@
     >
       {{ beacon.enabled ? '⏸' : '▶' }}
     </button>
-    <span id="currentBeacon">{{ beacon.name }}</span>
+    <span id="currentBeacon">{{ beacon.location.name }}</span>
     <button
       class="beacon-button"
       id="clearBeacon"
@@ -21,7 +21,7 @@
 </template>
 
 <script setup>
-import { beacon } from '../state/beacon.js';
+import { beacon } from '../state/beacon';
 
 const toggleBeacon = () => {
   if (beacon.enabled) {
diff --git a/src/components/CalloutList.vue b/src/components/CalloutList.vue
index 40d5478..af57b2f 100644
--- a/src/components/CalloutList.vue
+++ b/src/components/CalloutList.vue
@@ -28,18 +28,18 @@
 
 <script setup>
 import BeaconController from './BeaconController.vue'
-import { beacon } from '../state/beacon.js';
+import { beacon } from '../state/beacon';
 
 const props = defineProps({
   callouts: Array,
 })
 
 const startBeacon = (e) => {
-  beacon.set(
-    e.target.getAttribute("data-name"),
-    e.target.getAttribute('data-latitude'),
-    e.target.getAttribute('data-longitude')
-  );
+  beacon.set({
+    name: e.target.getAttribute("data-name"),
+    latitude: e.target.getAttribute('data-latitude'),
+    longitude: e.target.getAttribute('data-longitude')
+  });
   beacon.start();
 };
 </script>
diff --git a/src/components/WelcomeScreen.vue b/src/components/WelcomeScreen.vue
index ea80296..7a9e999 100644
--- a/src/components/WelcomeScreen.vue
+++ b/src/components/WelcomeScreen.vue
@@ -11,7 +11,7 @@
 </template>
   
 <script setup>
-import { beacon } from '../state/beacon.js';
+import { beacon } from '../state/beacon';
 import { useDeviceOrientation } from "../composables/compass.js";
 import { myLocation } from '../state/location';
 import { initializeAudioQueue, playSpatialSpeech } from '../state/audio';
diff --git a/src/state/audio.ts b/src/state/audio.ts
index 48d4a0a..1a5d260 100644
--- a/src/state/audio.ts
+++ b/src/state/audio.ts
@@ -252,9 +252,10 @@ export function createSpatialPlayer(): SpatialPlayer {
 // Create a WebAudio panner with the settings that will be used by both
 // beacons and callouts.
 // https://developer.mozilla.org/en-US/docs/Web/API/PannerNode
-export function createPanner(audioContext: AudioContext): PannerNode & {
+export type PannerNodeWithCoordinates = PannerNode & {
   setCoordinates: (x: number, y: number) => void;
-} {
+}
+export function createPanner(audioContext: AudioContext): PannerNodeWithCoordinates {
   const panner = audioContext.createPanner();
   panner.panningModel = "HRTF";
   // Keep a constant volume regardless of distance from source.
diff --git a/src/state/beacon.js b/src/state/beacon.js
deleted file mode 100644
index 15e9b39..0000000
--- a/src/state/beacon.js
+++ /dev/null
@@ -1,162 +0,0 @@
-// Copyright (c) Daniel W. Steinbrook.
-// with many thanks to ChatGPT
-
-import Classic_OnAxis_wav from "/assets/sounds/beacons/Classic/Classic_OnAxis.wav";
-import Classic_OffAxis_wav from "/assets/sounds/beacons/Classic/Classic_OffAxis.wav";
-import sense_mobility_wav from "/assets/sounds/sense_mobility.wav";
-import SS_beaconFound2_48k_wav from "/assets/sounds/SS_beaconFound2_48k.wav";
-
-import { point } from '@turf/helpers';
-import { computed, reactive, watch } from 'vue';
-import { distanceTo, normalizedRelativePositionTo } from '../state/location';
-import { audioQueue, createPanner } from '../state/audio';
-
-const onCourseAngle = 30; // degrees +/- Y axis
-const foundProximityMeters = 10; // proximity to auto-stop beacon
-const announceEveryMeters = 50;
-
-/*
-For smooth transitions between "on" and "off" beacons, we keep two audio
-sources constantly looping, and selectively mute one or the other. On iOS
-Safari, we can't directly set the volume of an audio element, so we use
-gain nodes instead. A panner node is used to create spatial audio.
-
-The resulting audio graph looks something like this:
-
-  source -> gain -> panner <- gain <- source
-                      |
-                      V
-                    output
-*/
-export const beacon = reactive({
-  name: null,
-  latitude: null,
-  longitude: null,
-  lastAnnouncedDistance: null,
-  enabled: false,
-
-  // In some browsers, audio initialization needs to be triggerred by a user action
-  initialize() {
-    this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
-    this.panner = createPanner(this.audioContext);
-
-    this.onCourseAudio = new Audio(Classic_OnAxis_wav);
-    this.offCourseAudio = new Audio(Classic_OffAxis_wav);
-    this.onCourseAudio.loop = true;
-    this.offCourseAudio.loop = true;
-
-    this.onCourseGain = this.audioContext.createGain();
-    this.offCourseGain = this.audioContext.createGain();
-
-    this.audioContext
-        .createMediaElementSource(this.onCourseAudio)
-        .connect(this.onCourseGain);
-    this.audioContext
-        .createMediaElementSource(this.offCourseAudio)
-        .connect(this.offCourseGain);
-
-    this.onCourseGain.connect(this.panner);
-    this.offCourseGain.connect(this.panner);
-    this.panner.connect(this.audioContext.destination);
-  },
-
-  set(name, latitude, longitude) {
-    this.name = name;
-    this.latitude = latitude;
-    this.longitude = longitude;
-    this.lastAnnouncedDistance = null;
-  },
-
-  clear() { this.set(null, null, null); },
-
-  start() {
-    this.enabled = true;
-    looper.start();
-  },
-
-  stop() {
-    this.enabled = false;
-    looper.stop();
-  },
-});
-
-// Turf.js point of the beacon's location
-const sourceLocation = computed(
-  () => beacon.enabled ? point([beacon.longitude, beacon.latitude]) : null
-);
-
-// Distance we are currently from the beacon
-const distanceMeters = computed(
-  () => beacon.enabled ? distanceTo.value(sourceLocation.value, { units: "meters", }) : null
-);
-
-// Beacon's X/Y coordinates relative to us (standing at the origin, looking up Y axis)
-const relativePosition = computed(
-  () => beacon.enabled ? normalizedRelativePositionTo.value(sourceLocation.value) : null
-);
-
-// Set the beacon sound effect spatial position.
-watch(relativePosition, (newValue, oldVAlue) => {
-  beacon.enabled ? beacon.panner.setCoordinates(newValue.x, newValue.y) : null;
-});
-
-// True if we are roughly facing the beacon, +/- onCourseAngle
-const isOnCourse = computed(() => {
-  if (!beacon.enabled) return false;
-  const angle = Math.atan2(
-    relativePosition.value.x,
-    relativePosition.value.y
-  ) * 180 / Math.PI;
-  return (Math.abs(angle) < onCourseAngle);
-});
-
-// Loop beacon audio, which changes based on how on-/off-course we are.
-const looper = {
-  intervalId: null,
-  async start() {
-    // Resume the audio context (especially needed for Safari)
-    if (beacon.audioContext.state === 'suspended') {
-      await beacon.audioContext.resume();
-    }
-    beacon.onCourseAudio.play();
-    beacon.offCourseAudio.play()
-    // Switch between on/off-course effects no more than once per second
-    this.intervalId = setInterval(() => {
-      if (isOnCourse.value) {
-        beacon.onCourseGain.gain.setValueAtTime(1, beacon.audioContext.currentTime);
-        beacon.offCourseGain.gain.setValueAtTime(0, beacon.audioContext.currentTime);
-      } else {
-        beacon.onCourseGain.gain.setValueAtTime(0, beacon.audioContext.currentTime);
-        beacon.offCourseGain.gain.setValueAtTime(1, beacon.audioContext.currentTime);
-      }
-    }, 1000);
-  },
-  stop() {
-    clearInterval(this.intervalId);
-    beacon.onCourseAudio.pause();
-    beacon.offCourseAudio.pause();
-  },
-};
-
-// Announce the beacon distance  periodically
-watch(distanceMeters, (newValue, oldValue) => {
-  if (!beacon.enabled) {
-    return;
-  } else if(newValue < foundProximityMeters) {
-    // Stop the beacon when we're within the threshold.
-    beacon.stop();
-    new Audio(SS_beaconFound2_48k_wav).play();
-  } else if (
-    Math.abs(beacon.lastAnnouncedDistance - newValue) > announceEveryMeters
-  ) {
-    // We're closer/further by some threshold -- announce distance
-    // Only announce if not actively playing something else (distance would be stale if queued)
-    if (!audioQueue.isPlaying) {
-      beacon.lastAnnouncedDistance = distanceMeters.value;
-      audioQueue.addToQueue({ soundUrl: sense_mobility_wav });
-      audioQueue.addToQueue({
-        text: `Beacon: ${distanceMeters.value.toFixed(0)} meters`,
-      });
-    }
-  }
-});
\ No newline at end of file
diff --git a/src/state/beacon.ts b/src/state/beacon.ts
new file mode 100644
index 0000000..61c8173
--- /dev/null
+++ b/src/state/beacon.ts
@@ -0,0 +1,228 @@
+// Copyright (c) Daniel W. Steinbrook.
+// with many thanks to ChatGPT
+
+import { point } from '@turf/turf';
+import { computed, reactive, watch } from 'vue';
+import { distanceTo, normalizedRelativePositionTo } from '../state/location';
+import { audioQueue, createPanner, PannerNodeWithCoordinates } from '../state/audio';
+
+const Classic_OnAxis_wav = new URL("/assets/sounds/beacons/Classic/Classic_OnAxis.wav", import.meta.url).href;
+const Classic_OffAxis_wav = new URL("/assets/sounds/beacons/Classic/Classic_OffAxis.wav", import.meta.url).href;
+const sense_mobility_wav = new URL("/assets/sounds/sense_mobility.wav", import.meta.url).href;
+const SS_beaconFound2_48k_wav = new URL("/assets/sounds/SS_beaconFound2_48k.wav", import.meta.url).href;
+
+const onCourseAngle = 30; // degrees +/- Y axis
+const foundProximityMeters = 10; // proximity to auto-stop beacon
+const announceEveryMeters = 50;
+
+/*
+For smooth transitions between "on" and "off" beacons, we keep two audio
+sources constantly looping, and selectively mute one or the other. On iOS
+Safari, we can't directly set the volume of an audio element, so we use
+gain nodes instead. A panner node is used to create spatial audio.
+
+The resulting audio graph looks something like this:
+
+  source -> gain -> panner <- gain <- source
+                      |
+                      V
+                    output
+*/
+class BeaconAudio {
+  audioContext: AudioContext;
+  panner: PannerNodeWithCoordinates;
+  onCourseAudio: HTMLAudioElement;
+  offCourseAudio: HTMLAudioElement;
+  onCourseGain: GainNode;
+  offCourseGain: GainNode;
+
+  // In some browsers, audio initialization needs to be triggerred by a user action
+  constructor() {
+    if ('AudioContext' in window) {
+      this.audioContext = new AudioContext();
+    } else if ('webkitAudioContext' in window) {
+      this.audioContext = new (window as any).webkitAudioContext();
+    } else {
+      throw new Error('AudioContext is not supported in this browser.');
+    }
+
+    this.panner = createPanner(this.audioContext);
+
+    this.onCourseAudio = new Audio(Classic_OnAxis_wav);
+    this.offCourseAudio = new Audio(Classic_OffAxis_wav);
+    this.onCourseAudio.loop = true;
+    this.offCourseAudio.loop = true;
+
+    this.onCourseGain = this.audioContext.createGain();
+    this.offCourseGain = this.audioContext.createGain();
+
+    this.audioContext
+        .createMediaElementSource(this.onCourseAudio)
+        .connect(this.onCourseGain);
+    this.audioContext
+        .createMediaElementSource(this.offCourseAudio)
+        .connect(this.offCourseGain);
+
+    this.onCourseGain.connect(this.panner);
+    this.offCourseGain.connect(this.panner);
+    this.panner.connect(this.audioContext.destination);
+  }
+}
+
+interface BeaconLocation {
+  name: string;
+  latitude: number;
+  longitude: number;
+}
+
+interface BeaconState {
+  audio: BeaconAudio | undefined;
+  location: BeaconLocation | null;
+  lastAnnouncedDistance: number | null;
+  enabled: boolean;
+
+  initialize: () => void;
+  getAudio: () => BeaconAudio;
+  set: (location: BeaconLocation) => void;
+  clear: () => void;
+  start: () => void;
+  stop: () => void;
+}
+export const beacon = reactive<BeaconState>({
+  location: null,
+  lastAnnouncedDistance: null,
+  enabled: false,
+  audio: undefined,
+
+  // Ensures we only initialize audio once
+  initialize() {
+    if (this.audio === undefined) {
+      this.audio = new BeaconAudio();
+    }
+  },
+
+  // Ensures that we don't try any beacon actions before audio initialization
+  getAudio(): BeaconAudio {
+    if (this.audio === undefined) {
+      throw new Error("Beacon audio uninitialized");
+    }
+    return this.audio;
+  },
+
+  set(location: BeaconLocation) {
+    this.location = location;
+    this.lastAnnouncedDistance = null;
+  },
+
+  clear() { this.location = null; },
+
+  start() {
+    this.enabled = true;
+    looper.start();
+  },
+
+  stop() {
+    this.enabled = false;
+    looper.stop();
+  },
+});
+
+// Turf.js point of the beacon's location
+const sourceLocation = computed(() => {
+  if (beacon.enabled && beacon.location) {
+    return point([beacon.location.longitude, beacon.location.latitude]);
+  }
+});
+
+// Distance we are currently from the beacon
+const distanceMeters = computed(() => {
+  if (sourceLocation.value) {
+    return distanceTo.value(sourceLocation.value, { units: "meters", });
+  }
+});
+
+// Beacon's X/Y coordinates relative to us (standing at the origin, looking up Y axis)
+const relativePosition = computed(() => {
+  if (sourceLocation.value) {
+    return normalizedRelativePositionTo.value(sourceLocation.value);
+  }
+});
+
+// Set the beacon sound effect spatial position.
+watch(relativePosition, (newValue, oldVAlue) => {
+  if (beacon.enabled && newValue !== undefined) {
+    beacon.getAudio().panner.setCoordinates(newValue.x, newValue.y);
+  }
+});
+
+// True if we are roughly facing the beacon, +/- onCourseAngle
+const isOnCourse = computed(() => {
+  if (beacon.enabled && relativePosition.value) {
+    const angle = Math.atan2(
+      relativePosition.value.x,
+      relativePosition.value.y
+    ) * 180 / Math.PI;
+    return (Math.abs(angle) < onCourseAngle);
+  } else {
+    return false;
+  }
+});
+
+// Loop beacon audio, which changes based on how on-/off-course we are.
+interface Looper {
+  intervalId: number | undefined;
+  start: () => void;
+  stop: () => void;
+}
+const looper: Looper = {
+  intervalId: undefined,
+  async start() {
+    let audio = beacon.getAudio();
+    // Resume the audio context (especially needed for Safari)
+    if (audio.audioContext.state === 'suspended') {
+      await audio.audioContext.resume();
+    }
+    audio.onCourseAudio.play();
+    audio.offCourseAudio.play()
+    // Switch between on/off-course effects no more than once per second
+    this.intervalId = window.setInterval(() => {
+      if (isOnCourse.value) {
+        audio.onCourseGain.gain.setValueAtTime(1, audio.audioContext.currentTime);
+        audio.offCourseGain.gain.setValueAtTime(0, audio.audioContext.currentTime);
+      } else {
+        audio.onCourseGain.gain.setValueAtTime(0, audio.audioContext.currentTime);
+        audio.offCourseGain.gain.setValueAtTime(1, audio.audioContext.currentTime);
+      }
+    }, 1000);
+  },
+  stop() {
+    let audio = beacon.getAudio();
+    window.clearInterval(this.intervalId);
+    audio.onCourseAudio.pause();
+    audio.offCourseAudio.pause();
+  },
+};
+
+// Announce the beacon distance  periodically
+watch(distanceMeters, (newValue, oldValue) => {
+  if (!beacon.enabled || typeof newValue !== "number") {
+    return;
+  } else if(newValue < foundProximityMeters) {
+    // Stop the beacon when we're within the threshold.
+    beacon.stop();
+    new Audio(SS_beaconFound2_48k_wav).play();
+  } else if (
+    beacon.lastAnnouncedDistance === null ||
+    Math.abs(beacon.lastAnnouncedDistance - newValue) > announceEveryMeters
+  ) {
+    // We're closer/further by some threshold -- announce distance
+    // Only announce if not actively playing something else (distance would be stale if queued)
+    if (!audioQueue.isPlaying) {
+      beacon.lastAnnouncedDistance = newValue;
+      audioQueue.addToQueue({ soundUrl: sense_mobility_wav });
+      audioQueue.addToQueue({
+        text: `Beacon: ${newValue.toFixed(0)} meters`,
+      });
+    }
+  }
+});
\ No newline at end of file
diff --git a/src/views/DetailView.vue b/src/views/DetailView.vue
index ebd569d..b150785 100644
--- a/src/views/DetailView.vue
+++ b/src/views/DetailView.vue
@@ -29,7 +29,7 @@
 <script setup>
 import MapDisplay from '../components/MapDisplay.vue';
 import SubpageTopbar from '../components/SubpageTopbar.vue';
-import { beacon } from '../state/beacon.js';
+import { beacon } from '../state/beacon';
 import { myLocation, distanceTo } from '../state/location'
 import { point } from '@turf/helpers';
 import { computed, onMounted, reactive, ref } from 'vue';
diff --git a/src/views/GPXView.vue b/src/views/GPXView.vue
index a0ed3d4..2d8482d 100644
--- a/src/views/GPXView.vue
+++ b/src/views/GPXView.vue
@@ -58,7 +58,7 @@ import InputSpinner from '../components/InputSpinner.vue';
 import MapDisplay from '../components/MapDisplay.vue';
 import useAnnouncer from '../composables/announcer.js';
 import useGPX from '../composables/gpx.js';
-import { beacon } from '../state/beacon.js';
+import { beacon } from '../state/beacon';
 import cache from '../state/cache';
 import { myLocation } from '../state/location';
 import { audioQueue, recentCallouts } from '../state/audio';
diff --git a/src/views/MainView.vue b/src/views/MainView.vue
index 90f1bfd..cdf17b5 100644
--- a/src/views/MainView.vue
+++ b/src/views/MainView.vue
@@ -30,7 +30,7 @@ import InputSpinner from '../components/InputSpinner.vue';
 import MainModeSelector from '../components/MainModeSelector.vue';
 import MapDisplay from '../components/MapDisplay.vue';
 import VoiceSelector from '../components/VoiceSelector.vue';
-import { beacon } from '../state/beacon.js';
+import { beacon } from '../state/beacon';
 import { myLocation } from '../state/location';
 import { audioQueue, recentCallouts } from '../state/audio';
 import { onMounted, ref } from 'vue';
diff --git a/vite.config.ts b/vite.config.ts
index fe2421c..6ee657e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -47,6 +47,7 @@ export default defineConfig({
       '@vendor': 'src/vendor'
     }
   },
+  assetsInclude: ['**/*.wav'],
   base: './',
   build: {
     outDir: './dist',