diff --git a/src/components/views/rooms/VoiceRecordComposerTile.tsx b/src/components/views/rooms/VoiceRecordComposerTile.tsx
index 6fe6a5ab1c..5868eed02d 100644
--- a/src/components/views/rooms/VoiceRecordComposerTile.tsx
+++ b/src/components/views/rooms/VoiceRecordComposerTile.tsx
@@ -26,11 +26,11 @@ import {
 import {Room} from "matrix-js-sdk/src/models/room";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import classNames from "classnames";
-import Waveform from "../voice_messages/Waveform";
+import LiveRecordingWaveform from "../voice_messages/LiveRecordingWaveform";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { arrayFastResample, arraySeed } from "../../../utils/arrays";
 import { percentageOf } from "../../../utils/numbers";
-import Clock from "../voice_messages/Clock";
+import LiveRecordingClock from "../voice_messages/LiveRecordingClock";
 import { VoiceRecordingStore } from "../../../stores/VoiceRecordingStore";
 import {UPDATE_EVENT} from "../../../stores/AsyncStore";
 import RecordingPlayback from "../voice_messages/RecordingPlayback";
@@ -227,8 +227,8 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
 
         // only other UI is the recording-in-progress UI
         return <div className="mx_VoiceMessagePrimaryContainer mx_VoiceRecordComposerTile_recording">
-            <Clock seconds={this.state.seconds} />
-            <Waveform relHeights={this.state.relHeights} />
+            <LiveRecordingClock seconds={this.state.seconds} />
+            <LiveRecordingWaveform relHeights={this.state.relHeights} />
         </div>;
     }
 
diff --git a/src/components/views/voice_messages/Clock.tsx b/src/components/views/voice_messages/Clock.tsx
index 23e6762c52..1e78cc7bbd 100644
--- a/src/components/views/voice_messages/Clock.tsx
+++ b/src/components/views/voice_messages/Clock.tsx
@@ -15,9 +15,9 @@ limitations under the License.
 */
 
 import React from "react";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
-interface IProps {
+export interface IProps {
     seconds: number;
 }
 
diff --git a/src/components/views/voice_messages/LiveRecordingClock.tsx b/src/components/views/voice_messages/LiveRecordingClock.tsx
new file mode 100644
index 0000000000..f88bb63ac7
--- /dev/null
+++ b/src/components/views/voice_messages/LiveRecordingClock.tsx
@@ -0,0 +1,26 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import Clock, { IProps as IClockProps } from "./Clock";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+
+/**
+ * A clock for a live recording.
+ */
+@replaceableComponent("views.voice_messages.LiveRecordingClock")
+export default class LiveRecordingClock extends React.PureComponent<IClockProps> {
+    public render() {
+        return <Clock seconds={this.props.seconds} />;
+    }
+}
diff --git a/src/components/views/voice_messages/LiveRecordingWaveform.tsx b/src/components/views/voice_messages/LiveRecordingWaveform.tsx
new file mode 100644
index 0000000000..3d3169d764
--- /dev/null
+++ b/src/components/views/voice_messages/LiveRecordingWaveform.tsx
@@ -0,0 +1,29 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import Waveform, { IProps as IWaveformProps } from "./Waveform";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+
+/**
+ * A waveform which shows the waveform of a live recording
+ */
+@replaceableComponent("views.voice_messages.LiveRecordingWaveform")
+export default class LiveRecordingWaveform extends React.PureComponent<IWaveformProps> {
+    public static defaultProps = {
+        progress: 1,
+    };
+    public render() {
+        return <Waveform relHeights={this.props.relHeights} />;
+    }
+}
diff --git a/src/components/views/voice_messages/Waveform.tsx b/src/components/views/voice_messages/Waveform.tsx
index ae880933e6..5a4447065a 100644
--- a/src/components/views/voice_messages/Waveform.tsx
+++ b/src/components/views/voice_messages/Waveform.tsx
@@ -15,10 +15,10 @@ limitations under the License.
 */
 
 import React from "react";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 import classNames from "classnames";
 
-interface IProps {
+export interface IProps {
     relHeights: number[]; // relative heights (0-1)
     progress: number; // percent complete, 0-1, default 100%
 }