0

简要说明：我想做<h1>一个按钮来打开/关闭背景音乐。到目前为止，我已经成功地把它变成<h1>了一个可点击的按钮，可以播放或暂停音乐（使用.play()下面的 js 代码），但结合这两个功能没有运气。

我想我可以使用.onclickandconditional statements来使它工作，但我想知道我是否可以使用toggleAttribute()，因为如果存在它会删除给定的元素，如果不存在则添加。（如果单击则暂停，如果重新单击则继续）

我将留下我的代码以便更好地理解内容。
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()
}
4

2 回答 2

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>

  1. 停止/播放

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>

于 2020-11-27T10:00:05.470 回答
0

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

但是，您可以在 click 函数中使用 audio.paused 来测试是否需要播放或暂停音频。

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>

于 2020-11-27T09:28:19.483 回答