背景声音的静音/取消静音按钮

Posted 2023-03-08

【中文标题】背景声音的静音/取消静音按钮

【英文标题】：Mute/unmute button for background sound

【发布时间】：2017-07-15 11:35:02

【问题描述】：

伙计们。请给我解释一下。 我想为我的页面创建一个静音/取消静音按钮。 （音频自动开始） 所以这里是我第一次使用的代码：

<script>
var sound  = getElementById (‘background_sound’);
        function mute()
          if(background_audio.muted == false)
            background_audio.muted = true;
           else 
            background_audio.muted = false;
          


</script>

但它没有用。所以我只是删除了第一行（我的意思是这个 var）并直接处理了 id。它奏效了。现在我的 html 看起来像这样：

<audio id="background_audio" autoplay="true" loop="loop">
          <source src="Audio/flute.mp3">
If you are reading this, it is because your browser does not support the audio element.
</audio>

<button   onclick="mute()">
      <i class="fa fa-music"></i></button>

还有像这样的 javascript

<script>

        function mute()
          if(background_audio.muted == false)
            background_audio.muted = true;
           else 
            background_audio.muted = false;
          


</script>

问题是如何在不创建变量的情况下直接寻址 Id？虽然它工作正常，但我以后会遇到代码问题吗？我只是想我需要分配一个 var this 才能工作。有点困惑。

【问题讨论】：

var sound = .. 行的格式非常糟糕。改用var background_audio = document.getElementById('background_sound'); 并将其放在mute() 函数中。

试过了。仍然不能以这种方式工作。我的意思是 var。但没有它可以正常工作

对不起，是var background_audio = document.getElementById('background_audio');，在你的html中没有background_sound这样的东西。

【参考方案1】：

试试这个，我相信这会奏效

 <script>

            function mute()
              if(document.getElementById('background_audio').muted == false)
                document.getElementById('background_audio').muted = true;
               else 
                document.getElementById('background_audio').muted = false;
              

    
    </script>