diff --git a/src/app.rs b/src/app.rs
index 2f8949ee..3bc20ceb 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -20,6 +20,7 @@ live_design! {
     use crate::shared::popup_list::PopupList;
     use crate::home::new_message_context_menu::*;
     use crate::shared::callout_tooltip::CalloutTooltip;
+    use crate::audio::audio_controller::AudioController;
 
 
     APP_TAB_COLOR = #344054
@@ -126,6 +127,7 @@ live_design! {
                             <PopupList> {}
                         }
                     }
+                    audio_controller = <AudioController> {}
 
                     // Context menus should be shown above other UI elements,
                     // but beneath the verification modal.
@@ -174,6 +176,7 @@ impl LiveRegister for App {
         crate::home::live_design(cx);
         crate::profile::live_design(cx);
         crate::login::live_design(cx);
+        crate::audio::live_design(cx);
     }
 }
 
diff --git a/src/audio/audio_controller.rs b/src/audio/audio_controller.rs
new file mode 100644
index 00000000..b2a0f4a6
--- /dev/null
+++ b/src/audio/audio_controller.rs
@@ -0,0 +1,306 @@
+//! Audio controller, which just manages audio playback.
+
+use std::{collections::{hash_map::Entry, HashMap}, sync::{Arc, LazyLock, Mutex, RwLock}};
+use makepad_widgets::*;
+use matrix_sdk_ui::timeline::TimelineEventItemId;
+
+use super::audio_message_ui::AudioMessageUIAction;
+
+type Audios = HashMap<TimelineEventItemId, (Audio, Arc<Mutex<usize>>, Arc<Mutex<bool>>)>;
+
+pub static AUDIO_SET: LazyLock<RwLock<Audios>> = LazyLock::new(||{
+    RwLock::new(HashMap::new())
+});
+
+live_design! {
+    use link::theme::*;
+    use link::shaders::*;
+    use link::widgets::*;
+
+    use crate::shared::styles::*;
+    use crate::shared::icon_button::*;
+
+    // width & height is 0 because it is just a template.
+    pub AudioController = {{AudioController}} {
+        width: 0., height: 0.,
+        visible: false,
+    }
+}
+
+#[derive(Debug, Clone, DefaultNone)]
+pub enum AudioControllerAction {
+    UiToPause(TimelineEventItemId),
+    None,
+}
+
+#[derive(Debug, Clone, Default)]
+pub struct Audio {
+    pub data: Arc<[u8]>,
+    pub channels: u16,
+    pub bit_depth: u16
+}
+
+#[derive(Debug, Clone, Default)]
+pub enum Selected {
+    Playing(TimelineEventItemId, usize),
+    Paused(TimelineEventItemId, usize),
+    #[default]
+    None,
+}
+
+#[derive(Live, LiveHook, Widget)]
+pub struct AudioController {
+    #[deref] view: View,
+    #[rust] audio: Arc<Mutex<Audio>>,
+    #[rust] selected: Arc<Mutex<Selected>>,
+}
+
+impl Drop for AudioController {
+    fn drop(&mut self) {
+        // todo!()
+    }
+}
+
+impl Widget for AudioController {
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        self.match_event(cx, event);
+        self.view.handle_event(cx, event, scope);
+    }
+
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+        self.view.draw_walk(cx, scope, walk)
+    }
+}
+
+impl MatchEvent for AudioController {
+    fn handle_startup(&mut self, cx: &mut Cx) {
+        let audio = self.audio.clone();
+        let selected = self.selected.clone();
+        cx.audio_output(0, move |_audio_info, output_buffer|{
+            let mut selected_mg = selected.lock().unwrap();
+            let audio_mg = audio.lock().unwrap();
+            if let Selected::Playing(ref id, mut pos) = selected_mg.clone() {
+                let audio = audio_mg.clone();
+                match (audio.channels, audio.bit_depth) {
+                    (2, 16) => {
+                        // stereo 16bit
+                        output_buffer.zero();
+                        let (left, right) = output_buffer.stereo_mut();
+                        let mut i = 0;
+                        while i < left.len() {
+                            let left_i16 = i16::from_le_bytes([audio.data[pos], audio.data[pos + 1]]);
+                            let right_i16 = i16::from_le_bytes([audio.data[pos + 2], audio.data[pos + 3]]);
+
+                            left[i] = left_i16 as f32 / i16::MAX as f32;
+                            right[i] = right_i16 as f32 / i16::MAX as f32;
+                            pos += 4;
+                            i += 1;
+                            *selected_mg = Selected::Playing(id.clone(), pos);
+                        }
+                    }
+                    (2, 24) => {
+                        // stereo 24bit
+                        output_buffer.zero();
+                            let (left, right) = output_buffer.stereo_mut();
+                            let mut i = 0;
+                            while i < left.len() {
+                                let left_i32 = i32::from_le_bytes([0, audio.data[pos], audio.data[pos + 1], audio.data[pos + 2]]);
+                                let right_i32 = i32::from_le_bytes([0, audio.data[pos + 3], audio.data[pos + 4], audio.data[pos + 5]]);
+
+                                left[i] = left_i32 as f32 / i32::MAX as f32;
+                                right[i] = right_i32 as f32 / i32::MAX as f32;
+                                pos += 6;
+                                i += 1;
+                                *selected_mg = Selected::Playing(id.clone(), pos);
+                            }
+                    }
+                    (2, 32) => {
+                        // stereo 24bit
+                        output_buffer.zero();
+                            let (left, right) = output_buffer.stereo_mut();
+                            let mut i = 0;
+                            while i < left.len() {
+                                let left_i32 = i32::from_le_bytes([audio.data[pos], audio.data[pos + 1], audio.data[pos + 2], audio.data[pos + 3]]);
+                                let right_i32 = i32::from_le_bytes([audio.data[pos + 4], audio.data[pos + 5], audio.data[pos + 6], audio.data[pos + 7]]);
+
+                                left[i] = left_i32 as f32 / i32::MAX as f32;
+                                right[i] = right_i32 as f32 / i32::MAX as f32;
+                                pos += 8;
+                                i += 1;
+                                *selected_mg = Selected::Playing(id.clone(), pos);
+                            }
+                    }
+                    _ => { }
+                }
+                if pos > audio.data.len() {
+                    *selected_mg = Selected::None;
+                }
+            } else {
+                output_buffer.zero();
+            }
+        });
+    }
+
+    fn handle_audio_devices(&mut self, cx: &mut Cx, e: &AudioDevicesEvent) {
+        cx.use_audio_outputs(&e.default_output())
+    }
+    fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
+        for action in actions {
+            match action.downcast_ref() {
+                Some(AudioMessageUIAction::Play(new_id)) => {
+                    let selected =self.selected.clone().lock().unwrap().clone();
+                    match selected {
+                        Selected::Playing(current_id, current_pos) => {
+                            if current_id != new_id.clone() {
+                                cx.action(AudioControllerAction::UiToPause(current_id.clone()));
+                                if let Some((_audio, old_pos, old_playing_status)) = AUDIO_SET.read().unwrap().get(&current_id) {
+                                    *old_pos.lock().unwrap() = current_pos;
+                                    *old_playing_status.lock().unwrap() = false;
+                                }
+                                if let Some((audio, new_pos, new_playing_status)) = AUDIO_SET.read().unwrap().get(new_id) {
+                                    *self.audio.lock().unwrap() = audio.clone();
+                                    let new_pos_mg = new_pos.lock().unwrap();
+                                    *new_playing_status.lock().unwrap() = true;
+                                    *self.selected.lock().unwrap() = Selected::Playing(new_id.clone(), *new_pos_mg);
+                                }
+                            }
+                        }
+                        Selected::Paused(current_id, current_pos) => {
+                            if &current_id == new_id {
+                                *self.selected.lock().unwrap() = Selected::Playing(new_id.clone(), current_pos);
+                            } else {
+                                if let Some((_audio, old_pos, old_playing_status)) = AUDIO_SET.read().unwrap().get(&current_id) {
+                                    *old_playing_status.lock().unwrap() = false;
+                                    *old_pos.lock().unwrap() = current_pos;
+                                }
+
+                                if let Some((audio, new_pos, new_playing_status)) = AUDIO_SET.read().unwrap().get(new_id) {
+                                    *self.audio.lock().unwrap() = audio.clone();
+                                    let new_pos = *new_pos.lock().unwrap();
+                                    *new_playing_status.lock().unwrap() = true;
+                                    *self.selected.lock().unwrap() = Selected::Playing(new_id.clone(), new_pos);
+                                }
+                            }
+                        }
+                        Selected::None => {
+                            if let Some((audio, _new_pos, new_playing_status)) = AUDIO_SET.read().unwrap().get(new_id) {
+                                *new_playing_status.lock().unwrap() = true;
+                                *self.audio.lock().unwrap() = audio.clone();
+                                *self.selected.lock().unwrap() = Selected::Playing(new_id.clone(), 44);
+                            }
+                        }
+                    }
+                }
+                Some(AudioMessageUIAction::Pause(new_id)) => {
+                    let selected =self.selected.clone().lock().unwrap().clone();
+                    if let Selected::Playing(current_id, current_pos) = selected {
+                        if &current_id == new_id {
+                            if let Some((_audio, old_pos, old_playing_status)) = AUDIO_SET.write().unwrap().get(&current_id) {
+                                *old_playing_status.lock().unwrap() = false;
+                                *old_pos.lock().unwrap() = current_pos;
+                            }
+                            *self.selected.lock().unwrap() = Selected::Paused(new_id.clone(), current_pos);
+                        }
+                    }
+                }
+                Some(AudioMessageUIAction::Stop(new_id)) => {
+                    let selected =self.selected.clone().lock().unwrap().clone();
+                    match selected {
+                        Selected::Playing(current_id, _current_pos) => {
+                            if &current_id == new_id {
+                                if let Some((_audio, old_pos, old_playing_status)) = AUDIO_SET.write().unwrap().get(&current_id) {
+                                    *old_playing_status.lock().unwrap() = false;
+                                    *old_pos.lock().unwrap() = 44;
+                                }
+                                *self.selected.lock().unwrap() = Selected::None;
+                            }
+                        }
+                        Selected::Paused(current_id, _current_pos) => {
+                            if &current_id == new_id {
+                                if let Some((_audio, old_pos, old_playing_status)) = AUDIO_SET.write().unwrap().get(&current_id) {
+                                    *old_playing_status.lock().unwrap() = false;
+                                    *old_pos.lock().unwrap() = 44;
+                                }
+                                *self.selected.lock().unwrap() = Selected::None;
+                            }
+                        }
+                        _ => { }
+                    }
+                }
+                _ => { }
+            }
+        }
+    }
+}
+
+pub fn insert_new_audio_or_get(timeline_audio_event_item_id: &TimelineEventItemId, data: Arc<[u8]>, channels: u16, bit_depth: u16) -> (Audio, Arc<Mutex<usize>>, Arc<Mutex<bool>>) {
+    match AUDIO_SET.write().unwrap().entry(timeline_audio_event_item_id.clone()) {
+        Entry::Vacant(v) => {
+            let audio = Audio {
+                data,
+                channels,
+                bit_depth
+            };
+            let pos = Arc::new(Mutex::new(44));
+            let is_playing = Arc::new(Mutex::new(false));
+            v.insert((audio, pos, is_playing)).clone()
+        }
+        Entry::Occupied(o) => {
+            o.get().clone()
+        }
+    }
+}
+
+
+pub fn parse_wav(data: &[u8]) -> Option<(u16, u16)> {
+    // Check that the data length is sufficient, at least 44 bytes are required (standard WAV file header size)
+    if data.len() < 44 {
+        log!("Insufficient data length");
+        return None;
+    }
+
+    // Check if the first 4 bytes are 'RIFF'.
+    if &data[0..4] != b"RIFF" {
+        log!("Not a `RIFF` file");
+        return None;
+    }
+
+    // Check if bytes 8-11 are 'WAVE'.
+    if &data[8..12] != b"WAVE" {
+        log!("Not a `WAVE` file");
+        return None;
+    }
+
+    // Check if bytes 12-15 are 'fmt'.
+    if &data[12..16] != b"fmt " {
+        log!("`fmt` block not found");
+        return None;
+    }
+
+    // Read the size of the fmt block (bytes 16-19)
+    let fmt_size = u32::from_le_bytes([data[16], data[17], data[18], data[19]]);
+    if fmt_size < 16 {
+        log!("`fmt` block size too small");
+        return None;
+    }
+
+    // Read the audio format (bytes 20-21) and make sure it's PCM (value 1)
+    let audio_format = u16::from_le_bytes([data[20], data[21]]);
+    if audio_format != 1 {
+        log!("Not a `PCM` file");
+        return None;
+    }
+
+    // Extract the number of channels (bytes 22-23)
+    let channels = u16::from_le_bytes([data[22], data[23]]);
+
+    // Extract sampling rate (bytes 24-27)
+    // let sample_rate = u32::from_le_bytes([data[24], data[25], data[26], data[27]]);
+
+    // Extract bit depth (bytes 34-35)
+    let bit_depth = u16::from_le_bytes([data[34], data[35]]);
+
+    // Return the parsing result
+    // Some((channels, sample_rate, bits_per_sample))
+    Some((channels, bit_depth))
+}
diff --git a/src/audio/audio_message_ui.rs b/src/audio/audio_message_ui.rs
new file mode 100644
index 00000000..35915c4a
--- /dev/null
+++ b/src/audio/audio_message_ui.rs
@@ -0,0 +1,220 @@
+//! Audio message in timeline.
+//! It just manages UI.
+//! Audio playback is in `audio_controller.rs`.
+
+use makepad_widgets::*;
+use matrix_sdk_ui::timeline::TimelineEventItemId;
+
+use super::audio_controller::AudioControllerAction;
+
+live_design! {
+    use link::theme::*;
+    use link::shaders::*;
+    use link::widgets::*;
+
+    use crate::shared::styles::*;
+    use crate::shared::icon_button::*;
+
+    pub AudioMessageUI = {{AudioMessageUI}} {
+        width: Fill, height: Fit,
+        flow: Down,
+
+        fetching_info = <Label> {
+            text: "[Fetching audio info...]"
+            draw_text: {
+                color: #0
+                text_style: {
+                    font_size: 11.
+                }
+            }
+        }
+
+        fetching_data = <View> {
+            height: 35
+            <Label> {
+                text: "[Fetching audio data...]"
+                draw_text: {
+                    color: #0
+                    text_style: {
+                        font_size: 11.
+                    }
+                }
+            }
+        }
+
+        v = <View> {
+            height: 35,
+            flow: Right,
+            spacing: 20,
+            visible: false
+
+            button = <Button> {
+                width: 35, height: Fill,
+                draw_bg: {
+                    // Define a color here
+                    instance playing: 0.
+                    instance color: #1F1F1F
+                    fn pixel(self) -> vec4 {
+                        let sdf = Sdf2d::viewport(self.pos * self.rect_size);
+                        if self.playing < 0.1 {
+                            sdf.line_to(self.rect_size.x, self.rect_size.y / 2.0);
+                            sdf.line_to(0., self.rect_size.y);
+                            sdf.close_path();
+                            sdf.fill(self.color);
+                        } else {
+                            let length = self.rect_size.x / 3.0;
+                            let height = self.rect_size.y;
+                            sdf.rect(0.0, 0.0, length, height);
+                            sdf.rect(length * 2.0, 0.0, length, height);
+                            sdf.fill(self.color);
+                        }
+                        return sdf.result
+                    }
+                }
+            }
+            <View> {
+                width: 35, height: Fill,
+                align: {x: 0.5, y: 0.5}
+                stop_button = <Button> {
+                    width: 32., height: 32.,
+                    draw_bg: {
+                        instance color: #1F1F1F
+                        fn pixel(self) -> vec4 {
+                            return self.color;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+#[derive(Debug, Clone, DefaultNone)]
+pub enum AudioMessageUIAction {
+    Play(TimelineEventItemId),
+    Stop(TimelineEventItemId),
+    Pause(TimelineEventItemId),
+    None
+}
+
+#[derive(Live, Widget, LiveHook)]
+pub struct AudioMessageUI {
+    #[deref] view: View,
+    #[rust(false)] is_playing: bool,
+    #[rust] timeline_audio_event_item_id: Option<TimelineEventItemId>,
+}
+
+impl Drop for AudioMessageUI {
+    fn drop(&mut self) {
+        // todo!()
+    }
+}
+
+
+impl Widget for AudioMessageUI {
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        self.match_event(cx, event);
+        self.view.handle_event(cx, event, scope);
+    }
+
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+        self.view.draw_walk(cx, scope, walk)
+    }
+}
+
+impl MatchEvent for AudioMessageUI {
+    fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
+        let button = self.view.button(id!(v.button));
+        let stop_button = self.view.button(id!(v.stop_button));
+
+        if button.clicked(actions) {
+            let is_playing = if self.is_playing {
+                if let Some(timeline_audio_event_item_id) = self.timeline_audio_event_item_id.as_ref() {
+                    cx.action(AudioMessageUIAction::Pause(timeline_audio_event_item_id.clone()));
+                    self.is_playing = !self.is_playing;
+                    0.
+                } else {
+                    1.
+                }
+            } else {
+                if let Some(timeline_audio_event_item_id) = self.timeline_audio_event_item_id.as_ref() {
+                    cx.action(AudioMessageUIAction::Play(timeline_audio_event_item_id.clone()));
+                    self.is_playing = !self.is_playing;
+                    1.
+                } else {
+                   0.
+                }
+            };
+
+
+            button.apply_over(cx, live! {
+                draw_bg: {
+                    playing: (is_playing)
+                }
+            });
+        }
+
+        if stop_button.clicked(actions) {
+            if let Some(timeline_audio_event_item_id) = self.timeline_audio_event_item_id.as_ref() {
+                cx.action(AudioMessageUIAction::Stop(timeline_audio_event_item_id.clone()));
+                self.is_playing = false;
+                button.apply_over(cx, live! {
+                    draw_bg: {
+                        playing: 0.
+                    }
+                });
+            }
+        }
+        for action in actions {
+            if let Some(AudioControllerAction::UiToPause(id1)) = action.downcast_ref() {
+                if self.timeline_audio_event_item_id.as_ref().is_some_and(|id2|{ id1 == id2 })
+                {
+                    cx.action(AudioMessageUIAction::Pause(id1.clone()));
+                    self.is_playing = false;
+                    button.apply_over(cx, live! {
+                        draw_bg: {
+                            playing: 0.
+                        }
+                    });
+                }
+            }
+        }
+    }
+}
+
+impl AudioMessageUI {
+    fn mark_fully_fetched(&mut self, cx: &mut Cx) {
+        self.view(id!(fetching_data)).set_visible(cx, false);
+        self.view(id!(v)).set_visible(cx, true);
+    }
+    fn set_id(&mut self, id: &TimelineEventItemId) {
+        self.timeline_audio_event_item_id = Some(id.clone());
+        log!("AudioMessageUI set_id: {:?}", id);
+    }
+    fn change_play_status(&mut self, cx: &mut Cx, new_playing_status: bool) {
+        if new_playing_status {
+            self.is_playing = new_playing_status;
+            let playing = if new_playing_status { 1. } else { 0. };
+            self.view.button(id!(v.button)).apply_over(cx, live! {
+                draw_bg: {
+                    playing: (playing)
+                }
+            });
+        }
+    }
+}
+
+impl AudioMessageUIRef {
+    pub fn mark_fully_fetched(&self, cx: &mut Cx) {
+        let Some(mut inner) = self.borrow_mut() else { return };
+        inner.mark_fully_fetched(cx);
+    }
+    pub fn set_id(&self, id: &TimelineEventItemId) {
+        let Some(mut inner) = self.borrow_mut() else { return };
+        inner.set_id(id);
+    }
+    pub fn change_play_status(&self, cx: &mut Cx, new_playing_status: bool) {
+        let Some(mut inner) = self.borrow_mut() else { return };
+        inner.change_play_status(cx, new_playing_status);
+    }
+}
diff --git a/src/audio/mod.rs b/src/audio/mod.rs
new file mode 100644
index 00000000..68f56dbc
--- /dev/null
+++ b/src/audio/mod.rs
@@ -0,0 +1,9 @@
+use makepad_widgets::Cx;
+
+pub mod audio_message_ui;
+pub mod audio_controller;
+
+pub fn live_design(cx: &mut Cx) {
+    audio_message_ui::live_design(cx);
+    audio_controller::live_design(cx);
+}
diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 914ac9e0..9e631a33 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -7,8 +7,7 @@ use bytesize::ByteSize;
 use imbl::Vector;
 use makepad_widgets::{image_cache::ImageBuffer, *};
 use matrix_sdk::{
-    room::RoomMember,
-    ruma::{
+    media::MediaFormat, room::RoomMember, ruma::{
         events::{receipt::Receipt, room::{
             message::{
                 AudioMessageEventContent, CustomEventContent, EmoteMessageEventContent, FileMessageEventContent, FormattedBody, ImageMessageEventContent, KeyVerificationRequestEventContent, LocationMessageEventContent, MessageFormat, MessageType, NoticeMessageEventContent, RoomMessageEventContent, ServerNoticeMessageEventContent, TextMessageEventContent, VideoMessageEventContent
@@ -22,7 +21,7 @@ use matrix_sdk_ui::timeline::{
 use robius_location::Coordinates;
 
 use crate::{
-    avatar_cache, event_preview::{body_of_timeline_item, text_preview_of_member_profile_change, text_preview_of_other_state, text_preview_of_redacted_message, text_preview_of_room_membership_change, text_preview_of_timeline_item}, home::loading_pane::{LoadingPaneState, LoadingPaneWidgetExt}, location::{get_latest_location, init_location_subscriber, request_location_update, LocationAction, LocationRequest, LocationUpdate}, media_cache::{MediaCache, MediaCacheEntry}, profile::{
+    audio::{audio_controller::{insert_new_audio_or_get, parse_wav}, audio_message_ui::{AudioMessageUIRef, AudioMessageUIWidgetRefExt}}, avatar_cache, event_preview::{body_of_timeline_item, text_preview_of_member_profile_change, text_preview_of_other_state, text_preview_of_redacted_message, text_preview_of_room_membership_change, text_preview_of_timeline_item}, home::loading_pane::{LoadingPaneState, LoadingPaneWidgetExt}, location::{get_latest_location, init_location_subscriber, request_location_update, LocationAction, LocationRequest, LocationUpdate}, media_cache::{MediaCache, MediaCacheEntry}, profile::{
         user_profile::{AvatarState, ShowUserProfileAction, UserProfile, UserProfileAndRoomId, UserProfilePaneInfo, UserProfileSlidingPaneRef, UserProfileSlidingPaneWidgetExt},
         user_profile_cache,
     }, shared::{
@@ -54,6 +53,7 @@ live_design! {
     use crate::shared::search_bar::SearchBar;
     use crate::shared::avatar::Avatar;
     use crate::shared::text_or_image::TextOrImage;
+    use crate::audio::audio_message_ui::AudioMessageUI;
     use crate::shared::html_or_plaintext::*;
     use crate::shared::icon_button::*;
     use crate::home::room_read_receipt::*;
@@ -377,7 +377,6 @@ live_design! {
                     reaction_list = <ReactionList> { }
                     avatar_row = <AvatarRow> {}
                 }
-
             }
         }
     }
@@ -418,6 +417,37 @@ live_design! {
             }
         }
     }
+    AudioMessage = <Message> {
+        body = {
+            content = {
+                width: Fill,
+                height: Fit
+                padding: { left: 10.0 }
+                message = <AudioMessageUI> {}
+                v = <View> {
+                    width: Fill,
+                    height: Fit,
+                    flow: Right,
+                    reaction_list = <ReactionList> { }
+                    avatar_row = <AvatarRow> {}
+                }
+            }
+        }
+    }
+
+    CondensedAudioMessage = <CondensedMessage> {
+        body = {
+            content = {
+                message = <AudioMessageUI> {}
+                <View> {
+                    width: Fill,
+                    height: Fit
+                    reaction_list = <ReactionList> {}
+                    avatar_row = <AvatarRow> {}
+                }
+            }
+        }
+    }
 
     // The view used for each static image-based message event in a room's timeline.
     // This excludes stickers and other animated GIFs, video clips, audio clips, etc.
@@ -436,10 +466,10 @@ live_design! {
                     avatar_row = <AvatarRow> {}
                 }
             }
-
         }
     }
 
+
     // The view used for a condensed image message that came right after another message
     // from the same sender, and thus doesn't need to display the sender's profile again.
     // This excludes stickers and other animated GIFs, video clips, audio clips, etc.
@@ -607,8 +637,13 @@ live_design! {
             // Below, we must place all of the possible templates (views) that can be used in the portal list.
             Message = <Message> {}
             CondensedMessage = <CondensedMessage> {}
+
             ImageMessage = <ImageMessage> {}
             CondensedImageMessage = <CondensedImageMessage> {}
+
+            AudioMessage = <AudioMessage> {}
+            CondensedAudioMessage = <CondensedAudioMessage> {}
+
             SmallStateEvent = <SmallStateEvent> {}
             Empty = <Empty> {}
             DateDivider = <DateDivider> {}
@@ -3247,19 +3282,23 @@ fn populate_message_view(
         }
         MessageOrStickerType::Audio(audio) => {
             has_html_body = audio.formatted.as_ref().is_some_and(|f| f.format == MessageFormat::Html);
+
             let template = if use_compact_view {
-                live_id!(CondensedMessage)
+                live_id!(CondensedAudioMessage)
             } else {
-                live_id!(Message)
+                live_id!(AudioMessage)
             };
+
             let (item, existed) = list.item_with_existed(cx, item_id, template);
             if existed && item_drawn_status.content_drawn {
                 (item, true)
             } else {
                 new_drawn_status.content_drawn = populate_audio_message_content(
                     cx,
-                    &item.html_or_plaintext(id!(content.message)),
+                    &item.audio_message_ui(id!(content.message)),
                     audio,
+                    event_tl_item,
+                    media_cache
                 );
                 (item, false)
             }
@@ -3622,9 +3661,13 @@ fn populate_file_message_content(
 /// Returns whether the audio message content was fully drawn.
 fn populate_audio_message_content(
     cx: &mut Cx,
-    message_content_widget: &HtmlOrPlaintextRef,
+    audio_message_ui: &AudioMessageUIRef,
     audio: &AudioMessageEventContent,
+    event_timeline_item: &EventTimelineItem,
+    media_cache: &mut MediaCache
 ) -> bool {
+    let event_timeline_item_id = event_timeline_item.identifier();
+    let mut fully_drawn = false;
     // Display the file name, human-readable size, caption, and a button to download it.
     let filename = audio.filename();
     let (duration, mime, size) = audio
@@ -3632,14 +3675,14 @@ fn populate_audio_message_content(
         .as_ref()
         .map(|info| (
             info.duration
-                .map(|d| format!("  {:.2} sec,", d.as_secs_f64()))
+                .map(|d| format!("  {:.2} sec, ", d.as_secs_f64()))
                 .unwrap_or_default(),
             info.mimetype
                 .as_ref()
-                .map(|m| format!("  {m},"))
+                .map(|m| format!("{m}, "))
                 .unwrap_or_default(),
             info.size
-                .map(|bytes| format!("  ({}),", ByteSize::b(bytes.into())))
+                .map(|bytes| format!("({})", ByteSize::b(bytes.into())))
                 .unwrap_or_default(),
         ))
         .unwrap_or_default();
@@ -3647,14 +3690,35 @@ fn populate_audio_message_content(
         .map(|fb| format!("<br><i>{}</i>", fb.body))
         .or_else(|| audio.caption().map(|c| format!("<br><i>{c}</i>")))
         .unwrap_or_default();
-
-    // TODO: add an audio to play the audio file
-
-    message_content_widget.show_html(
-        cx,
-        format!("Audio: <b>{filename}</b>{mime}{duration}{size}{caption}<br> → <i>Audio playback not yet supported.</i>"),
-    );
-    true
+    audio_message_ui.label(id!(fetching_info)).set_text(cx, &format!("{filename}\n{duration} {mime} {size} {caption}"));
+
+    match audio.source.clone() {
+        MediaSource::Plain(mxc_uri) => {
+            match media_cache.try_get_media_or_fetch(mxc_uri, MediaFormat::File) {
+                (MediaCacheEntry::Loaded(audio_data), _) => {
+                    parse_wav(&audio_data).inspect(|(channels, bit_depth)|{
+                        let (_audio, _pos, is_playing) =
+                            insert_new_audio_or_get(&event_timeline_item_id, audio_data, *channels, *bit_depth);
+                        audio_message_ui.mark_fully_fetched(cx);
+                        audio_message_ui.set_id(&event_timeline_item_id);
+                        let is_playing_mg = is_playing.lock().unwrap();
+                        audio_message_ui.change_play_status(cx, *is_playing_mg);
+                    });
+                    fully_drawn = true;
+                },
+                (MediaCacheEntry::Failed, _) => {
+                    fully_drawn = true;
+                }
+                _ => { }
+            }
+        }
+        MediaSource::Encrypted(_e) => {
+            log!("Encrypted audio media is not supported.");
+            audio_message_ui.label(id!(fetching_info)).set_text(cx, "Encrypted audio media is not supported.");
+            fully_drawn = true;
+        }
+    }
+    fully_drawn
 }
 
 
diff --git a/src/lib.rs b/src/lib.rs
index 1c45c38a..9929c522 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -5,6 +5,7 @@ use robius_directories::ProjectDirs;
 pub use makepad_widgets;
 pub mod app;
 pub mod persistent_state;
+pub mod audio;
 
 /// Login screen
 pub mod login;
@@ -20,7 +21,6 @@ pub mod shared;
 mod event_preview;
 mod room;
 
-
 // Matrix stuff
 pub mod sliding_sync;
 pub mod avatar_cache;
diff --git a/src/shared/icon_button.rs b/src/shared/icon_button.rs
index 0b2b1583..104f9152 100644
--- a/src/shared/icon_button.rs
+++ b/src/shared/icon_button.rs
@@ -142,4 +142,24 @@ live_design! {
             }
         }
     }
+
+
+    pub RobrixButton = <Button> {
+        width: Fit, height: Fit,
+        spacing: 10,
+        padding: {top: 10, bottom: 10, left: 8, right: 15}
+        align: {x: 0.0, y: 0.5}
+
+        draw_bg: {
+            instance color: (COLOR_PRIMARY)
+        }
+
+        draw_text: {
+            text_style: <REGULAR_TEXT>{font_size: 10},
+            color: #000
+            fn get_color(self) -> vec4 {
+                return self.color;
+            }
+        }
+    }
 }
diff --git a/src/sliding_sync.rs b/src/sliding_sync.rs
index cadc91e0..172cfa64 100644
--- a/src/sliding_sync.rs
+++ b/src/sliding_sync.rs
@@ -215,7 +215,6 @@ pub type OnMediaFetchedFn = fn(
     Option<crossbeam_channel::Sender<TimelineUpdate>>,
 );
 
-
 /// The set of requests for async work that can be made to the worker thread.
 pub enum MatrixRequest {
     /// Request from the login screen to log in with the given credentials.