允許一次播放音頻HTML

Question

我試圖限制對象在實驗中只能播放一次音頻文件。 我正在使用以下html代碼：

<audio src="sound.mp3" type="audio/mp3" preload="auto" controls="controls" oncontextmenu="return false;">Audio could not be loaded.</audio>

有沒有辦法使用html？ 如果沒有，我該如何適應javascript？

謝謝！

Answer 1

這取決於您“僅播放音頻文件一次”的規則：用戶按下播放按鈕時還是用戶收聽整個曲目后才開始？

您無法禁用本地音頻控件，同時仍使其可見。 如果要具有操作音頻控件的功能，則需要使用JS，HTML和CSS使用自己的控件。 已經有用於此的庫。

另外，如果您很友善，則應該讓用戶在其播放后停止播放音頻。

這就是我要做的：

• 使用插件添加自己的播放器控件
• 只顯示播放/停止按鈕
• 寫JavaScript，將文件標記為“播放”時...
  1. 玩家按下停止按鈕， 或
  2. 當歌曲結束時
• 音頻被視為“已播放”后，請禁用播放按鈕

Answer 2

我這樣做的方法是將音頻放入一個名為audioDiv的div中

<div id="audioDiv">
    <audio onclick="playedOnce()" src="sound.mp3" type="audio/mp3" preload="auto" controls="controls" oncontextmenu="return false;">Audio could not be loaded.</audio>
</div>

然后在某處添加此javascript方法

function playedOnce(){
    var children = document.getElementById("audioDiv").getElementsByTagName('*');
    for(var i = 0; i < children.length; i++){
        children[i].disabled = true;
    }

}

現在，顯然這是一個shell方法，它假定您只有一個音頻，因此，也許您的javascript方法采用了一個參數來確定要禁用哪個音頻，等等。此外，這是假定用戶不是簡單地刷新頁面。 如果您想在用戶刷新頁面時仍將其隱藏，那么我將研究PHP會話 ！

希望這可以幫助！