<p id="rrtt5"></p><ruby id="rrtt5"></ruby>

      系統城裝機大師 - 唯一官網:www.1999hs.com!

      當前位置:首頁 > 網頁制作 > HTML/Xhtml > 詳細頁面

      HTML5之audio屬性

      時間:2020-03-04來源:電腦系統城作者:電腦系統城

      audio主要支持的音頻格式:

      mp3  ogg wav

      復制代碼
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>audio</title>
      </head>
      <body>
          <!-- 方法一 -->
          <audio controls>
              <source src="data/imooc.mp3"></source>
          </audio>
      
          <!-- 方法二 -->
          <audio controls src="data/imooc.mp3"></audio>
      </body>
      </html>
      復制代碼

       

       source的級別沒有直接在audio中寫src高

       

      關于兼容性:

      mp3 所有瀏覽器都兼容

      ogg  safari瀏覽器不兼容,其他都可

      wav 所有瀏覽器都兼容

       

      可以使用JS生成audio對象

      復制代碼
          <button id="btn">play</button>
          <script>
              var myaudio=new Audio();
              myaudio.src="data/imooc.mp3";
      
              //谷歌和歐朋不能直接播放,必須與事件交互
              //其他瀏覽器可以
              btn.onclick=function(){
                  myaudio.play();
              }
          </script>
      復制代碼

       

      audio標簽屬性

       

       

      autoplay 自動播放,谷歌和歐朋不能自動播放(和video的區別是即使設置了靜音也不會自動播放)

      <audio controls src="data/imooc.mp3" autoplay></audio>

       

      沒有width和height屬性,需要通過style來控制

      <audio controls src="data/imooc.mp3" autoplay width="500"></audio>

       

       

      復制代碼
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>audio</title>
          <style>
              audio{
                  width:500px;
              }
          </style>
      </head>
      <body>
          <audio controls src="data/imooc.mp3" autoplay></audio>
      </body>
      </html>
      復制代碼

       

       

       

      分享到:

      相關信息

      • HTML連載72-動畫效果及其他屬性

        一、動畫效果 1.過渡與動畫相類似,都需要三要素,那么他們的區別在哪里呢? ?答:過渡必須是人為的觸發才會執行動畫,動畫不需要人為的觸發就可以自動執行?動畫。 2.?相同點: (1)過度和動畫都是用來給元素添加動畫的;(2)過渡...

        2020-03-04

      • 徹底搞懂flex彈性盒模型布局

        為什么要用flex 基于css3簡單方便,更優雅的實現,瀏覽器兼容性好,傳統的css實現一個div居中布局要寫一堆代碼,而現在幾行代碼就搞定了,沒有理由不用flex。...

        2020-02-28

      系統教程欄目

      欄目熱門教程

      人氣教程排行

      站長推薦

      熱門系統下載

      天堂资源中文WWW,久久精品女人天堂AV免费观看,无码专区一ⅤA亚洲V天堂,免费观看在线AⅤ天堂视频