Question

所以，我在打开网站时有自动播放音轨

<audio class="topper" autoplay loop id="minuscolo">
    <source src="media/minuscolo.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

我有一个想用来控制音乐的图像

<img class="hvr-shrink square" alt="Pause" src="media/gogh.png" onclick="document.getElementById('minuscolo').pause()">

我可以为它分配一个播放或暂停功能，但我找不到在同一张图片上使用这两种功能的方法，这样如果播放音乐，它就会起到暂停按钮的作用，如果有的话。没有音乐播放它就像一个播放按钮。

Answer 1

您可以通过阅读paused属性来实现您想要的目标。如果音频暂停，它将返回true，如果不是，则返回false。然后相应地应用.play()或.pause()方法。

要做到这一点，只需使用简单的if ... else结构（伪代码）：

if (audio.paused) { audio.play() } else { audio.pause() }

或者为了缩短它，你可以像这样使用条件三元运算符（? :）（伪代码）：

audio.paused ? audio.play() : audio.pause()

适用于您的代码的内容如下所示（更改了演示的图像和音频）：

＆＃13;

<audio class="topper" autoplay loop id="minuscolo">
    <source src="http://www.html5tutorial.info/media/vincent.mp3" type="audio/mpeg"/>
    Your browser does not support the audio element.
</audio>

<img class="hvr-shrink square" alt="Pause" src="http://lorempixel.com/g/100/100/abstract/" onclick="document.getElementById('minuscolo').paused ? document.getElementById('minuscolo').play() : document.getElementById('minuscolo').pause()">

＆＃13;

您也可以在此JSFiddle上看到它。

将所有内容放在网上有点丑陋。如果在调用函数的元素上附加click事件，然后将JavaScript逻辑与HTML代码分开，那就更好了。 Like it is explained on this W3C wiki link

我有一个想用来控制<audio>源的图像。我找不到同时使用暂停和播放功能的方法

1 个答案: