如何在 Google AMP 中使用 amp-audio 设置自定义媒体通知？

自 HTML5 发布以来，可以使用“音频”标签将音频添加到网页中。以前，音频只能在使用 Flash 等网络插件的网页上播放。 “audio”标签是一个内联元素，用于将声音文件嵌入到网页中。如果您想在网页上添加歌曲、采访等音频，这是一个非常有用的标签。要在 AMP 页面中嵌入音频，您必须使用 amp-audio 标签。

设置：要使用 amp-audio，您必须将 amp-audio 组件导入网页头部。

属性：

1. width：定义音频分割的宽度。
2. height：它定义了音频分区的高度。
3. src：定义要播放的音频文件的来源。
4. preload：将 preloaded 属性设置为 HTML 音频标签。
5. 自动播放：如果存在，则在加载页面时自动启动音频。
6. 静音：如果存在，默认将音量强度设置为 0。
7. 循环：如果存在，则在结束时自动从开始重复音频。

除了这些属性之外，还有一些可选属性可用于设置自定义媒体通知。

1. 艺术品：用于设置音频文件的缩略图。
2. title：用于设置音频文件的标题。
3. 专辑：用于设置专辑名称。
4. 艺术家：用于设置艺术家名称。

例子：

HTML

  

    
    Google AMP amp-audio
  
    
    
      
    
    
    
  
    
  
    
  
    
        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
            }
        }
    
  
    
        
            body {
                -webkit-animation: none;
                -moz-animation: none;
                -ms-animation: none;
                animation: none
            }
        
    
  
    
        h1 {
            color: forestgreen;
            text-align: center;
        }
    

  

    
        Geeks For Geeks
    
  
    
  
        
        
            Your browser doesn’t 
            support HTML5 audio...
        
    

  

输出：