如何制作一个功能更多的按钮？

Question

我正在尝试制作我自己的广播播放器，但我不知道如何制作一个（在本例中为“PLAY”）将改为PAUSE但点击PAUSE后将显示PLAY我有这个代码：

function play() {
  var audio = document.getElementById("audio");
  audio.play();
}

function pause() {
  audio.pause();
}

<input type="button" value="PLAY" onclick="play()">
<input type="button" value="PAUSE" onclick="pause()">
<audio id="audio" src="http://icecast3.play.cz/evropa2-128.mp3"></audio>

但我不知道如何编辑它来按我的意愿工作。

Answer 1

也许这可以帮助

(function() {
  var audio = document.getElementById("audio");
  var button = document.getElementById("button");
  var playing = false;
  
  button.addEventListener("click", function(e) {    
    if(playing) {
      audio.pause();
    } else {
      audio.play();
    }
    
    button.value = playing ? "PLAY" : "PAUSE";
    playing = !playing;
  }, false);
}());

<input id="button" type="button" value="PLAY">
<audio id="audio" src="http://icecast3.play.cz/evropa2-128.mp3" ></audio>

Answer 2

与@SantiagoHernandez提供的解决方案非常相似，但是因为我已经做了小提琴：

var button = document.getElementById('toggle');

button.addEventListener('click', function() {
    var audio = document.getElementById("audio");

    if (button.value == 'PLAY') {
        audio.play();
        button.value = "PAUSE";
    } else {
        audio.pause()
        button.value = "PLAY";
    }
});

<input type="button" value="PLAY" id="toggle">
<audio id="audio" src="http://icecast3.play.cz/evropa2-128.mp3" ></audio>

关键是使用单个切换功能，而不是单独的play（）和pause（）功能。

另请注意，我也将函数的绑定移动到脚本中，而不是通过click属性在html中进行，因为这被认为是不好的做法。

我谈到的小提琴：http://jsfiddle.net/amyh0dxp/