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

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 属性来实现你想要的。如果音频暂停，它将 return true，否则将 false。然后相应地应用 .play() 或 .pause() 方法。

为此，只需使用一个简单的 if ... else 结构（伪代码）：

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

或者为了缩短它，您可以使用条件三元运算符 (? :)，如下所示（伪代码）：

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

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

<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()">

你也可以在这个JSFiddle上看到它。

所有东西都在线有点难看。如果您在调用函数的元素上附加一个 click 事件，然后将 JavaScript 逻辑与 HTML 代码分开，那就更好了。 Like it is explained on this W3C wiki link.

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

I have an image I would like to use to control an <audio> source. I can't find a way to use both the pause and play function simultaneously

html

onclick

html5-audio