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

Posted 2023-02-25

【中文标题】在同一个 Img 上使用 onclick 播放和暂停

【英文标题】：Play and Pause with onclick on the same Img

【发布时间】：2015-02-26 10:42:47

【问题描述】：

当我单击 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>

【问题讨论】：

使用audio.pause()时会出现什么错误？

在浏览器中按F12没有错误...

也许更好的问题是：我可以 onclick="play(); pause()" 吗？？

你能做一些小提琴并分享吗？

jsfiddle.net/8z4x2eha/2

【参考方案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;
  

【讨论】：

到目前为止效果很好...我可以单击 1xplay 和 1xpause，然后它就不会再工作了。有办法吗？

【参考方案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);
);