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

Question

我是编程初学者。我想问一下我是否写了一个音乐播放器，我希望能够点击播放，然后再次点击静音。我该怎么写？I

尝试了好几次都失败了。

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;
}
});