Adding audio to AMP pages

While we're at it, let's see how to embed an audio clip into an AMP page. It's much the same as for video: There are AMP components for self-hosted audio clips, and for third-party hosted audio with SoundCloud.

Embedding self-hosted audio with <amp-audio>

Just as amp-video is a replacement for the HTML5 video tag, amp-audio is a replacement for the HTML5 audio tag. Import it with:

<script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>

You can use it with code like this:

<amp-audio width="640" height="100" src="https://theampbook.com/ch5/audio/audioclip.mp4" autoplay controls muted loop>
  <div fallback>
    <p>Your browser doesn't support HTML5 audio</p>
  </div>
  <source type="audio/mpeg" src="audioclip.mp3">
  <source type="audio/ogg" src="audioclip.ogg">
</amp-audio>

Again, note the use of the attribute autoplay, as well as the attributes muted, which...