如何設置特定的起始音量 <audio> 標簽

Question

我只掌握HTML和CSS的基本知識，並通過谷歌廣泛試圖找到這個問題的答案 - 這一切似乎都指向JavaScript和/或jQuery。 我試過了，我無法讓它發揮作用。

我有一個音頻文件，當我的網站加載時開始播放。 我想設置一個特定的起始音量，以便我的訪客在音量很高時不會心臟病發作。

這就是我所擁有的：

HTML：

<audio id="bgAudio" autoplay="autoplay" controls="controls" loop="loop" src="audio/025.mp3"></audio>

CSS：

#bgAudio {
position:fixed;
z-index:1000; 
width:250px;
}

JavaScript的：

backgroundAudio=document.getElementById("bgAudio");
backgroundAudio.volume=0.5;

---

任何幫助將不勝感激！

Answer 1

您沒有獲得該元素，並且錯誤顯示在控制台中

無法將屬性'volume'設置為null

將腳本移到</body>標記之前，或執行以下操作：

window.onload = function() {
    var backgroundAudio=document.getElementById("bgAudio");
    backgroundAudio.volume=0.5;
}

編輯：

沒有什么比禁用右鍵點擊更煩人了，但無論如何，這就是你擁有的

;(function($){
mySong=document.getElementById("bgAudio");
mySong.volume=0.2;

setVolume = function(bgAudio,vol) {
    sounds[bgAudio].volume = 0.33;
}
})(jQuery);

現在改成它

jQuery(function($) {
    $("#bgAudio").prop("volume", 0.2);

    window.setVolume = function(bgAudio, vol) {
        sounds[bgAudio].volume = vol;
    }
});

Answer 2

使用JavaScript設置卷，但是您需要確保DOM准備好修改任何對象。 也許使用ondocumentready事件或來自號召性用語的Click事件。

首先，獲取要修改的視頻對象。

bgAudio = document.getElementById("bgAudio");

然后使用bgAudio對象設置其屬性，如卷。

bgAudio.volume = 0.2;

既然你在網站上工作，我會做這樣的事情（假設你可以使用jQuery）：

$(document).ready(function() {
    // the site has now loaded, grab the video!
    bgAudio = document.getElementById("bgAudio");
    // now tweak the volume!
    bgAudio.volume = 0.2;
    // now, play it!
    bgAudio.play();
});

查看有關jquery ready，事件和視頻的參考資料：

• http://api.jquery.com/ready/
• https://developer.mozilla.org/en-US/docs/Web/Reference/Events
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video