diff --git a/plugin-hrm-form/src/components/contact/MediaSection/RecordingSection.tsx b/plugin-hrm-form/src/components/contact/MediaSection/RecordingSection.tsx
index 3a676607a7..9160a66fb8 100644
--- a/plugin-hrm-form/src/components/contact/MediaSection/RecordingSection.tsx
+++ b/plugin-hrm-form/src/components/contact/MediaSection/RecordingSection.tsx
@@ -19,7 +19,8 @@ import CircularProgress from '@material-ui/core/CircularProgress';
 
 import { ErrorFont, LoadMediaButton, LoadMediaButtonText } from './styles';
 import { S3StoredRecording } from '../../../types/types';
-import { getFileDownloadUrl } from '../../../services/ServerlessService';
+import { generateExternalMediaPath } from '../../../services/ContactService';
+import fetchHrmApi from '../../../services/fetchHrmApi';
 
 type OwnProps = { contactId: string; externalStoredRecording: S3StoredRecording };
 
@@ -34,11 +35,16 @@ const RecordingSection: React.FC<OwnProps> = ({ contactId, externalStoredRecordi
       setLoading(true);
       setShowButton(false);
 
-      const recordingPreSignedUrl = await getFileDownloadUrl(externalStoredRecording.location.key);
-      const recordingResponse = await fetch(recordingPreSignedUrl.downloadUrl);
-      const recordingBlob = await recordingResponse.blob();
-      const voiceRecording = new Audio(URL.createObjectURL(recordingBlob));
-      setVoiceRecording(voiceRecording.src);
+      // TODO: this won't currently work for local dev env
+      const { media_url: recordingPreSignedUrl } = await fetchHrmApi(
+        generateExternalMediaPath(
+          contactId,
+          externalStoredRecording.location.bucket,
+          externalStoredRecording.location.key,
+        ),
+      );
+
+      setVoiceRecording(recordingPreSignedUrl);
 
       setLoading(false);
     } catch (error) {
@@ -86,7 +92,7 @@ const RecordingSection: React.FC<OwnProps> = ({ contactId, externalStoredRecordi
   return (
     <div>
       {voiceRecording ? (
-        <audio controls src={voiceRecording} preload="auto" onError={handleFetchAndLoadException}>
+        <audio controls src={voiceRecording} preload="metadata" onError={handleFetchAndLoadException}>
           <track kind="captions" />
         </audio>
       ) : (
diff --git a/plugin-hrm-form/src/services/ContactService.ts b/plugin-hrm-form/src/services/ContactService.ts
index b39ae0e261..6c8fd5f82c 100644
--- a/plugin-hrm-form/src/services/ContactService.ts
+++ b/plugin-hrm-form/src/services/ContactService.ts
@@ -51,6 +51,7 @@ import {
   isFailureExternalRecordingInfo,
   isSuccessfulExternalRecordingInfo,
 } from './getExternalRecordingInfo';
+import { generateUrl } from './fetchApi';
 
 type NestedInformation = { name?: { firstName: string; lastName: string } };
 type LegacyInformationObject = NestedInformation & {
@@ -396,3 +397,6 @@ export async function connectToCase(contactId, caseId) {
 
   return fetchHrmApi(`/contacts/${contactId}/connectToCase`, options);
 }
+
+export const generateExternalMediaPath = (contactId: string, bucket: string, key: string) =>
+  `/files/urls?method=getObject&objectType=contact&objectId=${contactId}&fileType=recording&bucket=${bucket}&key=${key}`;
diff --git a/plugin-hrm-form/src/services/InsightsService.ts b/plugin-hrm-form/src/services/InsightsService.ts
index c9d84d4cf0..06355a17f4 100644
--- a/plugin-hrm-form/src/services/InsightsService.ts
+++ b/plugin-hrm-form/src/services/InsightsService.ts
@@ -42,6 +42,7 @@ import {
   isSuccessfulExternalRecordingInfo,
 } from './getExternalRecordingInfo';
 import { generateUrl } from './fetchApi';
+import { generateExternalMediaPath } from './ContactService';
 
 /*
  * 'Any' is the best we can do, since we're limited by Twilio here.
@@ -399,12 +400,13 @@ const getInsightsUpdateFunctionsForConfig = (
 
 const generateUrlProviderBlock = (externalRecordingInfo: ExternalRecordingInfoSuccess, contact: HrmServiceContact) => {
   const { hrmMicroserviceBaseUrl } = getHrmConfig();
-
   const { bucket, key } = externalRecordingInfo;
+
   const url_provider = generateUrl(
     new URL(hrmMicroserviceBaseUrl),
-    `/files/urls?method=getObject&objectType=contact&objectId=${contact.id}&fileType=recording&bucket=${bucket}&key=${key}`,
+    generateExternalMediaPath(contact.id, bucket, key),
   ).toString();
+
   return [
     {
       type: 'VoiceRecording',