使用2

時間 2020-06-20

標籤使用简体版

原文原文鏈接

1.屬性測試javascript

    <!--顯示控件-->
    <audio src="../images/wind.mp3" id="audioOne"  controls="controls"> </audio>
    <!--自動播放，顯示控件-->
    <audio src="../images/wind.mp3" controls="controls" autoplay="autoplay"></audio>
    <!--自動循環播放，顯示控件-->
    <audio src="../images/wind.mp3" controls="controls" autoplay="autoplay" loop="loop"></audio>
    <!--預加載播放，在頁面加載的時候進行加載文件，若是指定autoplay了，忽略該屬性-->
    <audio src="../images/wind.mp3" controls="controls" preload="metadata"></audio>

2.在 JavaScript 中播放和暫停音頻播放html

使用 HTML5 audio 元素入門中所述的 HTML5 audio 元素可向網頁中添加音頻，而無需使用外部控件或程序。可是，除非你的網頁只須要一個簡單的音頻播放器，不然你極可能想對加載的音頻文件及其播放擁有更多的控制。若要將 audio 元素與 JavaScript 結合使用，請定義 audio 標記，該標記具備「ID」而且能夠選擇省略其餘全部內容。如 HTML5 audio 元素入門中所述，你能夠顯示或隱藏內置控件，或將音頻設置爲在頁面加載時自動播放。使用 JavaScript，你仍然能夠執行該操做而且還能夠執行進一步操做。java

在如下示例中，咱們在 HTML 中使用簡單的 audio 標記語法。瀏覽器

注意若是你是在 Intranet 上進行開發而且有 HTML5 的呈現問題，則能夠向網頁的 <head> 塊中添加 <meta http-equiv-「X-UA-Compatible」 content=」IE=9」/> 以強制 Windows Internet Explorer 9 使用最新標準。若是願意，能夠將 Web 開發服務器配置爲發送帶 IE=9 的元 http-equiv-「X-UA-Compatible」標頭。緩存

<input type="text" id="audiofile" size="80" value="demo.mp3" />

音頻播放器的全部其餘功能可經過 JavaScript 進行控制，如如下腳本所示。服務器

var currentFile = "";
        function playAudio() {
            // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    var btn = document.getElementById('play');
                    var audioURL = document.getElementById('audiofile');
 
                    //Skip loading if current file hasn't changed.
                    if (audioURL.value !== currentFile) {
                        oAudio.src = audioURL.value;
                        currentFile = audioURL.value;                      
                    }
 
                    // Tests the paused attribute and set state.
                    if (oAudio.paused) {
                        oAudio.play();
                        btn.textContent = "Pause";
                    }
                    else {
                        oAudio.pause();
                        btn.textContent = "Play";
                    }
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                     if(window.console && console.error("Error:" + e));
                }
            }
        }

在示例的 HTML 部分，爲 audio 元素指定 id=」myaudio」和源文件「demo.mp3″。定義 id=」play」的按鈕和觸發「playAudio()」JavaScript 函數的 onclick 事件。app

在 JavaScript 部分中，使用 document.getElementById 返回 audio 對象。 play 和 pause 方法用於提供播放控制。檢索 button 對象以即可以在「播放」和「暫停」之間切換按鈕標籤，具體狀況取決於 audio 對象的 paused 屬性的狀態。每次調用「playAudio」函數時都會檢查該狀態。若是音頻文件正在播放，則 paused屬性返回 false，而且調用 pause 方法來暫停播放。按鈕標籤也設置爲「播放」。ide

若是文件已暫停，則 paused 屬性返回 true，而且調用 play 方法，按鈕標籤更新爲「暫停」。第一次加載文件時，即便還沒有顯式調用 pause 方法，paused 屬性也返回 true（播放已暫停）。函數

在 HTML 代碼中，默認狀況下按鈕處於禁用狀態。當頁面加載時，在主體標記中使用 onload 事件調用 checkSupport() 函數。若是 audio 元素存在，則啓用按鈕。工具

3.在 JavaScript 中指定音頻文件並管理播放

在第一個示例中，經過使用項目的 HTML 部分中的 source 標記來指定音頻源文件。若要播放多個文件，則能夠將 audio 對象的 src 屬性設置爲 JavaScript 中音頻文件的 URL。

在下一示例中，在 HTML 部分添加了一個文本輸入元素，在其中能夠粘貼 MPEG-Layer 3 (MP3) 音頻文件的路徑。

與第一個示例不一樣，單擊「播放」按鈕可能意味着用戶已更改了音頻文件或他們已暫停了當前文件。因爲在更改音頻文件源時調用 src 方法會初始化暫停的狀態，所以「playAudio」函數必須指示用戶什麼時候想要更改文件。定義全局變量「currentFile」，以便該變量能夠跟蹤當前正在播放的文件的 URL。當用戶單擊「播放」按鈕時，會將「currentFile」變量與「audioURL.value」指定的文本字段中的值進行比較。若是這些值不一樣，則將 src 屬性設置爲新文件 URL，更新「currentFile」變量，並調用 load 方法。

在本示例中，」currentFile」變量跟蹤文本字段的內容，而不是 audio 對象的 src 屬性。緣由在於，src 屬性始終是文件的徹底限定路徑，而該文件可能與文本字段中的內容不匹配。例如，若是音頻文件與網頁的源代碼位於相同的目錄中，則能夠只指定文件名。若是音頻文件位於同一域的其餘目錄中，則包括路徑，如「music\demo.mp3″。若是文件位於其餘站點上，則使用徹底限定的域名和文件路徑，如「http:\\www.contoso.com\music\demo.mp3″。

當音頻文件正在播放時， currentTime 屬性會跟蹤播放在音頻剪輯中的位置。經過更改 currentTime 的值，你能夠快進或快退或從新啓動播放。該示例包括三個用於調用 rewindAudio、forwardAudio 和 restartAudio 函數的新按鈕。 rewindAudio 和 forwardAudio 函數將 currentTime 的值減小或增長 30 秒。你能夠將增量值更改成更大或更小的跳躍幅度。在 restartAudio 函數中，currentTime 的值設置爲零，即表示文件的開頭。

audio 對象還支持諸如 timeUpdate 事件之類的事件，這些事件用於跟蹤文件的進度。

4.緩存錯誤

編寫沒有任何錯誤的代碼是一件很是困難的事情。本示例包括幾個建議，可能有助於你避免出錯。

注意此處的示例包括將錯誤發送到 F12 開發人員工具「控制檯」或「腳本」選項卡的代碼。

HTML 語言有一個特色，若是沒法識別某個標記，則會將其忽略。在不支持 HTML5 的瀏覽器中，當使用 HTML5 audio 元素時，若是沒法識別該元素，則使用標記之間的部分。在本示例中，將顯示消息 HTML5 Audio is not supported（不支持 HTML5 音頻），但也能夠添加任意消息，使用其餘技術，如 Microsoft Silverlight，或容許用戶下載文件。若是支持 HTML5 音頻，將忽略標記之間的部分。可是，有一個須要注意的問題。對於正常的瀏覽器查看，audio 標記之間的內容將被忽略，可是若是用戶正在使用屏幕閱讀器查看網頁，閱讀器也會閱讀標記之間的內容。

在代碼的 JavaScript 部分，有幾個容易發生錯誤的地方。第一處是在檢查 HTML5 音頻支持性的時候。每一個函數經過使用 if (window.HTMLAudioElement)進行測試，肯定是否存在 audio 元素。若是 audio 元素不存在，則不會執行任何代碼。

在本示例中，若是支持不存在，則會禁用按鈕，也不會調用函數。可是，禁用對 JavaScript 函數的訪問對於網頁來講可能不太現實。

若是支持 HTML5 音頻，則可能會發生其餘錯誤。Try/catch 語句與能夠引起異常的方法結合使用。異常的緣由多是，用戶嘗試播放不存在的文件、在未加載文件時後退或沒法鏈接文件。

使用 Try/catch 語句，這些條件將會失敗，但不會進行提示，可是若是在 Internet Explorer 9 F12 工具中打開「控制檯」或「腳本」選項卡，則能夠看到這些錯誤。例如，若是未播放或加載任何音頻文件，則 Fast Forward、Rewind 和 Restart 函數會引起「InvalidStateError」 DOMExceptions。

如下代碼示例解釋了本主題的全部概念。

<!DOCTYPE html>
<html>
 
  <head>
    <title>HTML5 Audio Player </title>    
    <!-- Uncomment the following meta tag if you have issues rendering this page on an intranet site. -->    
    <!--  <meta http-equiv="X-UA-Compatible" content="IE=9"/> -->  
    <script type="text/javascript">
        // Global variable to track current file name.
        var currentFile = "";
        function playAudio() {
            // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    var btn = document.getElementById('play');
                    var audioURL = document.getElementById('audiofile');
 
                    //Skip loading if current file hasn't changed.
                    if (audioURL.value !== currentFile) {
                        oAudio.src = audioURL.value;
                        currentFile = audioURL.value;                      
                    }
 
                    // Tests the paused attribute and set state.
                    if (oAudio.paused) {
                        oAudio.play();
                        btn.textContent = "Pause";
                    }
                    else {
                        oAudio.pause();
                        btn.textContent = "Play";
                    }
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                     if(window.console && console.error("Error:" + e));
                }
            }
        }
             // Rewinds the audio file by 30 seconds.
 
        function rewindAudio() {
             // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime -= 30.0;
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                     if(window.console && console.error("Error:" + e));
                }
            }
        }
 
             // Fast forwards the audio file by 30 seconds.
 
        function forwardAudio() {
 
             // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime += 30.0;
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                     if(window.console && console.error("Error:" + e));
                }
            }
        }
 
             // Restart the audio file to the beginning.
 
        function restartAudio() {
             // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime = 0;
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                     if(window.console && console.error("Error:" + e));
               }
            }
        }
 
    </script>
  </head>
 
  <body>
    <p>
      <input type="text" id="audiofile" size="80" value="demo.mp3" />
    </p>
    <audio id="myaudio">
      HTML5 audio not supported
    </audio>
    <button id="play" onclick="playAudio();">
      Play
    </button>
 
    <button onclick="rewindAudio();">
      Rewind
    </button>
    <button onclick="forwardAudio();">
      Fast forward
    </button>
    <button onclick="restartAudio();">
      Restart
    </button>
 
  </body>
 
</html>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。