diff --git a/src/Common.css b/src/Common.css
index d78d138..d122ab5 100644
--- a/src/Common.css
+++ b/src/Common.css
@@ -58,7 +58,8 @@
 }
 
 .ext-img,
-.ext-video {
+.ext-video,
+.ext-audio {
   max-width: 100%;
   max-height: 2000px;
   display: block;
diff --git a/src/Common.js b/src/Common.js
index 2f88870..b2b36e8 100644
--- a/src/Common.js
+++ b/src/Common.js
@@ -35,6 +35,18 @@ function is_video(s) {
   }
 }
 
+function is_audio(s) {
+  try {
+    let url = new URL(s);
+    return (
+      url.pathname.endsWith('.mp3') ||
+      (url.searchParams.get('filetype') || '').startsWith('audio/')
+    );
+  } catch (e) {
+    return false;
+  }
+}
+
 export function build_highlight_re(
   txt,
   split = ' ',
@@ -185,7 +197,10 @@ export class HighlightedMarkdown extends Component {
                           <span className="icon icon-new-tab" />
                         </a>
                         {is_video(p) && (
-                          <video className="ext-video" src={p} controls loop />
+                          <video className="ext-video" src={p} controls />
+                        )}
+                        {is_audio(p) && (
+                          <audio className="ext-audio" src={p} controls />
                         )}
                       </>
                     ) : rule === 'pid' ? (