HTML DOM Audio用法及代码示例

Audio对象用于表示HTML <audio>元素。音频对象是HTML5中的新对象。

用法:

创建<audio>元素：

var gfg = document.createElement("AUDIO")

要访问<audio>元素：

var x = document.getElementById("myAudio")

属性值：

值	描述
audioTracks	它用于返回表示可用音轨的AudioTrackList对象。
autoplay	它用于设置或返回音频是否应在准备就绪后立即开始播放。
buffered	它用于返回一个TimeRanges对象，该对象表示音频的缓冲部分。
controller	它用于返回表示音频的当前媒体控制器的MediaController对象。
controls	它用于设置或返回音频是否应显示控件(播放/暂停等)。
crossOrigin	它用于设置或返回音频的CORS设置。
currentSrc	它用于返回当前音频的URL。
currentTime	它用于设置或返回音频中的当前播放位置(以秒为单位)。
defaultMuted	它用于设置或返回默认情况下是否应静音音频。
defaultPlaybackRate	它用于设置或返回搜索字段是否为只读。
duration	它用于返回音频的长度(以秒为单位)。
ended	它用于返回音频的播放是否结束。
error	它用于返回表示音频错误状态的MediaError对象。
loop	它用于设置或返回音频是否应在每次结束时重新开始播放。
mediaGroup	它用于设置或返回音频所属的媒体组的名称。
muted	它用于设置或返回是否应关闭声音。
networkState	它用于返回音频的当前网络状态。
paused	它用于设置或返回音频是否暂停。
playbackRate	它用于设置或返回音频播放的速度。
played	它用于返回一个TimeRanges对象，该对象表示音频的播放部分。
preload	它用于设置或返回音频的preload属性的值。
readyState	它用于设置或返回音频的当前就绪状态。
seekable	它用于返回一个TimeRanges对象，该对象表示音频的可搜索部分。
seeking	它用于返回用户当前是否正在寻找音频。
src	它用于设置或返回音频的src属性的值。
textTracks	它用于返回表示可用文本轨道的TextTrackList对象。
volume	它用于设置或返回音频的音量。

音频对象方法：

值	描述
addTextTrack()	它用于向音频添加新的文本轨道。
canPlayType()	用于检查浏览器是否可以播放指定的音频类型。
fastSeek()	它用于在音频播放器中搜索指定的时间。
getStartDate()	它用于返回一个新的Date对象，该对象代表当前的时间轴偏移量。
load()	它用于重新加载音频元素。
play()	它用于开始播放音频。
pause()	用于暂停当前播放的音频。

以下示例程序旨在说明音频对象：
示例1：创建<audio>元素。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Audio Object</title> 
    <style> 
        h1 { 
            color:green; 
        } 
          
        h2 { 
            font-family:Impact; 
        } 
          
        body { 
            text-align:center; 
        } 
    </style> 
</head> 
  
<body> 
  
    <h1>GeeksforGeeks</h1> 
    <h2>Audio Object</h2> 
  
    <p>Double Click the "Create"  
      button to create an Audio Object.</p> 
  
    <button ondblclick="Create()"> 
      Create 
  </button> 
  
    <script> 
        function Create() { 
            
            // Create audio element. 
            var m = document.createElement( 
              "AUDIO"); 
  
            if (m.canPlayType("audio/mpeg")) { 
                m.setAttribute("src", "bells.mp3"); 
            } else { 
                m.setAttribute("src", "bells.ogg"); 
            } 
  
            m.setAttribute("controls", "controls"); 
            document.body.appendChild(m); 
        } 
    </script> 
  
</body> 
  
</html>

输出：

在单击按钮之前：
单击按钮后：

示例2：访问<audio>元素。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Audio Object</title> 
    <style> 
        h1 { 
            color:green; 
        } 
          
        h2 { 
            font-family:Impact; 
        } 
          
        body { 
            text-align:center; 
        } 
    </style> 
</head> 
  
<body> 
  
    <h1>GeeksforGeeks</h1> 
    <h2>Audio Object</h2> 
  
    <audio id="track" controls> 
        <source src="bells.ogg" type="audio/ogg"> 
        <source src="bells.mp3" type="audio/mpeg"> 
      Your browser does not support the audio element. 
    </audio> 
  
    <p>Double-click the "Access Audio" button  
      to get the duration of the audio, in seconds.</p> 
  
     <button onclick="access()">Access Audio</button> 
  
    <p id="test"></p> 
  
    <script> 
        function access() { 
            
            // Accessing audio element duration. 
            var m = document.getElementById( 
              "track").duration; 
            document.getElementById("test").innerHTML = m; 
        } 
    </script> 
  
</body> 
  
</html>

输出：

在单击按钮之前：
单击按钮后：

支持的浏览器：HTML |下面列出了DOM音频对象：

谷歌浏览器
IE浏览器
Firefox
Opera
苹果Safari

相关用法

注：本文由纯净天空筛选整理自Shubrodeep Banerjee大神的英文原创作品 HTML | DOM Audio Object。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。