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

Posted 2023-02-25

【中文标题】播放 <video> 时将 <audio> 元素设置为 50% 的音量

【英文标题】：Setting <audio> element to 50% volume when <video> is playing

【发布时间】：2017-03-17 14:23:47

【问题描述】：

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

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

我希望在播放视频标签时将背景音频减少到 50%。如果可能的话我可以使用一个类来定位所有视频元素会很好:) 如果用户退出视频，它会将音量调回 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()

    );

【参考方案1】：

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

参见下面的 sn-p（单击按钮并查看音量控制栏）：

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>

【讨论】：

谢谢 :) 我试一试，看看我能不能让它工作！

@Mayo 我在答案中添加了一个 sn-p