Google AMP amp-audio用法及代碼示例

很多時候，作為開發人員，我們希望在網頁中添加音頻文件。以前，隻能使用Flash之類的網絡插件在網頁上播放音頻。 “audio”標簽是一個嵌入式元素，用於將聲音文件嵌入到網頁中。如果您要在網頁上添加音頻，例如歌曲，采訪等，這是一個非常有用的標記。要將音頻嵌入AMP頁麵，您必須使用amp-audio標簽。

設置：要使用amp-audio，必須將amp-audio組件導入到網頁的開頭。

HTML

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

屬性：

width:它定義了音頻分割的寬度。
height:它定義了音頻分割的高度。
src:它定義了要播放的音頻文件的來源。
preload:將preload屬性設置為HTML音頻標簽。
autoplay:如果存在，則在頁麵加載時自動啟動音頻。
muted:如果存在，則默認情況下將音量強度設置為0。
loop:如果存在，音頻將在結束時自動從開始重複播放。

例：

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>

輸出：

相關用法

注：本文由純淨天空篩選整理自aditya_taparia大神的英文原創作品 Google AMP amp-audio。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。