如何为 <audio> 标签设置特定的起始音量答案

【问题标题】：How to set a specific starting volume for <audio> tag如何为 <audio> 标签设置特定的起始音量
【发布时间】：2014-01-04 07:19:27
【问题描述】：

我只有 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;

任何帮助将不胜感激！

【问题讨论】：

你的代码看起来不错；问题不在您在此处发布的代码中。您确定 document.getElementById("bgAudio") 行在 DOM 构建后运行（例如，在 document.ready 回调内或在 <body> 底部的 <script> 标记中）？如果没有，请参阅this answer。另请注意，iOS 不允许以编程方式更改音量。

标签： javascript jquery html audio volume

【解决方案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;
    }
});

【讨论】：

【解决方案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 就绪、事件和视频的参考资料：

【讨论】：