Skip to content
Related Articles

Related Articles

How to mute the audio using amp-audio of Google AMP ?
  • Last Updated : 21 Dec, 2020

Introduction: 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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<script async custom-element="amp-audio" src=
</script>

chevron_right


To mute the audio of the audio file we will make use of muted attribute of amp-audio.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html amp>
  
<head>
    <meta charset="utf-8" />
    <title>GeeksForGeeks | amp-audio</title>
  
    <script async 
        src="https://cdn.ampproject.org/v0.js">
    </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>
  
    <!-- The `amp-audio` component loads the
        audio resource specified by its `src` 
        attribute at a time determined by the
        runtime. `amp-audio` doesn't support 
        a responsive layout by default, but 
        you can achieve the same by combining 
        a `fixed` height with `width="auto"`.
        Because of muted audio will be muted 
        by default -->
    <amp-audio width="auto" height="50" 
        src="GeeksForGeeks.mp3" controls muted>
  
        <!-- This division will be displayed 
            when the file is not supported 
            by the browser -->
        <div fallback>
            Your browser doesn’t 
            support HTML5 audio...
        </div>
    </amp-audio>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :