ampproject
diff --git a/‎packages/optimizer/lib/transformers/ServerSideRendering.js
Lines changed: 18 additions & 5 deletions b/‎packages/optimizer/lib/transformers/ServerSideRendering.js
Lines changed: 18 additions & 5 deletions
diff --git a/‎packages/optimizer/spec/transformers/valid/ServerSideRendering/does_not_transform_amp_audio/expected_output.html
Lines changed: 0 additions & 7 deletions b/‎packages/optimizer/spec/transformers/valid/ServerSideRendering/does_not_transform_amp_audio/expected_output.html
Lines changed: 0 additions & 7 deletions
diff --git a/‎packages/optimizer/spec/transformers/valid/ServerSideRendering/does_not_transform_amp_audio/input.html
Lines changed: 0 additions & 6 deletions b/‎packages/optimizer/spec/transformers/valid/ServerSideRendering/does_not_transform_amp_audio/input.html
Lines changed: 0 additions & 6 deletions
diff --git a/‎packages/optimizer/spec/transformers/valid/ServerSideRendering/transforms_amp_audio/expected_output.html
Lines changed: 12 additions & 0 deletions b/‎packages/optimizer/spec/transformers/valid/ServerSideRendering/transforms_amp_audio/expected_output.html
Lines changed: 12 additions & 0 deletions
diff --git a/‎packages/optimizer/spec/transformers/valid/ServerSideRendering/transforms_amp_audio/input.html
Lines changed: 11 additions & 0 deletions b/‎packages/optimizer/spec/transformers/valid/ServerSideRendering/transforms_amp_audio/input.html
Lines changed: 11 additions & 0 deletions
@@ -20,6 +20,7 @@ const {
   remove,
   createElement,
   insertBefore,
+  insertAfter,
   nextNode,
   firstChildByTag,
 } = require('../NodeUtils');
@@ -81,12 +82,9 @@ class ServerSideRendering {
         this.log_.debug('cannot remove boilerplate: amp-experiment');
       }
 
-      // amp-audio requires knowing the dimensions of the browser. Do not
-      // remove the boilerplate or apply layout if amp-audio is present in the
-      // document.
+      // Server-side rendering of an amp-audio element.
       if (node.tagName === 'amp-audio') {
-        canRemoveBoilerplate = false;
-        this.log_.debug('cannot remove boilerplate: amp-audio');
+        this.ssrAmpAudio(node);
         continue;
       }
 
@@ -211,6 +209,21 @@ class ServerSideRendering {
       return nextNode(node);
     }
   }
+
+  ssrAmpAudio(node) {
+    // Check if we already have a SSR-ed audio element.
+    for (const child of node.children || []) {
+      if (child.tagName === 'audio') {
+        return;
+      }
+    }
+
+    const audio = createElement('audio', {
+      controls: '',
+    });
+
+    insertAfter(node, audio);
+  }
 }
 
 module.exports = ServerSideRendering;
@@ -0,0 +1,12 @@
+<html ⚡ i-amphtml-layout i-amphtml-no-boilerplate>
+<head><style amp-runtime></style>
+</head>
+<body>
+  <amp-audio><audio controls></audio></amp-audio>
+  <amp-audio src="https://example.com/audio.mp3" width="300"><audio controls></audio></amp-audio>
+  <amp-audio src="https://example.com/audio.mp3" width="300">
+    <div fallback>Your browser doesn’t support HTML5 audio</div>
+    <audio controls></audio>
+  </amp-audio>
+</body>
+</html>
@@ -0,0 +1,11 @@
+<html ⚡>
+  <head></head>
+  <body>
+    <amp-audio></amp-audio>
+    <amp-audio src="https://example.com/audio.mp3" width="300"></amp-audio>
+    <amp-audio src="https://example.com/audio.mp3" width="300">
+      <div fallback>Your browser doesn’t support HTML5 audio</div>
+      <audio controls></audio>
+    </amp-audio>
+  </body>
+</html>