在播放 <video> 时将 <audio> 元素设置为 50% 音量

Question

大家好我希望你能回答这个问题:)

基本上我的 index.html 中有几个 html 5 个视频自动播放背景音频。

我想要的是在播放视频标签时将背景音频降低到 50%。如果我可以使用 class 来定位所有视频元素，那就太好了 :) 如果用户退出视频，它会将音量调回 100%

我目前正在为我的项目使用 jQuery，所以 jQuery 中的解决方案会很棒！

目前我认为应该是这样....

// to reduce volume to 50%. im not sure what the code would be to reduce volume ? maybe 0.5 or something ?

    $("video").click(function(){
        $(audio).mute();
    });

// turn volume back to 100% once exit button is clicked

    $(".exit").click(function(){

    });

Answer 1

我认为 audio.volume = 0.5 应该提供所需的结果（将音量降低到 50%），audio.volume = 1.0 将音量设置回 100%。有关详细信息，请参阅 MDN Docs。

请参阅下面的代码片段（单击按钮并查看音量控制栏）：

var $audio = $('#audio-test').get(0);

$('#set-volume-50').click(function(){
  $audio.volume = 0.5;
});

$('#set-volume-100').click(function(){
  $audio.volume = 1.0;
});

button {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio id="audio-test" controls="controls">
  Your browser does not support the <code>audio</code> element.
  <source src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" type="audio/ogg">
</audio>
  <button id="set-volume-50">Set volume to 50%</button>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <button id="set-volume-100">Set volume to 100%</button>

在播放 <video> 时将 <audio> 元素设置为 50% 音量

Setting <audio> element to 50% volume when <video> is playing

jquery

html

audio

video

volume