如果通过js控制音乐的播放和静音

Question

我是编程初学者。请问我写的音乐播放器是不是希望可以点击播放，再次点击静音。我应该怎么写呢？我

试过几次都失败了

PS。因为不知道怎么把音乐文件放到网上，所以当前音乐文件无效，纯属示意。

//關閉
let tag = true;
let music = document.querySelector('#music');
let btn = document.querySelector(".btn");
btn.addEventListener("click", function () {
    // 如果目前 flag 不是關閉就撥放
    if (tag) {
    // music.pause();
    music.setAttribute("muted","true");
    btn.setAttribute("class", "pause");
    tag = false;
    } else {
    music.play();
    btn.setAttribute("class", "play");
    tag = true;
    }
});

body{
  height: 500vh;
}
.btn {
  width: 60px;
  height: 60px;
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTmxXsF6UrJ0o-wcYdmXOqSpxZXhMzgcCzyAA&usqp=CAU');
  background-size: cover;
}

.play{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  transition: 1s;
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTmxXsF6UrJ0o-wcYdmXOqSpxZXhMzgcCzyAA&usqp=CAU');
  background-size: cover;
}

.pause {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  transition: 1s;
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScVjEwKCmnfciiCoEZ6am7ZXoIaVR0rUE_O2H1xWkqDMOZV-mk7i8eMwktqV9nHCsyF3A&usqp=CAU');
  background-size: cover;
}

<audio id="music" controls="controls">
  <source src="demo.mp3" type="audio/mp3">
</audio>
<div class="btn"></div>

Answer 1

如果您只想在点击时播放和暂停音频，那么这段代码可能会解决你的问题，但如果你想静音，那么你可以使用 music.muted = true

HTML

<audio id="music" controls="controls">
      <source
        src="https://soundbible.com/mp3/service-bell_daniel_simion.mp3"
        type="audio/mp3"
      />
    </audio>
    <div class="btn"></div>

CSS

body {
      height: 100vh;
      display: grid;
      place-items: center;
    }

    .btn {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      transition: 1s;
      background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTmxXsF6UrJ0o-wcYdmXOqSpxZXhMzgcCzyAA&usqp=CAU");
      background-size: cover;
    }

    .btn.paused {
      transition: 1s;
      background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScVjEwKCmnfciiCoEZ6am7ZXoIaVR0rUE_O2H1xWkqDMOZV-mk7i8eMwktqV9nHCsyF3A&usqp=CAU");
      background-size: cover;
      cursor: pointer;
    }

Javascript

const music = document.querySelector("#music");
      const btn = document.querySelector(".btn");
      var playing = false;

      btn.addEventListener("click", () => {
        if (!playing) {
          music.play();
          btn.classList.toggle("paused");
          playing = true;
        } else {
          music.pause();
          btn.classList.toggle("paused");
          playing = false;
        }
      });

如果通过js控制音乐的播放和静音

If you control the playback and mute of music through js

html

javascript

video