在JS中制作一个打开/关闭背景音乐的按钮

Question

简单描述：我想把<h1>作为打开/关闭背景音乐的按钮。到目前为止，我已经成功地将<h1>变成了一个可点击的按钮，可以播放或暂停音乐(使用下面的.play():js代码(，但很难将这两个功能结合起来

我想我可以使用.onclick和conditional statements来使它工作，但我想知道我是否可以使用toggleAttribute()，因为它删除了给定的元素if exists，并添加if不存在。(如果单击则暂停，如果再次单击则恢复(

为了更好地理解内容，我将留下我的代码
HTML:

<div class="musicOn">
<audio id="audio" style="display:none;" src="christmas.mp3" controls autoplay loop onloadeddata="setHalfVolume()">
</div>
<div class="container">
<h1 class="title">Tic <span>Tac</span> Toe</h1>

JavaScript:

let on_off = document.querySelector('.container .title');
on_off.onclick = function() {
audio.play()
}

Answer 1

我制作了两个解决方案(两个片段(。

在第一个解决方案中，该按钮的工作方式类似于pause / play原理上的切换。在第二个解决方案中，切换的工作方式类似于stop / play。

1. 暂停/播放：

let on_off = document.querySelector('.container .title');
let audio = document.querySelector('.musicOn audio');
on_off.onclick = function() {
audio.paused ? audio.play() : audio.pause();
}

<div class="musicOn">
<audio id="audio" style="display:none;" src="http://www.sousound.com/music/jingle/jingle_02.mp3" controls autoplay loop>
</div>
<div class="container">
<h1 class="title">Tic <span>Tac</span> Toe</h1>
</div>

2. 停止/播放

let on_off = document.querySelector('.container .title');
let audio = document.querySelector('.musicOn audio');
on_off.onclick = function() {
audio.paused ? audio.play() : music_stop();
}
function music_stop() {
audio.pause();
audio.currentTime = 0;
}

<div class="musicOn">
<audio id="audio" style="display:none;" src="http://www.sousound.com/music/jingle/jingle_02.mp3" controls autoplay loop>
</div>
<div class="container">
<h1 class="title">Tic <span>Tac</span> Toe</h1>
</div>

Answer 2

虽然您可以使用audio.paused检查音频是否暂停，但暂停是只读的。

但是，您可以在单击功能中使用audio.pasused来测试是否需要播放或暂停音频。

let on_off = document.querySelector('.container .title');
let audio = document.getElementById('audio');
on_off.onclick = function() {
if (audio.paused) { audio.play(); }
else { audio.pause(); }
}

<div class="musicOn">
<audio id="audio" style="display:none;" src="https://ahweb.org.uk/blackbird.mp3" controls loop></audio>
</div>
<div class="container">
<h1 class="title">Tic <span>Tac</span> Toe</h1>
</div>