我试图制作自己的广播播放器,但我不知道如何创建一个(在这种情况下为" 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>
&#13;
但我不知道如何编辑它以便按我的意愿工作。
答案 0 :(得分:2)
也许这可以帮助
(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;
答案 1 :(得分:0)
与@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/