Question

HTML

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

JAVASCRIPT

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

这是我到目前为止所拥有的。我想在您点击document.getElementById('player').play()时播放（document.getElementById('player').pause()）并暂停（#playpause）该歌曲，并在播放时更改src（{{ 1}}）和暂停（play.png）。

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

Answer 1

标志变量怎么样？

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

Answer 2

使用播放器元素的paused属性。

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

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

Answer 3

<强> HTML

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

<强> JS

playpause = document.getElementById( 'playpause' );
audio = document.getElementById( 'player' );

playpause.addEventListener('click', function() {
    (player.dataset.state === '0') ? player.play() : player.pause(); player.dataset.state = '1';
});

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

Answer 4

您可以暂停使用＆＃39;音频标签的属性。

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

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

4 个答案: