Question

我试图制作自己的广播播放器，但我不知道如何创建一个（在这种情况下为＆＃34; PLAY＆＃34;）将改为PAUSE但是之后点击PAUSE将显示PLAY我有此代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Answer 1

也许这可以帮助

＆＃13;

(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);
}());

＆＃13;

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

＆＃13;

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/

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

2 个答案: