Question

我只掌握HTML和CSS的基本知识，并且通过Google广泛试图找到这个问题的答案 - 这一切似乎都指向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

您没有收到该元素，错误会显示在控制台中

无法设置属性＆＃39;音量＆＃39;为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，事件和视频的参考资料：

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

2 个答案: