在同一个 Img 上使用 onclick 播放和暂停

Question

当我单击 img (onclick) 时，以下脚本正在播放声音文件。我如何通过单击相同的 img 来暂停它？我试过 audio.pause()，但它不起作用。

function play(){
var audio = document.getElementById("myaudio"); 
audio.style.display="block";
audio.play();
}

<a href="#" onclick="play()"><img src="Bilder/play2.png"></a>

Answer 1

例如，您应该将函数重命名为 audioHandler()，它将处理是播放还是暂停音频。

创建一个布尔值来记住您的音频是正在播放还是正在暂停。

//initial status: audio is not playing
var status = false;
var audio = document.getElementById("myaudio");

function audioHandler(){
  if(status == false || audio.paused){
    audio.play();
    status = true;
  }else{
    audio.pause();
    status = false;
  }
}

Answer 2

检查你的 HTMLMediaElement

的 media.paused 属性

function play_pause(media) {
    if (media.paused) {
        media.play();
    else {
        media.pause();
    }
}

在要控制操作的元素的处理程序中使用它

var elm = document.getElementById('play_button'),
    audio =  document.getElementById('myaudio');
elm.addEventListener('click', function (e) {
    play_pause(audio);
});

在同一个 Img 上使用 onclick 播放和暂停

Play and Pause with onclick on the same Img

html

javascript

audio

onclick