Question

我怎么能做到这一点？例如......

点击“播放音频”后，文字会变为“暂停音频”。声音结束后，请更改回原始文本。目前它正在并排显示两个文本。

以下是我正在使用的内容：

<audio id="demo" src="<?php echo wp_get_attachment_url( $attachment_id, 'full' ); ?>"></audio>
<div>
  <a onclick="document.getElementById('demo').play()">Play the Audio</a>
  <a onclick="document.getElementById('demo').pause()">Pause the Audio</a>
</div>

如果有人能提供帮助那就太棒了。

由于

Answer 1

将标记更改为

<div>
  <a id="play" onclick="togglePlay('play')">Play the Audio</a>
  <a id="pause" onclick="togglePlay('pause')" style="display:none">Pause the Audio</a>
</div>

做类似的事情：

function addEvent(obj, type, fn) {
   if (obj.addEventListener) {
     obj.addEventListener(type, fn, false);
   } else if (obj.attachEvent) {
     obj.attachEvent("on" + type, fn);
   }
}

addEvent(document.getElementById('demo'), 'ended', function() {
    document.getElementById('play').style.display = 'block';
    document.getElementById('pause').style.display = 'none';
});

function togglePlay(state) {
    var audio = document.getElementById('demo'),
        play  = document.getElementById('play'),
        pause = document.getElementById('pause');

    if (state == 'play') {
        audio.play();
        play.style.display = 'none';
        pause.style.display = 'block';
    }else{
        audio.pause();
        play.style.display = 'block';
        pause.style.display = 'none';
    }
}

<audio>播放/暂停按钮更改</audio>

1 个答案: