Google AMP amp-audio

Last Updated : 25 Oct, 2020

Many times as a developer we want to add an audio file in the webpage. Previously audios could be only played on webpages using web plugins like Flash. The “audio” tag is an inline element which is used to embed sound files into a web page. It is a very useful tag if you want to add audio such as songs, interviews, etc on your webpage. To embed audio in AMP pages you have to make use of the amp-audio tag.

Setup: To use the amp-audio, you have to import the amp-audio component into the head of the webpage.

HTML

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

Attributes:

width: It defines the width of the audio division.
height: It defines the height of the audio division.
src: It defines the source of the audio file to be played.
preload: Sets the preload attribute to the HTML audio tag.
autoplay: If present automatically starts the audio when the page is loaded.
muted: If present sets the volume strength to 0 by default.
loop: If present automatically repeats the audio from starting when it ends.

Example:

HTML

<!doctype html> 
<html amp> 
  
<head> 
    <meta charset="utf-8"> 
    <title>Google AMP amp-audio</title> 
  
    <!-- Import the mandatory script -->
    <script async src= 
        "https://cdn.ampproject.org/v0.js"> 
    </script> 
  
    <script async custom-element="amp-audio" 
src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"> 
    </script> 
  
    <link rel="canonical" href="geeksforgeeks.html"> 
  
    <!-- It is mandatory meta tag. -->
    <meta name="viewport" content= 
"width=device-width,minimum-scale=1,initial-scale=1"> 
  
    <!-- Add the following boilerplate  
        tag as it is. -->
    <style amp-boilerplate> 
        body { 
            -webkit-animation: -amp-start 8s  
                steps(1, end) 0s 1 normal both; 
  
            -moz-animation: -amp-start 8s  
                steps(1, end) 0s 1 normal both; 
  
            -ms-animation: -amp-start 8s  
                steps(1, end) 0s 1 normal both; 
  
            animation: -amp-start 8s  
                steps(1, end) 0s 1 normal both; 
        } 
  
        @-webkit-keyframes -amp-start { 
            from { 
                visibility: hidden 
            } 
  
            to { 
                visibility: visible 
            } 
        } 
  
        @-moz-keyframes -amp-start { 
            from { 
                visibility: hidden 
            } 
  
            to { 
                visibility: visible 
            } 
        } 
  
        @-ms-keyframes -amp-start { 
            from { 
                visibility: hidden 
            } 
  
            to { 
                visibility: visible 
            } 
        } 
  
        @-o-keyframes -amp-start { 
            from { 
                visibility: hidden 
            } 
  
            to { 
                visibility: visible 
            } 
        } 
  
        @keyframes -amp-start { 
            from { 
                visibility: hidden 
            } 
  
            to { 
                visibility: visible 
            } 
        } 
    </style> 
  
    <noscript> 
        <style amp-boilerplate> 
            body { 
                -webkit-animation: none; 
                -moz-animation: none; 
                -ms-animation: none; 
                animation: none 
            } 
        </style> 
    </noscript> 
  
    <!-- This is custom amp-style -->
    <style amp-custom> 
        h1 { 
            color: green; 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <h1> 
        Geeks For Geeks 
    </h1> 
      
    <amp-audio width="auto" height="50" 
        src="GeeksForGeeks.mp3"> 
  
        <div fallback> 
            Your browser doesn’t  
            support HTML5 audio 
        </div> 
    </amp-audio> 
</body> 
  
</html>