Open In App
Related Articles

How to set audio loop in amp-audio of Google AMP ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

Since the release of HTML5, audios can be added to webpages using the “audio” tag. 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=
</script>

                    

To make the audio to start automatically when the audio file finishes we make use of loop attribute in amp-audio.

Example:

HTML

<!doctype html>
<html amp>
  
<head>
    <meta charset="utf-8">
    <title>Google AMP amp-audio</title>
  
    <script async src=
    </script>
  
    <!-- Import the `amp-audio` component -->
    <script async custom-element="amp-audio" 
    </script>
  
    <link rel="canonical" href=
  
    <meta name="viewport" content=
"width=device-width,minimum-scale=1,initial-scale=1">
  
    <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>
    <style amp-custom>
        h1 {
            color: forestgreen;
        }
    </style>
</head>
  
<body>
    <center>
        <h1>
            Geeks For Geeks
        </h1>
    </center>
  
    <amp-audio width="auto" height="50" 
        src="GeeksForGeeks.mp3" controls loop>
  
        <div fallback>
            Your browser doesn’t 
            support HTML5 audio...
        </div>
    </amp-audio>
</body>
  
</html>

                    

Output:



Last Updated : 25 Oct, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads
Complete Tutorials