更改单击脚本上的文本

Posted 2021-04-28

我正在编写一个播放/暂停按钮的音频播放器，但它也会自动播放。因此，出现的第一个按钮是“暂停”按钮，单击它时会暂停音频并更改为“播放”按钮。现在我尝试在其下添加“播放”或“已暂停”的文本。我设法做到了，但它只在点击按钮时发生。因此，当我刷新网站时，没有播放音频的文字，然后我必须点击它，它将首先显示暂停，然后再播放一次。

所以我想让Play在Pause Button下，而不需要点击它。

function changeImage() {
  var image = document.getElementById('player');
  if (image.src.match("pause")) {
    image.src = "assets/img/icons/play.png";
    document.getElementById("fetch").innerhtml = "Paused";
  } else {
    image.src = "assets/img/icons/pause.png";
    document.getElementById("fetch").innerHTML = "Playing";
  }
}
var playing = true;

function action() {
  var audio = document.getElementById("audio");
  if (playing === false) {
    audio.play();
    playing = true;
    document.getElementById("append").innerHTML = "Playing";
  } else {
    audio.pause();
    playing = false;
  }
}

#audioplayer {
  position: relative;
  left: 65px;
  bottom: 11px;
  float: right;
  z-index: 100;
  cursor: pointer;
  height: 81px;
  width: 81px;
  border-radius: 50%;
  background-color: #0FB6D1;
}

#audioplayer:hover {
  -moz-box-shadow: 0 0 20px #6854e7;
  -webkit-box-shadow: 0 0 20px #6854e7;
  box-shadow: 0px 0px 20px #6854e7;
}

#fetch {
  font-family: 'gothic';
  text-align: center;
  font-weight: 500;
  margin-left: 1.9px;
}

<div id="audioplayer">

  <img id="player" onclick="action();changeImage();" src="assets/img/icons/pause.png" />

  <audio id="audio" src="assets/music/music.wav" loop autoloop autoplay></audio>

  <p id="fetch"></p>
  <p id="append"></p>

</div>

答案

我不确定为什么你有“获取”和“追加”div，所以我已经删除了一个这个例子。

document.getElementById('player').addEventListener('click', function() {
  action();
});

var playing = true;
var image = document.getElementById('player');
function action() {
  var audio = document.getElementById("audio");
  if (playing === false) {
    audio.play();
    playing = true;
    document.getElementById("fetch").innerHTML = "Playing";
    image.src = "assets/img/icons/pause.png";
  } else {
    audio.pause();
    playing = false;
    document.getElementById("fetch").innerHTML = "Paused";
    image.src = "assets/img/icons/play.png";
  }
}

HTML：

<div id="audioplayer">

  <img id="player" src="assets/img/icons/pause.png" />

  <audio id="audio" src="assets/music/music.wav" loop autoloop autoplay></audio>

  <p id="fetch">Playing</p>

</div>