diff --git a/app/components/channel_bookmarks/channel_bookmark/bookmark_document.tsx b/app/components/channel_bookmarks/channel_bookmark/bookmark_document.tsx
index 20bb4a711a1..12d2b2b5f02 100644
--- a/app/components/channel_bookmarks/channel_bookmark/bookmark_document.tsx
+++ b/app/components/channel_bookmarks/channel_bookmark/bookmark_document.tsx
@@ -2,12 +2,13 @@
 // See LICENSE.txt for license information.
 
 import {Button} from '@rneui/base';
-import React, {useCallback, useRef, useState} from 'react';
+import React, {useCallback, useRef} from 'react';
 import {StyleSheet, View} from 'react-native';
 
 import Document, {type DocumentRef} from '@components/document';
 import ProgressBar from '@components/progress_bar';
 import {useTheme} from '@context/theme';
+import {useDownloadFileAndPreview} from '@hooks/files';
 
 import BookmarkDetails from './bookmark_details';
 
@@ -33,9 +34,9 @@ const styles = StyleSheet.create({
 });
 
 const BookmarkDocument = ({bookmark, canDownloadFiles, file, onLongPress}: Props) => {
-    const [progress, setProgress] = useState(0);
     const document = useRef<DocumentRef>(null);
     const theme = useTheme();
+    const {progress, toggleDownloadAndPreview} = useDownloadFileAndPreview();
 
     const handlePress = useCallback(async () => {
         if (document.current) {
@@ -47,7 +48,7 @@ const BookmarkDocument = ({bookmark, canDownloadFiles, file, onLongPress}: Props
         <Document
             canDownloadFiles={canDownloadFiles}
             file={file.toFileInfo(bookmark.ownerId)}
-            onProgress={setProgress}
+            downloadAndPreviewFile={toggleDownloadAndPreview}
             ref={document}
         >
             <Button
diff --git a/app/components/document/index.tsx b/app/components/document/index.tsx
index 66755634484..72fc41ec0fd 100644
--- a/app/components/document/index.tsx
+++ b/app/components/document/index.tsx
@@ -1,22 +1,10 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {deleteAsync} from 'expo-file-system';
-import {forwardRef, useImperativeHandle, useRef, useState, type ReactNode, useCallback} from 'react';
+import {forwardRef, useImperativeHandle, type ReactNode, useCallback} from 'react';
 import {useIntl} from 'react-intl';
-import {Platform, StatusBar, type StatusBarStyle} from 'react-native';
-import FileViewer from 'react-native-file-viewer';
-import tinyColor from 'tinycolor2';
 
-import {downloadFile} from '@actions/remote/file';
-import {useServerUrl} from '@context/server';
-import {useTheme} from '@context/theme';
-import {alertDownloadDocumentDisabled, alertDownloadFailed, alertFailedToOpenDocument} from '@utils/document';
-import {getFullErrorMessage, isErrorWithMessage} from '@utils/errors';
-import {fileExists, getLocalFilePathFromFile} from '@utils/file';
-import {logDebug} from '@utils/log';
-
-import type {ClientResponse, ProgressPromise} from '@mattermost/react-native-network-client';
+import {alertDownloadDocumentDisabled} from '@utils/document';
 
 export type DocumentRef = {
     handlePreviewPress: () => void;
@@ -26,113 +14,11 @@ type DocumentProps = {
     canDownloadFiles: boolean;
     file: FileInfo;
     children: ReactNode;
-    onProgress: (progress: number) => void;
+    downloadAndPreviewFile: (file: FileInfo) => void;
 }
 
-const Document = forwardRef<DocumentRef, DocumentProps>(({canDownloadFiles, children, onProgress, file}: DocumentProps, ref) => {
+const Document = forwardRef<DocumentRef, DocumentProps>(({canDownloadFiles, children, downloadAndPreviewFile, file}: DocumentProps, ref) => {
     const intl = useIntl();
-    const serverUrl = useServerUrl();
-    const theme = useTheme();
-    const [didCancel, setDidCancel] = useState(false);
-    const [downloading, setDownloading] = useState(false);
-    const [preview, setPreview] = useState(false);
-    const downloadTask = useRef<ProgressPromise<ClientResponse>>();
-
-    const cancelDownload = () => {
-        setDidCancel(true);
-        if (downloadTask.current?.cancel) {
-            downloadTask.current.cancel();
-        }
-    };
-
-    const downloadAndPreviewFile = useCallback(async () => {
-        setDidCancel(false);
-        let path;
-        let exists = false;
-
-        try {
-            path = decodeURIComponent(file.localPath || '');
-            if (path) {
-                exists = await fileExists(path);
-            }
-
-            if (!exists) {
-                path = getLocalFilePathFromFile(serverUrl, file);
-                exists = await fileExists(path);
-            }
-
-            if (exists) {
-                openDocument();
-            } else {
-                setDownloading(true);
-                downloadTask.current = downloadFile(serverUrl, file.id!, path!);
-                downloadTask.current?.progress?.(onProgress);
-
-                await downloadTask.current;
-                onProgress(1);
-                openDocument();
-            }
-        } catch (error) {
-            if (path) {
-                deleteAsync(path, {idempotent: true});
-            }
-            setDownloading(false);
-            onProgress(0);
-
-            if (!isErrorWithMessage(error) || error.message !== 'cancelled') {
-                logDebug('error on downloadAndPreviewFile', getFullErrorMessage(error));
-                alertDownloadFailed(intl);
-            }
-        }
-    }, [file, onProgress]);
-
-    const setStatusBarColor = useCallback((style: StatusBarStyle = 'light-content') => {
-        if (Platform.OS === 'ios') {
-            if (style) {
-                StatusBar.setBarStyle(style, true);
-            } else {
-                const headerColor = tinyColor(theme.sidebarHeaderBg);
-                let barStyle: StatusBarStyle = 'light-content';
-                if (headerColor.isLight() && Platform.OS === 'ios') {
-                    barStyle = 'dark-content';
-                }
-                StatusBar.setBarStyle(barStyle, true);
-            }
-        }
-    }, [theme]);
-
-    const openDocument = useCallback(async () => {
-        if (!didCancel && !preview) {
-            let path = decodeURIComponent(file.localPath || '');
-            let exists = false;
-            if (path) {
-                exists = await fileExists(path);
-            }
-
-            if (!exists) {
-                path = getLocalFilePathFromFile(serverUrl, file);
-            }
-
-            setPreview(true);
-            setStatusBarColor('dark-content');
-            FileViewer.open(path!.replace('file://', ''), {
-                displayName: decodeURIComponent(file.name),
-                onDismiss: onDonePreviewingFile,
-                showOpenWithDialog: true,
-                showAppsSuggestions: true,
-            }).then(() => {
-                setDownloading(false);
-                onProgress(0);
-            }).catch(() => {
-                alertFailedToOpenDocument(file, intl);
-                onDonePreviewingFile();
-
-                if (path) {
-                    deleteAsync(path, {idempotent: true});
-                }
-            });
-        }
-    }, [didCancel, preview, file, onProgress, setStatusBarColor]);
 
     const handlePreviewPress = useCallback(async () => {
         if (!canDownloadFiles) {
@@ -140,21 +26,8 @@ const Document = forwardRef<DocumentRef, DocumentProps>(({canDownloadFiles, chil
             return;
         }
 
-        if (downloading) {
-            onProgress(0);
-            cancelDownload();
-            setDownloading(false);
-        } else {
-            downloadAndPreviewFile();
-        }
-    }, [canDownloadFiles, downloadAndPreviewFile, downloading, intl, onProgress, openDocument]);
-
-    const onDonePreviewingFile = () => {
-        onProgress(0);
-        setDownloading(false);
-        setPreview(false);
-        setStatusBarColor();
-    };
+        downloadAndPreviewFile(file);
+    }, [canDownloadFiles, downloadAndPreviewFile, intl]);
 
     useImperativeHandle(ref, () => ({
         handlePreviewPress,
diff --git a/app/components/files/audio_file.tsx b/app/components/files/audio_file.tsx
new file mode 100644
index 00000000000..fbebae57301
--- /dev/null
+++ b/app/components/files/audio_file.tsx
@@ -0,0 +1,211 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {throttle} from 'lodash';
+import React, {useEffect, useMemo, useRef, useState} from 'react';
+import {useIntl} from 'react-intl';
+import {
+    View,
+    TouchableOpacity,
+    Text,
+    TouchableWithoutFeedback,
+} from 'react-native';
+import Video, {type OnLoadData, type OnProgressData, type VideoRef} from 'react-native-video';
+
+import {useTheme} from '@context/theme';
+import {useDownloadFileAndPreview} from '@hooks/files';
+import {alertDownloadDocumentDisabled} from '@utils/document';
+import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
+import {typography} from '@utils/typography';
+
+import CompassIcon from '../compass_icon';
+import FormattedText from '../formatted_text';
+import ProgressBar from '../progress_bar';
+
+type Props = {
+    file: FileInfo;
+    canDownloadFiles: boolean;
+}
+
+const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
+    audioFileWrapper: {
+        position: 'relative',
+        borderColor: changeOpacity(theme.centerChannelColor, 0.2),
+        borderRadius: 4,
+        borderWidth: 1,
+        padding: 12,
+        overflow: 'hidden',
+        flexDirection: 'row',
+        gap: 12,
+        alignItems: 'center',
+    },
+    playButton: {
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: changeOpacity(theme.buttonBg, 0.12),
+        borderRadius: 100,
+        width: 40,
+        height: 40,
+    },
+    playIcon: {
+        color: theme.buttonBg,
+    },
+    downloadIcon: {
+        color: changeOpacity(theme.centerChannelColor, 0.56),
+    },
+    progressBar: {
+        flex: 1,
+    },
+    timerText: {
+        color: theme.centerChannelColor,
+        ...typography('Body', 75, 'SemiBold'),
+    },
+}));
+
+const AudioFile = ({file, canDownloadFiles}: Props) => {
+    const intl = useIntl();
+    const theme = useTheme();
+    const style = getStyleSheet(theme);
+    const [hasPaused, setHasPaused] = useState<boolean>(true);
+    const [hasError, setHasError] = useState<boolean>(false);
+    const [hasEnded, setHasEnded] = useState<boolean>(false);
+    const [progress, setProgress] = useState<number>(0);
+    const [timeInMinutes, setTimeInMinutes] = useState<string>('0:00');
+    const [duration, setDuration] = useState<number>(0);
+    const videoRef = useRef<VideoRef>(null);
+
+    useEffect(() => {
+        if (hasEnded) {
+            const timer = setTimeout(() => {
+                setHasPaused(true);
+                setProgress(0);
+                setHasEnded(false);
+            }, 100);
+
+            return () => clearTimeout(timer);
+        }
+
+        return () => null;
+    }, [hasEnded]);
+
+    const source = useMemo(() => ({uri: file.uri}), [file.uri]);
+
+    const {toggleDownloadAndPreview} = useDownloadFileAndPreview();
+
+    const onPlayPress = () => {
+        setHasPaused(!hasPaused);
+    };
+
+    const onDownloadPress = async () => {
+        if (!canDownloadFiles) {
+            alertDownloadDocumentDisabled(intl);
+            return;
+        }
+
+        toggleDownloadAndPreview(file);
+    };
+
+    const loadTimeInMinutes = (timeInSeconds: number) => {
+        const minutes = Math.floor(timeInSeconds / 60);
+        const seconds = Math.floor(timeInSeconds % 60);
+        setTimeInMinutes(`${minutes}:${seconds.toString().padStart(2, '0')}`);
+    };
+
+    const onLoad = (loadData: OnLoadData) => {
+        loadTimeInMinutes(loadData.duration);
+        setDuration(loadData.duration);
+    };
+
+    const onProgress = (progressData: OnProgressData) => {
+        if (hasPaused) {
+            return;
+        }
+        const {currentTime, playableDuration} = progressData;
+        setProgress(currentTime / playableDuration);
+        throttle(() => loadTimeInMinutes(currentTime), 1000)();
+    };
+
+    const onEnd = () => {
+        if (videoRef.current) {
+            videoRef.current.seek(0);
+        }
+        setHasEnded(true);
+    };
+
+    const onError = () => {
+        setHasError(true);
+    };
+
+    const onSeek = (seekPosition: number) => {
+        if (videoRef.current && duration > 0) {
+            const newTime = seekPosition * duration;
+            videoRef.current.seek(newTime);
+            setProgress(seekPosition);
+            throttle(() => loadTimeInMinutes(newTime), 100)();
+        }
+    };
+
+    if (hasError) {
+        return (
+            <FormattedText
+                id={'audio.loading_error'}
+                defaultMessage={'Error loading audio.'}
+            />
+        );
+    }
+
+    return (
+        <TouchableWithoutFeedback
+            onPress={(e) => {
+                e.stopPropagation();
+            }}
+        >
+            <View style={style.audioFileWrapper}>
+                <TouchableOpacity
+                    style={style.playButton}
+                    onPress={onPlayPress}
+                >
+                    <CompassIcon
+                        name={hasPaused ? 'play' : 'pause'}
+                        size={24}
+                        style={style.playIcon}
+                    />
+                </TouchableOpacity>
+
+                <Video
+                    ref={videoRef}
+                    source={source}
+                    paused={hasPaused}
+                    onLoad={onLoad}
+                    onProgress={onProgress}
+                    onError={onError}
+                    onEnd={onEnd}
+                />
+
+                <View style={style.progressBar}>
+                    <ProgressBar
+                        progress={progress}
+                        color={theme.buttonBg}
+                        withCursor={true}
+                        onSeek={onSeek}
+                    />
+                </View>
+
+                <Text style={style.timerText}>{timeInMinutes}</Text>
+
+                <TouchableOpacity
+                    onPress={onDownloadPress}
+                >
+                    <CompassIcon
+                        name='download-outline'
+                        size={24}
+                        style={style.downloadIcon}
+                    />
+                </TouchableOpacity>
+            </View>
+        </TouchableWithoutFeedback>
+    );
+};
+
+export default AudioFile;
diff --git a/app/components/files/document_file.tsx b/app/components/files/document_file.tsx
index dbf65bdb7fc..6a7dea88927 100644
--- a/app/components/files/document_file.tsx
+++ b/app/components/files/document_file.tsx
@@ -1,15 +1,20 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {forwardRef, useImperativeHandle, useRef, useState} from 'react';
+import React, {forwardRef, useImperativeHandle, useRef} from 'react';
 import {StyleSheet, TouchableOpacity, View} from 'react-native';
 
 import Document, {type DocumentRef} from '@components/document';
 import ProgressBar from '@components/progress_bar';
 import {useTheme} from '@context/theme';
+import {useDownloadFileAndPreview} from '@hooks/files';
 
 import FileIcon from './file_icon';
 
+export type DocumentFileRef = {
+    handlePreviewPress: () => void;
+}
+
 type DocumentFileProps = {
     backgroundColor?: string;
     disabled?: boolean;
@@ -29,8 +34,8 @@ const styles = StyleSheet.create({
 
 const DocumentFile = forwardRef<DocumentRef, DocumentFileProps>(({backgroundColor, canDownloadFiles, disabled = false, file}: DocumentFileProps, ref) => {
     const theme = useTheme();
-    const [progress, setProgress] = useState(0);
     const document = useRef<DocumentRef>(null);
+    const {downloading, progress, toggleDownloadAndPreview} = useDownloadFileAndPreview();
 
     const handlePreviewPress = async () => {
         document.current?.handlePreviewPress();
@@ -48,7 +53,7 @@ const DocumentFile = forwardRef<DocumentRef, DocumentFileProps>(({backgroundColo
     );
 
     let fileAttachmentComponent = icon;
-    if (progress) {
+    if (downloading) {
         fileAttachmentComponent = (
             <>
                 {icon}
@@ -66,7 +71,7 @@ const DocumentFile = forwardRef<DocumentRef, DocumentFileProps>(({backgroundColo
         <Document
             canDownloadFiles={canDownloadFiles}
             file={file}
-            onProgress={setProgress}
+            downloadAndPreviewFile={toggleDownloadAndPreview}
             ref={document}
         >
             <TouchableOpacity
diff --git a/app/components/files/file.tsx b/app/components/files/file.tsx
index bd3ce0d4083..776a27869c1 100644
--- a/app/components/files/file.tsx
+++ b/app/components/files/file.tsx
@@ -8,9 +8,10 @@ import Animated from 'react-native-reanimated';
 import TouchableWithFeedback from '@components/touchable_with_feedback';
 import {useTheme} from '@context/theme';
 import {useGalleryItem} from '@hooks/gallery';
-import {isDocument, isImage, isVideo} from '@utils/file';
+import {isAudio, isDocument, isImage, isVideo} from '@utils/file';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 
+import AudioFile from './audio_file';
 import DocumentFile from './document_file';
 import FileIcon from './file_icon';
 import FileInfo from './file_info';
@@ -216,6 +217,17 @@ const File = ({
                 }
             </View>
         );
+    } else if (isAudio(file)) {
+        const renderAudioFile = (
+            <Animated.View style={[styles, asCard ? style.imageVideo : null]}>
+                <AudioFile
+                    file={file}
+                    canDownloadFiles={canDownloadFiles}
+                />
+            </Animated.View>
+        );
+
+        fileComponent = asCard ? renderCardWithImage(renderAudioFile) : renderAudioFile;
     } else {
         const touchableWithPreview = (
             <TouchableWithFeedback
diff --git a/app/components/progress_bar/index.tsx b/app/components/progress_bar/index.tsx
index 0b677e7cf97..2298c960192 100644
--- a/app/components/progress_bar/index.tsx
+++ b/app/components/progress_bar/index.tsx
@@ -1,67 +1,160 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useCallback, useEffect, useState} from 'react';
-import {type LayoutChangeEvent, StyleSheet, type StyleProp, View, type ViewStyle} from 'react-native';
-import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
+import React, {useCallback, useEffect} from 'react';
+import {type LayoutChangeEvent, type StyleProp, View, type ViewStyle, StyleSheet} from 'react-native';
+import {Gesture, GestureDetector} from 'react-native-gesture-handler';
+import Animated, {clamp, runOnJS, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
+
+import {useTheme} from '@context/theme';
+import {changeOpacity} from '@utils/theme';
 
 type ProgressBarProps = {
     color: string;
     progress: number;
+    withCursor?: boolean;
     style?: StyleProp<ViewStyle>;
+    onSeek?: (position: number) => void;
 }
 
 const styles = StyleSheet.create({
     container: {
+        position: 'relative',
+        justifyContent: 'center',
+        paddingVertical: 10,
+    },
+    progressBarContainer: {
         height: 4,
         borderRadius: 2,
-        backgroundColor: 'rgba(255, 255, 255, 0.16)',
         overflow: 'hidden',
         width: '100%',
     },
     progressBar: {
         flex: 1,
     },
+    cursor: {
+        position: 'absolute',
+        borderRadius: 100,
+        width: 15,
+        height: 15,
+    },
 });
 
-const ProgressBar = ({color, progress, style}: ProgressBarProps) => {
-    const [width, setWidth] = useState(0);
+const START_CURSOR_VALUE = 0;
+const END_CURSOR_VALUE = 1;
 
+const ProgressBar = ({color, progress, withCursor, style, onSeek}: ProgressBarProps) => {
+    const theme = useTheme();
+    const widthValue = useSharedValue(0);
     const progressValue = useSharedValue(progress);
+    const isGestureActive = useSharedValue(false);
+
+    // eslint-disable-next-line new-cap
+    const panGesture = Gesture.Pan().
+        onStart(() => {
+            isGestureActive.value = true;
+        }).
+        onChange((e) => {
+            if (onSeek) {
+                const clampedSeekPosition = clamp(e.x / widthValue.value, START_CURSOR_VALUE, END_CURSOR_VALUE);
+                runOnJS(onSeek)(clampedSeekPosition);
+            }
+        }).
+        onEnd(() => {
+            isGestureActive.value = false;
+        }).
+        onFinalize(() => {
+            isGestureActive.value = false;
+        });
+
+    // eslint-disable-next-line new-cap
+    const tapGesture = Gesture.Tap().
+        onStart(() => {
+            isGestureActive.value = true;
+        }).
+        onEnd((e) => {
+            if (onSeek) {
+                const clampedSeekPosition = clamp(e.x / widthValue.value, START_CURSOR_VALUE, END_CURSOR_VALUE);
+                runOnJS(onSeek)(clampedSeekPosition);
+            }
+            isGestureActive.value = false;
+        }).
+        onFinalize(() => {
+            isGestureActive.value = false;
+        });
+
+    // eslint-disable-next-line new-cap
+    const composedGestures = Gesture.Race(tapGesture, panGesture);
 
     const progressAnimatedStyle = useAnimatedStyle(() => {
+        const translateX = ((progressValue.value * 0.5) - 0.5) * widthValue.value;
+        const scaleX = progressValue.value ? progressValue.value : 0.0001;
+
         return {
             transform: [
-                {translateX: withTiming(((progressValue.value * 0.5) - 0.5) * width, {duration: 200})},
-                {scaleX: withTiming(progressValue.value ? progressValue.value : 0.0001, {duration: 200})},
+                {translateX: isGestureActive.value ? translateX : withTiming(translateX, {duration: 200})},
+                {scaleX: isGestureActive.value ? scaleX : withTiming(scaleX, {duration: 200})},
             ],
+            width: widthValue.value,
+        };
+    });
+
+    const cursorAnimatedStyle = useAnimatedStyle(() => {
+        const cursorWidth = 15;
+        const leftPosition = (progressValue.value * widthValue.value) - (cursorWidth / 2);
+
+        return {
+            left: isGestureActive.value ? leftPosition : withTiming(leftPosition, {duration: 100}),
         };
-    }, [width]);
+    });
 
     useEffect(() => {
         progressValue.value = progress;
     }, [progress]);
 
     const onLayout = useCallback((e: LayoutChangeEvent) => {
-        setWidth(e.nativeEvent.layout.width);
+        widthValue.value = e.nativeEvent.layout.width;
     }, []);
 
     return (
-        <View
-            onLayout={onLayout}
-            style={[styles.container, style]}
-        >
-            <Animated.View
-                style={[
-                    styles.progressBar,
-                    {
-                        backgroundColor: color,
-                        width,
-                    },
-                    progressAnimatedStyle,
-                ]}
-            />
-        </View>
+        <GestureDetector gesture={composedGestures}>
+            <View
+                onTouchStart={(e) => e.stopPropagation()}
+                style={styles.container}
+            >
+                <View
+                    onLayout={onLayout}
+                    style={[
+                        styles.progressBarContainer,
+                        {
+                            backgroundColor: withCursor ? changeOpacity(theme.centerChannelColor, 0.2) : 'rgba(255, 255, 255, 0.16)',
+                        },
+                        style,
+                    ]}
+                >
+                    <Animated.View
+                        style={[
+                            styles.progressBar,
+                            {
+                                backgroundColor: color,
+                            },
+                            progressAnimatedStyle,
+                        ]}
+                    />
+                </View>
+
+                {withCursor &&
+                <Animated.View
+                    style={[
+                        styles.cursor,
+                        {
+                            backgroundColor: color,
+                        },
+                        cursorAnimatedStyle,
+                    ]}
+                />}
+            </View>
+        </GestureDetector>
     );
 };
 
diff --git a/app/hooks/files.ts b/app/hooks/files.ts
index 49da59e5122..b9bb92e6c79 100644
--- a/app/hooks/files.ts
+++ b/app/hooks/files.ts
@@ -1,14 +1,24 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {useEffect, useMemo, useState} from 'react';
+import {deleteAsync} from 'expo-file-system';
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {useIntl} from 'react-intl';
+import {Platform, StatusBar, type StatusBarStyle} from 'react-native';
+import FileViewer from 'react-native-file-viewer';
+import tinyColor from 'tinycolor2';
 
 import {getLocalFileInfo} from '@actions/local/file';
-import {buildFilePreviewUrl, buildFileUrl} from '@actions/remote/file';
+import {buildFilePreviewUrl, buildFileUrl, downloadFile} from '@actions/remote/file';
 import {useServerUrl} from '@context/server';
-import {isGif, isImage, isVideo} from '@utils/file';
+import {useTheme} from '@context/theme';
+import {alertDownloadFailed, alertFailedToOpenDocument} from '@utils/document';
+import {getFullErrorMessage, isErrorWithMessage} from '@utils/errors';
+import {fileExists, getLocalFilePathFromFile, isAudio, isGif, isImage, isVideo} from '@utils/file';
 import {getImageSize} from '@utils/gallery';
+import {logDebug} from '@utils/log';
 
+import type {ClientResponse, ProgressPromise} from '@mattermost/react-native-network-client';
 import type ChannelBookmarkModel from '@typings/database/models/servers/channel_bookmark';
 
 const getFileInfo = async (serverUrl: string, bookmarks: ChannelBookmarkModel[], publicLinkEnabled: boolean, cb: (files: FileInfo[]) => void) => {
@@ -55,6 +65,7 @@ export const useImageAttachments = (filesInfo: FileInfo[], publicLinkEnabled: bo
         return filesInfo.reduce(({images, nonImages}: {images: FileInfo[]; nonImages: FileInfo[]}, file) => {
             const imageFile = isImage(file);
             const videoFile = isVideo(file);
+            const audioFile = isAudio(file);
             if (imageFile || (videoFile && publicLinkEnabled)) {
                 let uri;
                 if (file.localPath) {
@@ -65,7 +76,7 @@ export const useImageAttachments = (filesInfo: FileInfo[], publicLinkEnabled: bo
                 images.push({...file, uri});
             } else {
                 let uri = file.uri;
-                if (videoFile) {
+                if (videoFile || audioFile) {
                     // fallback if public links are not enabled
                     uri = buildFileUrl(serverUrl, file.id!);
                 }
@@ -87,3 +98,137 @@ export const useChannelBookmarkFiles = (bookmarks: ChannelBookmarkModel[], publi
 
     return files;
 };
+
+export const useDownloadFileAndPreview = () => {
+    const serverUrl = useServerUrl();
+    const intl = useIntl();
+    const theme = useTheme();
+    const downloadTask = useRef<ProgressPromise<ClientResponse>>();
+
+    const [progress, setProgress] = useState<number>(0);
+
+    const [preview, setPreview] = useState(false);
+    const [downloading, setDownloading] = useState(false);
+    const [didCancel, setDidCancel] = useState(false);
+
+    const setStatusBarColor = useCallback((style: StatusBarStyle = 'light-content') => {
+        if (Platform.OS === 'ios') {
+            if (style) {
+                StatusBar.setBarStyle(style, true);
+            } else {
+                const headerColor = tinyColor(theme.sidebarHeaderBg);
+                let barStyle: StatusBarStyle = 'light-content';
+                if (headerColor.isLight() && Platform.OS === 'ios') {
+                    barStyle = 'dark-content';
+                }
+                StatusBar.setBarStyle(barStyle, true);
+            }
+        }
+    }, [theme.sidebarHeaderBg]);
+
+    const onDonePreviewingFile = useCallback(() => {
+        setProgress(0);
+        setDownloading(false);
+        setPreview(false);
+        setStatusBarColor();
+    }, [setStatusBarColor]);
+
+    const openDocument = useCallback(async (file: FileInfo) => {
+        if (!didCancel && !preview) {
+            let path = decodeURIComponent(file.localPath || '');
+            let exists = false;
+            if (path) {
+                exists = await fileExists(path);
+            }
+
+            if (!exists) {
+                path = getLocalFilePathFromFile(serverUrl, file);
+            }
+
+            setPreview(true);
+            setStatusBarColor('dark-content');
+            FileViewer.open(path!.replace('file://', ''), {
+                displayName: decodeURIComponent(file.name),
+                onDismiss: onDonePreviewingFile,
+                showOpenWithDialog: true,
+                showAppsSuggestions: true,
+            }).then(() => {
+                setDownloading(false);
+                setProgress(0);
+            }).catch(() => {
+                alertFailedToOpenDocument(file, intl);
+                onDonePreviewingFile();
+
+                if (path) {
+                    deleteAsync(path, {idempotent: true});
+                }
+            });
+        }
+    }, [didCancel, preview, serverUrl, intl, onDonePreviewingFile, setStatusBarColor]);
+
+    const downloadAndPreviewFile = useCallback(async (file: FileInfo) => {
+        setDidCancel(false);
+        let path;
+        let exists = false;
+
+        try {
+            path = decodeURIComponent(file.localPath || '');
+            if (path) {
+                exists = await fileExists(path);
+            }
+
+            if (!exists) {
+                path = getLocalFilePathFromFile(serverUrl, file);
+                exists = await fileExists(path);
+            }
+
+            if (exists) {
+                openDocument(file);
+            } else {
+                setDownloading(true);
+                downloadTask.current = downloadFile(serverUrl, file.id!, path!);
+                downloadTask.current?.progress?.(setProgress);
+
+                await downloadTask.current;
+                setProgress(1);
+                openDocument(file);
+            }
+        } catch (error) {
+            if (path) {
+                deleteAsync(path, {idempotent: true});
+            }
+            setDownloading(false);
+            setProgress(0);
+
+            if (!isErrorWithMessage(error) || error.message !== 'cancelled') {
+                logDebug('error on downloadAndPreviewFile', getFullErrorMessage(error));
+                alertDownloadFailed(intl);
+            }
+        }
+    }, [intl, openDocument, serverUrl]);
+
+    const toggleDownloadAndPreview = useCallback((file: FileInfo) => {
+        if (downloading && progress < 1) {
+            cancelDownload();
+        } else if (downloading) {
+            setProgress(0);
+            cancelDownload();
+            setDownloading(false);
+        } else {
+            downloadAndPreviewFile(file);
+        }
+    }, [downloading, progress, downloadAndPreviewFile]);
+
+    const cancelDownload = () => {
+        setDidCancel(true);
+        if (downloadTask.current?.cancel) {
+            downloadTask.current.cancel();
+        }
+    };
+
+    return {
+        downloading,
+        progress,
+        toggleDownloadAndPreview,
+    };
+};
diff --git a/app/utils/file/index.ts b/app/utils/file/index.ts
index ac495ecbfb1..21bdbb8f950 100644
--- a/app/utils/file/index.ts
+++ b/app/utils/file/index.ts
@@ -71,6 +71,11 @@ const SUPPORTED_VIDEO_FORMAT = Platform.select({
     android: ['video/3gpp', 'video/x-matroska', 'video/mp4', 'video/webm', 'video/quicktime'],
 });
 
+const SUPPORTED_AUDIO_FORMAT = Platform.select({
+    ios: ['audio/mp4', 'audio/mpeg', 'audio/wav', 'audio/x-aiff'],
+    android: ['audio/mp4', 'audio/mpeg', 'audio/ogg', 'audio/wav', 'audio/webm', 'audio/3gpp'],
+});
+
 const types: Record<string, string> = {};
 const extensions: Record<string, readonly string[]> = {};
 
@@ -308,6 +313,21 @@ export const isVideo = (file?: FileInfo | FileModel) => {
     return SUPPORTED_VIDEO_FORMAT!.includes(mime);
 };
 
+export const isAudio = (file?: FileInfo | FileModel) => {
+    if (!file) {
+        return false;
+    }
+
+    let mime = 'mime_type' in file ? file.mime_type : file.mimeType;
+    if (mime && mime.includes(';')) {
+        mime = mime.split(';')[0];
+    } else if (!mime && file?.name) {
+        mime = lookupMimeType(file.name);
+    }
+
+    return SUPPORTED_AUDIO_FORMAT!.includes(mime);
+};
+
 export function getFormattedFileSize(bytes: number): string {
     const fileSizes: Array<[string, number]> = [
         ['TB', 1024 * 1024 * 1024 * 1024],
diff --git a/assets/base/i18n/en.json b/assets/base/i18n/en.json
index 7741aebb8ea..07b81a3e4c2 100644
--- a/assets/base/i18n/en.json
+++ b/assets/base/i18n/en.json
@@ -82,6 +82,7 @@
   "apps.suggestion.no_static": "No matching options.",
   "apps.suggestion.no_suggestion": "No matching suggestions.",
   "archivedChannelMessage": "You are viewing an **archived channel**. New messages cannot be posted.",
+  "audio.loading_error": "Error loading audio.",
   "autocomplete_selector.unknown_channel": "Unknown channel",
   "browse_channels.archivedChannels": "Archived Channels",
   "browse_channels.dropdownTitle": "Show",