diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/index.ts
index 677b9c0fef..1038989bd8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/index.ts
@@ -1,2 +1,3 @@
-export * from './input-upload-field-file.element.js';
export * from './input-upload-field.element.js';
+export * from './input-upload-field-file.element.js';
+export * from './input-upload-field-audio.element.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field-audio.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field-audio.element.ts
new file mode 100644
index 0000000000..c636fa079a
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field-audio.element.ts
@@ -0,0 +1,44 @@
+import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app';
+import { html, until, customElement, property, css } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+
+type FileItem = {
+ name: string;
+ src: string;
+};
+
+@customElement('umb-input-upload-field-audio')
+export class UmbInputUploadFieldAudioElement extends UmbLitElement {
+ @property({ type: String })
+ path = '';
+
+ #serverUrl = '';
+
+ constructor() {
+ super();
+ this.consumeContext(UMB_APP_CONTEXT, (instance) => {
+ this.#serverUrl = instance.getServerUrl();
+ });
+ }
+
+ render() {
+ if (!this.path) return html``;
+
+ return html``;
+ }
+
+ static styles = [
+ css`
+ audio {
+ width: 100%;
+ max-width: 600px;
+ }
+ `,
+ ];
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'umb-input-upload-field-audio': UmbInputUploadFieldAudioElement;
+ }
+}