javascript - 单击设置后从播放更改为暂停

Question

我该如何设置才能使按钮在单击“设置”后从播放变为暂停。

按“设置”会触发 svg 更改为暂停按钮。

代码: https://jsfiddle.net/192h0w85/195/

    (function iife() {
    "use strict";
    const player = document.getElementById("player");
    const button = document.getElementById("button");
    const value = document.getElementById("input");
    const sent = document.getElementById("sent");
    button.addEventListener("click", function() {
        this.classList.toggle('is-playing')
        if (player.paused) {
            player.play();
        } else {
            player.pause();
        }
    });
    sent.addEventListener("click", function() {
        player.volume = 1.0;
        player.src = value.value;
    });
}());

Answer 1

你已经添加了按钮点击事件

您只需触发该点击即可更改图标

因此，您的代码将如下所示

(function iife() {
  "use strict";
  const player = document.getElementById("player");
  const button = document.getElementById("button");
  const value = document.getElementById("input");
  const sent = document.getElementById("sent");

  button.addEventListener("click", function() {
    this.classList.toggle('is-playing')
    if (player.paused) {
      player.play();
    } else {
      player.pause();

    }
  });

  sent.addEventListener("click", function() {
    player.volume = 1.0;
    player.src = value.value;
    button.click();
  });
}());

注意:button.click();

(function iife() {
  "use strict";
  const player = document.getElementById("player");
  const button = document.getElementById("button");
  const value = document.getElementById("input");
  const sent = document.getElementById("sent");

  button.addEventListener("click", function() {
    this.classList.toggle('is-playing')
    if (player.paused) {
      player.play();
    } else {
      player.pause();

    }
  });

  sent.addEventListener("click", function() {
    player.volume = 1.0;
    player.src = value.value;
    button.click();
  });
}());

body {
  background-color: black;
}

.btn {
  position: relative;
  width: 200px;
  height: 200px;
  cursor: pointer;
}

.btn .play,
.btn .pause {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

.play {
  fill: #000000;
  border: 3px solid blue;
  border-radius: 50%;
}

.play path {
  fill: blue;
}

.pause {
  fill: #000000;
  border: 3px solid blue;
  border-radius: 50%;
}

.pause path {
  fill: blue;
}

.pause {
  display: none;
}

.is-playing .play {
  display: none;
}

.is-playing .pause {
  display: block;
}

.label {
  font-size: 22px;
  color: blue;
  font-family: Tahoma;
}

.info {
  display: table-cell;
  white-space: nowrap;
}

.input {
  font-size: 22px;
  width: 200px;
  margin-top: 40px;
  background: black;
  color: blue;
}

.sent {
  font-size: 22px;
  background: black;
  color: blue;
  cursor: pointer;
  font-family: Tahoma;
}

<audio autoplay id="player"></audio>


<div id="button" class="btn">
  <svg class="play hide" width="200" height="200" viewBox="0 0 24 24">

<circle cx="12" cy="12" r="12"> </circle>
<path d="M9.846 16.86c-.467.303-.846.097-.846-.45V7.588c0-.551.38-.752.846-.45l6.91 4.48c.324.21.327.549 0 .761l-6.91 4.48z">
    </path></svg>
  <svg class="pause" width="200" height="200" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="12"> </circle>

<path d="M8 7.596c0-.33.277-.596.607-.596h1.786c.335 0 .607.267.607.596v8.808a.605.605 0 0 1-.607.596H8.607A.602.602 0 0 1 8 16.404V7.596zm5 0c0-.33.277-.596.607-.596h1.786c.335 0 .607.267.607.596v8.808a.605.605 0 0 1-.607.596h-1.786a.602.602 0 0 1-.607-.596V7.596z">
    </path></svg>
</div>
<div class="info">
  <label class="label" for="input">Text</label>
  <input class="input" id="input" type="text" name="someNameHere" value="http://hi5.1980s.fm/;" />
  <input class="sent" id="sent" type="submit" value="Set" />
</div>