content, css, replacer: <audio> postprocessing

3 files changed, 64 insertions, 16 deletions

diff --git a/src/content/dependencies/transformContent.js b/src/content/dependencies/transformContent.js
index d40f15f2..0904069f 100644
--- a/src/content/dependencies/transformContent.js
+++ b/src/content/dependencies/transformContent.js
@@ -382,15 +382,13 @@ export default {
                 ? to('media.path', node.src.slice('media/'.length))
                 : node.src);
 
-            const {
-              width,
-              height,
-              align,
-              pixelate,
-            } = node;
+            const {width, height, align, pixelate} = node;
 
             const content =
               html.tag('div', {class: 'content-video-container'},
+                align === 'center' &&
+                  {class: 'align-center'},
+
                 html.tag('video',
                   src && {src},
                   width && {width},
@@ -398,16 +396,45 @@ export default {
 
                   {controls: true},
 
-                  align === 'center' &&
-                    {class: 'align-center'},
-
                   pixelate &&
                     {class: 'pixelate'}));
 
             return {
               type: 'processed-video',
-              data:
-                content,
+              data: content,
+            };
+          }
+
+          case 'audio': {
+            const src =
+              (node.src.startsWith('media/')
+                ? to('media.path', node.src.slice('media/'.length))
+                : node.src);
+
+            const {align, inline} = node;
+
+            const audio =
+              html.tag('audio',
+                src && {src},
+
+                align === 'center' &&
+                inline &&
+                  {class: 'align-center'},
+
+                {controls: true});
+
+            const content =
+              (inline
+                ? audio
+                : html.tag('div', {class: 'content-audio-container'},
+                    align === 'center' &&
+                      {class: 'align-center'},
+
+                    audio));
+
+            return {
+              type: 'processed-audio',
+              data: content,
             };
           }
 
@@ -604,7 +631,8 @@ export default {
         if (
           (attributes.get('data-type') === 'processed-image' &&
           !attributes.get('data-inline')) ||
-          attributes.get('data-type') === 'processed-video'
+          attributes.get('data-type') === 'processed-video' ||
+          attributes.get('data-type') === 'processed-audio'
         ) {
           tags[tags.length - 1] = tags[tags.length - 1].replace(/<p>$/, '');
           deleteParagraph = true;
diff --git a/src/replacer.js b/src/replacer.js
index cbe6b587..32657a5a 100644
--- a/src/replacer.js
+++ b/src/replacer.js
@@ -655,6 +655,18 @@ export function postprocessVideos(inputNodes) {
     });
 }
 
+export function postprocessAudios(inputNodes) {
+  return postprocessHTMLTags(inputNodes, 'audio',
+    (attributes, {inline}) => {
+      const node = {type: 'audio'};
+
+      node.src = attributes.get('src');
+      node.inline = attributes.get('inline') ?? inline;
+
+      return node;
+    });
+}
+
 export function postprocessHeadings(inputNodes) {
   const outputNodes = [];
 
@@ -817,6 +829,7 @@ export function parseInput(input) {
     output = postprocessComments(output);
     output = postprocessImages(output);
     output = postprocessVideos(output);
+    output = postprocessAudios(output);
     output = postprocessHeadings(output);
     output = postprocessSummaries(output);
     output = postprocessExternalLinks(output);
diff --git a/src/static/css/site.css b/src/static/css/site.css
index 207b7c6f..d1d7f5f6 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -1545,13 +1545,14 @@ p.content-heading:has(+ .commentary-entry-heading.dated) {
 }
 
 .content-image-container.align-center,
-.content-video-container.align-center {
+.content-video-container.align-center,
+.content-audio-container.align-center {
   text-align: center;
   margin-top: 1.5em;
   margin-bottom: 1.5em;
 }
 
-a.align-center, img.align-center {
+a.align-center, img.align-center, audio.align-center {
   display: block;
   margin-left: auto;
   margin-right: auto;
@@ -2245,8 +2246,9 @@ html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dt:las
   color: white;
 }
 
-/* Videos (in content) get a lite version of image-container. */
-.content-video-container {
+/* Videos and audios (in content) get a lite version of image-container. */
+.content-video-container,
+.content-audio-container {
   width: min-content;
   background-color: var(--dark-color);
   border: 2px solid var(--primary-color);
@@ -2254,6 +2256,11 @@ html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dt:las
   padding: 5px;
 }
 
+.content-video-container video,
+.content-audio-container audio {
+  display: block;
+}
+
 .image-text-area {
   position: absolute;
   top: 0;