Javascript：单击时播放/暂停并更改src

HTML

<audio id="player" src="file.ogg"></audio>
<img id="playpause" src="play.png" />

<audio id="player" src="file.ogg" data-state="0"></audio>
<img id="playpause" src="play.png" />

这是我到目前为止所拥有的。我想交替播放（

document.getElementById（'player'）.play（）

）和暂停（

document.getElementById（'player'）.pause（）

）当你点击

#playpause

时播放歌曲，并在播放（

play.png

）和暂停（

pause.png

）时更改

src

）

---

我可以使用jQuery，但我认为简单的Javascript就足够了。

一个flag变量怎么样

var playing = false;
playpause.addEventListener('click', function () {
    if(!playing) {
        document.getElementById('player').play();
        this.src = 'pause.png';
    }
    else {
        document.getElementById('player').pause();
        this.src = 'play.png';
    }
    playing = !playing;
});

使用player元素的属性

var player = document.getElementById('player');

playpause.addEventListener('click', function () {
    player[player.paused ? "play" : "pause"]();
    this.src = (player.paused ? "pause" : "play") + ".png";
});

HTML

<audio id="player" src="file.ogg"></audio>
<img id="playpause" src="play.png" />

<audio id="player" src="file.ogg" data-state="0"></audio>
<img id="playpause" src="play.png" />

---

请注意，这是未经测试的。祝你好运

您可以使用音频标记的“暂停”属性

playpause.addEventListener('click', function () {
 var player = document.getElementById('player');
 if(player.paused){
   player.play();
   this.src = 'pause.png';
 }else{
   player.pause();
   this.src = 'play.png';
 }
});

---

比添加flagOk好得多，添加src的更改？谢谢，我认为这是最好的方法。是的，我注意到正在修复：）