Audio自動播放問題分析

一、audio自動播放音樂

隨著音頻應用越來越廣泛，在網頁中使用audio標籤播放背景音樂已經成為一種時尚。使用HTML5新增的autoplay屬性可以自動播放，簡單實用。代碼如下：

    <audio src="music.mp3" autoplay></audio>

這個代碼在Safari、Chrome和Firefox上表現良好。但是在蘋果手機Safari上不再自動播放，這是蘋果應用內置策略導致的。

二、audio自動播放失效

有時候，打開網頁後發現你自動播放的音樂無法啟動，谷歌音樂和QQ音樂也無法正常播放。這是因為不同瀏覽器對於自動播放音樂的策略不同，無法自動播放音樂的瀏覽器多為移動端瀏覽器。解決方法可以通過JS來實現，判斷是否可以自動播放，如果不能，隱藏音樂模塊，給予用戶操作改變狀態。下面的代碼展示了如何利用JavaScript來控制音樂的播放：

    var audio = document.getElementById("audio");
    if (audio && audio.paused) {
        audio.play();
    }

這段JavaScript代碼首先獲取到audio標籤的元素節點，判斷是否處於暫停狀態，如果是就調用play()方法播放音樂。

三、audio自動播放問題

在Chrome瀏覽器中，如果同時有多個音頻文件可以自動播放，只有第一個可以自動播放，後面的都會被禁止自動播放，需要用戶點擊解鎖。解決方法是將每一個音頻文件當作獨立的音頻管理，必須要等到上一個音頻播放完成之後才能播放下一個音頻文件。

四、audio自動播放chrome問題

在Chrome瀏覽器中，音頻播放會在第一次觸發頁面的click事件時自動播放。如果需要實現一進入頁面就自動播放的效果，需要在網頁的第一個交互需要click事件類型。例如：

    <!-- 默認播放第一首歌 -->
    <audio src="song1.mp3" autoplay />
    <!-- 新的交互（按鈕）-->
    <button onclick="startPlaying()">點擊開始播放</button>
    <script>
        function startPlaying() {
            // 改變src執行音頻文件
            document.querySelector("audio").setAttribute("src", "song2.mp3");
        }
    </script>

五、視頻自動播放的屬性是什麼

<video>標籤是HTML5新增的標籤，用於呈現視頻。使用autoplay屬性來自動播放視頻：

    <video src="video.mp4" autoplay></video>

六、蘋果手機audio自動播放問題

在iOS Safari上，需要在用戶觸發事件中的某個時刻調用play()方法播放聲音，否則會被瀏覽器屏蔽。iOS Safari還增加了一個新屬性「playsinline」，它允許視頻或音頻在內聯模式下播放，即控制視頻和音頻不能全屏，只允許處於網頁的內部，通過添加playsinline屬性來避免APP中打開時出現各種問題。代碼如下：

    <audio src="music.mp3" controls playsinline></audio>

七、audio不自動播放

如果你需要關閉audio標籤的自動播放功能，只需要在HTML代碼中去除autoplay屬性就可以了。代碼如下：

    <audio src="music.mp3" controls></audio>

八、audio設置自動播放

如果你需要啟動audio標籤的自動播放功能，只需要在HTML代碼中添加autoplay屬性就可以了。代碼如下：

    <audio src="music.mp3" autoplay controls></audio>