diff --git a/src/assets/sfx/tone.ogg b/src/assets/sfx/tone.ogg
new file mode 100755
index 0000000000000000000000000000000000000000..c1d5d5f765d600523a9cd920f08c26ab92489ae3
Binary files /dev/null and b/src/assets/sfx/tone.ogg differ
diff --git a/src/assets/sfx/tone.wav b/src/assets/sfx/tone.wav
deleted file mode 100755
index 7fbc54cbe196e91342d24f26db9d1bea5b98c130..0000000000000000000000000000000000000000
Binary files a/src/assets/sfx/tone.wav and /dev/null differ
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index ac4dfebe226ff5a05de3dd832d7e641f5c2e323e..a05ad4d837ebbac82bddbac5b6ad3c724a353d00 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -5,6 +5,7 @@ import { VR_DEVICE_AVAILABILITY } from "../utils/vr-caps-detect.js";
 const ENTRY_STEPS = {
   start: "start",
   mic_grant: "mic_grant",
+  mic_granted: "mic_granted",
   audio_setup: "audio_setup",
   finished: "finished"
 }
@@ -79,7 +80,45 @@ class UIRoot extends Component {
     tonePlaying: false
   }
 
+  componentDidMount() {
+    console.log("HI");
+    this.setupTestTone();
+  }
+
+  setupTestTone = () => { 
+    const toneClip = document.querySelector("#test-tone");
+    const toneLength = 1800;
+    const toneDelay = 5000;
+
+    const toneIndicatorLoop = () => {
+      this.setState({ tonePlaying: false });
+
+      setTimeout(() => {
+        this.setState({ tonePlaying: true });
+        setTimeout(() => { this.setState({ tonePlaying: false }); }, toneLength)
+      }, toneDelay);
+    };
+
+    toneClip.addEventListener("seeked", toneIndicatorLoop);
+    toneClip.addEventListener("playing", toneIndicatorLoop);
+  }
+
+  startTestTone = () => {
+    const toneClip = document.querySelector("#test-tone");
+    toneClip.play();
+  }
+
+  stopTestTone = () => {
+    const toneClip = document.querySelector("#test-tone")
+    toneClip.pause();
+    toneClip.currentTime = 0;
+
+    this.setState({ tonePlaying: false })
+  }
+
   performDirectEntryFlow = async (enterInVR) => {
+    this.startTestTone();
+
     this.setState({ enterInVR })
 
     const hasGrantedMic = await hasGrantedMicPermissions();
@@ -88,6 +127,7 @@ class UIRoot extends Component {
       await this.setMediaStreamToDefault();
       await this.beginAudioSetup();
     } else {
+      this.stopTestTone();
       this.setState({ entryStep: ENTRY_STEPS.mic_grant });
     }
   }
@@ -129,29 +169,17 @@ class UIRoot extends Component {
   }
 
   onMicGrantButton = async () => {
-    await this.setMediaStreamToDefault();
-    await this.beginAudioSetup();
+    if (this.state.entryStep == ENTRY_STEPS.mic_grant) {
+      await this.setMediaStreamToDefault();
+      this.setState({ entryStep: ENTRY_STEPS.mic_granted });
+    } else {
+      this.startTestTone();
+      await this.beginAudioSetup();
+    }
   }
 
   beginAudioSetup = async () => {
     await this.fetchMicDevices();
-
-    const playTone = () => {
-      document.querySelector("#test-tone").play();
-      this.setState({ tonePlaying: true });
-      setTimeout(() => this.setState({ tonePlaying: false }), 2000);
-    };
-
-    // Delay initial tone slightly so we don't always hear it.
-    setTimeout(() => {
-      if (this.state.entryStep === ENTRY_STEPS.audio_setup) {
-        playTone();
-
-        const toneInterval = setInterval(playTone, 5000);
-        this.setState({ toneInterval });
-      }
-    }, 2500);
-
     this.setState({ entryStep: ENTRY_STEPS.audio_setup });
   }
 
@@ -178,14 +206,10 @@ class UIRoot extends Component {
     }
 
     this.props.enterScene(mediaStream);
-    clearInterval(this.state.toneInterval);
+    this.stopTestTone();
     this.setState({ entryStep: ENTRY_STEPS.finished });
   }
 
-  componentDidMount = () => {
-    console.log(this.props.availableVREntryTypes);
-  }
-
   render() {
     const entryPanel = this.state.entryStep === ENTRY_STEPS.start 
     ? (
@@ -197,11 +221,11 @@ class UIRoot extends Component {
       </div>
     ) : null;
 
-    const micPanel = this.state.entryStep === ENTRY_STEPS.mic_grant
+    const micPanel = this.state.entryStep === ENTRY_STEPS.mic_grant || this.state.entryStep == ENTRY_STEPS.mic_granted
     ? (
         <div>
           <button onClick={this.onMicGrantButton}>
-            Grant Mic
+            { this.state.entryStep == ENTRY_STEPS.mic_grant ? "Grant Mic" : "Next" }
           </button>
         </div>
       ) : null;
diff --git a/src/room.html b/src/room.html
index 3486ece25a603ecc837fdee587c758e3e3501bb3..22f7a393f265a9d9e80c150a07afe1bea6058305 100644
--- a/src/room.html
+++ b/src/room.html
@@ -15,7 +15,7 @@
 
 <body>
     <div id="loader"></div>
-    <audio id="test-tone" src="./assets/sfx/tone.wav"></audio>
+    <audio id="test-tone" loop src="./assets/sfx/tone.ogg"></audio>
 
     <a-scene
         networked-scene="adapter: janus;
diff --git a/webpack.config.js b/webpack.config.js
index ee58ffa0edc3bc26524c66ea62534b32bd8c69fb..9b21aae0841e10351ec7bfcdc401b845a3cea869 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -142,7 +142,7 @@ module.exports = {
         })
       },
       {
-        test: /\.(png|jpg|gif|glb|wav)$/,
+        test: /\.(png|jpg|gif|glb|ogg)$/,
         use: {
           loader: "file-loader",
           options: {