您可以在单击时分配一个按钮吗，它会打开和关闭音频

Question

我可以分配一个自定义 css 按钮吗？当我单击它时，它会打开或关闭音频吗？这可能吗？在发布这个 btw 之前，我已经花了几个小时在这上面。这是我的按钮代码：

<!-- language: lang-css -->

    .slideThree {
      width: 80px;
      height: 26px;
      background: #333;
      margin: -185px 1;
      position: relative;
      border-radius: 50px;
      box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
    }
    .slideThree:after {
      content: 'OFF';
      color: #000;
      position: absolute;
      right: 10px;
      z-index: 0;
      font: 12px/26px Arial, sans-serif;
      font-weight: bold;
      text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15);
    }
    .slideThree:before {
      content: 'ON';
      color: #27ae60;
      position: absolute;
      left: 10px;
      z-index: 0;
      font: 12px/26px Arial, sans-serif;
      font-weight: bold;
    }
    .slideThree label {
      display: block;
      width: 34px;
      height: 20px;
      cursor: pointer;
      position: absolute;
      top: 3px;
      left: 3px;
      z-index: 1;
      background: #fcfff4;
      background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
      border-radius: 50px;
      transition: all 0.4s ease;
      box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
    }
    .slideThree input[type=checkbox] {
      visibility: hidden;
    }
    .slideThree input[type=checkbox]:checked + label {
      left: 43px;
    }

<!-- language: lang-html -->

这是 html

的代码

     <div data-video="C5ZNet5CIvw"
          data-autoplay="1"
          data-loop="1"
          id="youtube-audio">
     </div>
     <script src="https://www.youtube.com/iframe_api"></script>
     <script src="https://cdn.rawgit.com/labnol/files/master/yt.js"></script></body>
     <div class="slideThree">
         <input type="checkbox" value="None" id="slideThree" name="check" checked />
         <label for="slideThree"></label>
     </div>
<!-- language: lang-javascript -->

然后js

function onYouTubeIframeAPIReady() {
    var e = document.getElementById("youtube-audio"),
        t = document.createElement("img");
    t.setAttribute("id", "youtube-icon"), t.style.cssText = "cursor:pointer;cursor:hand", e.appendChild(t);
    var a = document.createElement("div");
    a.setAttribute("id", "youtube-player"), e.appendChild(a);
    var o = function (e) {
        var a = e ? "lf7YJnf.gif" : "Ahyo8Tz.gif"; I believ these lines are what i will ned to change probably...
        t.setAttribute("src", "https://i.imgur.com/" + a)
    };
    e.onclick = function () {
        r.getPlayerState() === YT.PlayerState.PLAYING || r.getPlayerState() === YT.PlayerState.BUFFERING ? (r.pauseVideo(), o(!1)) : (r.playVideo(), o(!0))
    };
    var r = new YT.Player("youtube-player", {
        height: "0",
        width: "0",
        videoId: e.dataset.video,
        playerVars: {
            autoplay: e.dataset.autoplay,
            loop: e.dataset.loop
        },
        events: {
            onReady: function (e) {
                r.setPlaybackQuality("small"), o(r.getPlayerState() !== YT.PlayerState.CUED)
            },
            onStateChange: function (e) {
                e.data === YT.PlayerState.ENDED && o(!1)
            }
        }
    })
}

<!-- end snippet -->

任何可以解决此问题并帮助我的人，我将不胜感激，这将对我有很大帮助。谢谢！

Answer 1

在这里试试这个代码，我制作并检查以确保它适用于切换音频并且它有效。

var audio = true;

var sound = new Audio('sound.mp3');

// Button click function
function togleAudio() {
    if (audio == true) {
        audio = false;
    } else if (audio == false) {
        audio = true;
    }
}


function tryAudio() {
    // Playing audio
    if (audio == true) {
        // Play audio
        sound.play();
    } else if (audio == false) {
        // Pause audio
        sound.pause();
    }
}

完整代码是这样的：

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Toggle Button</title>
    </head>

    <body>
        <button onclick="togleAudio()">Toggle Sound</button>
        <button onclick="tryAudio()">Play Sound</button>
    </body>

    <script>
        var audio = true;

            var sound = new Audio('sound.mp3');

            // Button click function
            function togleAudio() {
                if (audio == true) {
                    audio = false;
                } else if (audio == false) {
                    audio = true;
                }
            }


            function tryAudio() {
                // Playing audio
                if (audio == true) {
                    // Play audio
                    sound.play();
                } else if (audio == false) {
                    // Pause audio
                    sound.pause();
                }
            }
    </script>

</html>

您可以在单击时分配一个按钮吗，它会打开和关闭音频

Can you assign a button to when clicked, it will turn on and off audio

html

javascript

css

audio

button