Add audio files and audio embeds

Frontend/src/Components/PreviewPane.jsx

@@ -88,6 +88,10 @@ const LinkedFileTypeMap = {
   ".webm": "video",
   ".mov": "video",
   ".mkv": "video",
+  ".flac": "audio",
+  ".ogg": "audio",
+  ".mp3": "audio",
+  ".wav": "audio",
 };
 
 function ClassifyLinkedFile(LinkedPath) {
@@ -370,6 +374,22 @@ export default function PreviewPane({
     );
   }
 
+  if (FileType === "audio") {
+    return (
+      <div className="PreviewMedia">
+        <div className={ToolbarClass}>
+          <a className="DownloadButton" href={GetDownloadUrl(RootName, FilePath)}>
+            Download
+          </a>
+        </div>
+        <div className="PreviewAudio">
+          <div className="PreviewAudioName">{FilePath.split("/").pop()}</div>
+          <audio controls src={GetFileUrl(RootName, FilePath)} />
+        </div>
+      </div>
+    );
+  }
+
   if (FileType === "html" && !IsEditing) {
     return (
       <div className="PreviewFrame">

Frontend/src/Styles/Theme.css

@@ -968,6 +968,25 @@ img,
   max-height: 100%;
 }
 
+.PreviewAudio {
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 24px;
+}
+
+.PreviewAudioName {
+  color: var(--Purple);
+}
+
+.PreviewAudio audio {
+  width: min(480px, 90vw);
+  accent-color: var(--Purple);
+  color-scheme: dark; /* the browser's dark controls, not a white bar */
+}
+
 .PreviewFrame iframe {
   flex: 1;
   border: none;