diff --git a/packages/base-styles/_colors.native.scss b/packages/base-styles/_colors.native.scss
index 3e63958cc4624a..059d0580e4badb 100644
--- a/packages/base-styles/_colors.native.scss
+++ b/packages/base-styles/_colors.native.scss
@@ -24,7 +24,9 @@ $light-opacity-light-700: rgba($white, 0.4);
 $alert-yellow: #f0b849;
 $alert-red: #d94f4f;
 $alert-green: #4ab866;
+$red-30: #f86368;
 $red-40: #e65054;
+$red-50: #d63638;
 
 // Primary Accent (Blues)
 $blue-wordpress: #0087be;
diff --git a/packages/block-editor/src/components/media-upload-progress/index.native.js b/packages/block-editor/src/components/media-upload-progress/index.native.js
index 97c9bef5ef9514..386516b097be28 100644
--- a/packages/block-editor/src/components/media-upload-progress/index.native.js
+++ b/packages/block-editor/src/components/media-upload-progress/index.native.js
@@ -128,12 +128,24 @@ export class MediaUploadProgress extends Component {
 		const progressBarStyle = [
 			styles.progressBar,
 			showSpinner || styles.progressBarHidden,
+			this.props.progressBarStyle,
 		];
 
 		return (
-			<View style={ styles.mediaUploadProgress } pointerEvents="box-none">
+			<View
+				style={ [
+					styles.mediaUploadProgress,
+					this.props.containerStyle,
+				] }
+				pointerEvents="box-none"
+			>
 				<View style={ progressBarStyle }>
-					{ showSpinner && <Spinner progress={ progress } /> }
+					{ showSpinner && (
+						<Spinner
+							progress={ progress }
+							style={ this.props.spinnerStyle }
+						/>
+					) }
 				</View>
 				{ renderContent( {
 					isUploadInProgress,
diff --git a/packages/block-library/src/audio/edit.native.js b/packages/block-library/src/audio/edit.native.js
index 3e66485f936991..e6dc50330ce573 100644
--- a/packages/block-library/src/audio/edit.native.js
+++ b/packages/block-library/src/audio/edit.native.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Text, TouchableWithoutFeedback } from 'react-native';
+import { TouchableWithoutFeedback } from 'react-native';
 import { isEmpty } from 'lodash';
 
 /**
@@ -15,6 +15,7 @@ import {
 	withNotices,
 	ToolbarButton,
 	ToolbarGroup,
+	AudioPlayer,
 } from '@wordpress/components';
 import {
 	BlockCaption,
@@ -29,6 +30,11 @@ import { __, sprintf } from '@wordpress/i18n';
 import { audio as icon, replace } from '@wordpress/icons';
 import { useState } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
 const ALLOWED_MEDIA_TYPES = [ 'audio' ];
 
 function AudioEdit( {
@@ -70,7 +76,6 @@ function AudioEdit( {
 		noticeOperations.createErrorNotice( message );
 	}
 
-	// const { setAttributes, isSelected, noticeUI } = this.props;
 	function onSelectAudio( media ) {
 		if ( ! media || ! media.url ) {
 			// in this case there was an error and we should continue in the editing state
@@ -133,17 +138,26 @@ function AudioEdit( {
 				onFinishMediaUploadWithSuccess={ onFileChange }
 				onFinishMediaUploadWithFailure={ onError }
 				onMediaUploadStateReset={ onFileChange }
-				renderContent={ ( { isUploadInProgress, isUploadFailed } ) => {
+				containerStyle={ styles.progressContainer }
+				progressBarStyle={ styles.progressBar }
+				spinnerStyle={ styles.spinner }
+				renderContent={ ( {
+					isUploadInProgress,
+					isUploadFailed,
+					retryMessage,
+				} ) => {
 					return (
-						<View>
+						<>
 							{ ! isCaptionSelected && getBlockControls( open ) }
 							{ getMediaOptions() }
-							<Text>
-								⏯ Audio Player goes here.{ ' ' }
-								{ isUploadInProgress && 'Uploading...' }
-								{ isUploadFailed && 'ERROR' }
-							</Text>
-						</View>
+							<AudioPlayer
+								isUploadInProgress={ isUploadInProgress }
+								isUploadFailed={ isUploadFailed }
+								retryMessage={ retryMessage }
+								attributes={ attributes }
+								isSelected={ isSelected }
+							/>
+						</>
 					);
 				} }
 			/>
diff --git a/packages/block-library/src/audio/style.native.scss b/packages/block-library/src/audio/style.native.scss
new file mode 100644
index 00000000000000..79a428acb06b93
--- /dev/null
+++ b/packages/block-library/src/audio/style.native.scss
@@ -0,0 +1,13 @@
+.progressContainer {
+	border-radius: 4px;
+	overflow: hidden;
+}
+
+.progressBar {
+	height: 4px;
+	margin-bottom: -4px;
+}
+
+.spinner {
+	height: 4px;
+}
diff --git a/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap
index a4f88395a19e90..ceb74a27f74922 100644
--- a/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap
+++ b/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap
@@ -3,12 +3,19 @@
 exports[`File block renders file error state without crashing 1`] = `
 <View
   pointerEvents="box-none"
+  style={
+    Array [
+      undefined,
+      undefined,
+    ]
+  }
 >
   <View
     style={
       Array [
         undefined,
         undefined,
+        undefined,
       ]
     }
   />
@@ -195,12 +202,19 @@ exports[`File block renders file error state without crashing 1`] = `
 exports[`File block renders file without crashing 1`] = `
 <View
   pointerEvents="box-none"
+  style={
+    Array [
+      undefined,
+      undefined,
+    ]
+  }
 >
   <View
     style={
       Array [
         undefined,
         undefined,
+        undefined,
       ]
     }
   />
diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js
index 6c96e9e646b91a..0fee6fc26bad96 100644
--- a/packages/components/src/index.native.js
+++ b/packages/components/src/index.native.js
@@ -83,6 +83,7 @@ export { default as ImageEditingButton } from './mobile/image/image-editing-butt
 export { default as InserterButton } from './mobile/inserter-button';
 export { setClipboard, getClipboard } from './mobile/clipboard';
 export { default as Preview } from './mobile/preview';
+export { default as AudioPlayer } from './mobile/audio-player';
 
 // Utils
 export { colorsUtils } from './mobile/color-settings/utils';
diff --git a/packages/components/src/mobile/audio-player/index.native.js b/packages/components/src/mobile/audio-player/index.native.js
new file mode 100644
index 00000000000000..ce01b815ebcd82
--- /dev/null
+++ b/packages/components/src/mobile/audio-player/index.native.js
@@ -0,0 +1,225 @@
+/**
+ * External dependencies
+ */
+import {
+	Text,
+	TouchableWithoutFeedback,
+	Linking,
+	Alert,
+	Platform,
+} from 'react-native';
+import { default as VideoPlayer } from 'react-native-video';
+
+/**
+ * WordPress dependencies
+ */
+import { View } from '@wordpress/primitives';
+import { Icon } from '@wordpress/components';
+import { withPreferredColorScheme } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+import { audio, warning } from '@wordpress/icons';
+import {
+	requestImageFailedRetryDialog,
+	requestImageUploadCancelDialog,
+} from '@wordpress/react-native-bridge';
+import { getProtocol, safeDecodeURI } from '@wordpress/url';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
+
+const isIOS = Platform.OS === 'ios';
+
+function Player( {
+	getStylesFromColorScheme,
+	isUploadInProgress,
+	isUploadFailed,
+	attributes,
+	isSelected,
+} ) {
+	const { id, src } = attributes;
+	const [ paused, setPaused ] = useState( true );
+
+	const onPressListen = () => {
+		if ( src ) {
+			if ( isIOS && this.player ) {
+				this.player.presentFullscreenPlayer();
+				return;
+			}
+
+			Linking.canOpenURL( src )
+				.then( ( supported ) => {
+					if ( ! supported ) {
+						Alert.alert(
+							__( 'Problem opening the audio' ),
+							__( 'No application can handle this request.' )
+						);
+					} else {
+						return Linking.openURL( src );
+					}
+				} )
+				.catch( () => {
+					Alert.alert(
+						__( 'Problem opening the audio' ),
+						__( 'An unknown error occurred. Please try again.' )
+					);
+				} );
+		}
+	};
+
+	const containerStyle = getStylesFromColorScheme(
+		styles.container,
+		styles.containerDark
+	);
+
+	const iconStyle = getStylesFromColorScheme( styles.icon, styles.iconDark );
+
+	const iconDisabledStyle = getStylesFromColorScheme(
+		styles.iconDisabled,
+		styles.iconDisabledDark
+	);
+
+	const isDisabled = isUploadFailed || isUploadInProgress;
+
+	const finalIconStyle = {
+		...iconStyle,
+		...( isDisabled && iconDisabledStyle ),
+	};
+
+	const iconContainerStyle = getStylesFromColorScheme(
+		styles.iconContainer,
+		styles.iconContainerDark
+	);
+
+	const titleContainerStyle = {
+		...styles.titleContainer,
+		...( isIOS ? styles.titleContainerIOS : styles.titleContainerAndroid ),
+	};
+
+	const titleStyle = getStylesFromColorScheme(
+		styles.title,
+		styles.titleDark
+	);
+
+	const uploadFailedStyle = getStylesFromColorScheme(
+		styles.uploadFailed,
+		styles.uploadFailedDark
+	);
+
+	const subtitleStyle = getStylesFromColorScheme(
+		styles.subtitle,
+		styles.subtitleDark
+	);
+
+	const finalSubtitleStyle = {
+		...subtitleStyle,
+		...( isUploadFailed && uploadFailedStyle ),
+	};
+
+	const buttonBackgroundStyle = getStylesFromColorScheme(
+		styles.buttonBackground,
+		styles.buttonBackgroundDark
+	);
+
+	let title = '';
+	let extension = '';
+
+	if ( src ) {
+		const decodedURI = safeDecodeURI( src );
+		const fileName = decodedURI.split( '/' ).pop();
+		const parts = fileName.split( '.' );
+		extension = parts.pop().toUpperCase();
+		title = parts.join( '.' );
+	}
+
+	const getSubtitleValue = () => {
+		if ( isUploadInProgress ) {
+			return __( 'Uploading…' );
+		}
+		if ( isUploadFailed ) {
+			return __( 'Failed to insert audio file. Please tap for options.' );
+		}
+		return (
+			extension +
+			// translators: displays audio file extension. e.g. MP3 audio file
+			__( ' audio file' )
+		);
+	};
+
+	function onAudioUploadCancelDialog() {
+		if ( isUploadInProgress ) {
+			requestImageUploadCancelDialog( id );
+		} else if ( id && getProtocol( src ) === 'file:' ) {
+			requestImageFailedRetryDialog( id );
+		}
+	}
+
+	return (
+		<TouchableWithoutFeedback
+			accessible={ ! isSelected }
+			disabled={ ! isSelected }
+			onPress={ onAudioUploadCancelDialog }
+		>
+			<View style={ containerStyle }>
+				<View style={ iconContainerStyle }>
+					<Icon icon={ audio } style={ finalIconStyle } size={ 24 } />
+				</View>
+				<View style={ titleContainerStyle }>
+					<Text style={ titleStyle }>{ title }</Text>
+					<View style={ styles.subtitleContainer }>
+						{ isUploadFailed && (
+							<Icon
+								icon={ warning }
+								style={ {
+									...styles.errorIcon,
+									...uploadFailedStyle,
+								} }
+								size={ 16 }
+							/>
+						) }
+						<Text style={ finalSubtitleStyle }>
+							{ getSubtitleValue() }
+						</Text>
+					</View>
+				</View>
+				{ ! isDisabled && (
+					<TouchableWithoutFeedback
+						accessibilityLabel={ __( 'Audio Player' ) }
+						accessibilityRole={ 'button' }
+						accessibilityHint={ __(
+							'Double tap to listen the audio file'
+						) }
+						onPress={ onPressListen }
+					>
+						<View style={ buttonBackgroundStyle }>
+							<Text style={ styles.buttonText }>
+								{ __( 'OPEN' ) }
+							</Text>
+						</View>
+					</TouchableWithoutFeedback>
+				) }
+				{ isIOS && (
+					<VideoPlayer
+						source={ { uri: src } }
+						paused={ paused }
+						ref={ ( ref ) => {
+							this.player = ref;
+						} }
+						controls={ false }
+						ignoreSilentSwitch={ 'ignore' }
+						onFullscreenPlayerWillPresent={ () => {
+							setPaused( false );
+						} }
+						onFullscreenPlayerDidDismiss={ () => {
+							setPaused( true );
+						} }
+					/>
+				) }
+			</View>
+		</TouchableWithoutFeedback>
+	);
+}
+
+export default withPreferredColorScheme( Player );
diff --git a/packages/components/src/mobile/audio-player/styles.scss b/packages/components/src/mobile/audio-player/styles.scss
new file mode 100644
index 00000000000000..6dbdb7c09c5f54
--- /dev/null
+++ b/packages/components/src/mobile/audio-player/styles.scss
@@ -0,0 +1,114 @@
+.container {
+	background-color: $light-ultra-dim;
+	border-radius: 4px;
+	flex-direction: row;
+	align-items: center;
+}
+
+.containerDark {
+	background-color: $dark-ultra-dim;
+}
+
+@mixin circle($width) {
+	width: $width;
+	height: $width;
+	border-radius: $width/2;
+}
+
+.iconContainer {
+	background-color: $light-ultra-dim;
+	margin: 12px 16px;
+	align-items: center;
+	justify-content: center;
+	@include circle(37px);
+}
+
+.iconContainerDark {
+	background-color: $dark-ultra-dim;
+}
+
+.icon {
+	color: $light-secondary;
+}
+
+.iconDark {
+	color: $dark-secondary;
+}
+
+.iconDisabled {
+	color: $light-quaternary;
+}
+
+.iconDisabledDark {
+	color: $dark-quaternary;
+}
+
+.disabledIcon {
+	color: $black;
+}
+
+.titleContainer {
+	padding: 12px 16px 12px 0;
+	flex: 1;
+}
+
+.titleContainerIOS {
+	margin-top: -1px;
+}
+
+.titleContainerAndroid {
+	margin-top: -2px;
+}
+
+.title {
+	font-size: 17;
+	margin-bottom: 1px;
+	color: $light-primary;
+}
+
+.titleDark {
+	color: $dark-primary;
+}
+
+.subtitleContainer {
+	flex-direction: row;
+	align-items: center;
+}
+
+.subtitle {
+	font-size: 12;
+	color: $light-secondary;
+}
+
+.subtitleDark {
+	color: $dark-secondary;
+}
+
+.buttonBackground {
+	margin: 12px 16px;
+	padding: 8px 16px;
+	border-radius: 500px;
+	background-color: $light-ultra-dim;
+}
+
+.buttonBackgroundDark {
+	background-color: $dark-ultra-dim;
+}
+
+.buttonText {
+	font-size: 14;
+	font-weight: 500;
+	color: $blue-wordpress;
+}
+
+.errorIcon {
+	margin-right: 4px;
+}
+
+.uploadFailed {
+	color: $red-50;
+}
+
+.uploadFailedDark {
+	color: $red-30;
+}
diff --git a/packages/components/src/spinner/index.native.js b/packages/components/src/spinner/index.native.js
index 5b25cf7945c079..a4a64f280a29ba 100644
--- a/packages/components/src/spinner/index.native.js
+++ b/packages/components/src/spinner/index.native.js
@@ -13,5 +13,5 @@ export default function Spinner( props ) {
 
 	const width = progress + '%';
 
-	return <View style={ [ style.spinner, { width } ] } />;
+	return <View style={ [ style.spinner, { width }, props.style ] } />;
 }