当我不点击图像时如何停止声音播放？答案

【问题标题】：how to stop sound playing when I'm not clicking on the image?当我不点击图像时如何停止声音播放？
【发布时间】：2016-08-16 16:49:39
【问题描述】：

我想在单击图像时播放声音（我将其作为背景图像放在 div 中），而不是在鼠标向上时播放声音。所以声音只会在鼠标向下时播放。但是现在，点击图片后声音不会停止播放。

这是 div 的 html：

audio id="audio" src="sound/sound1.mp3" preload="auto"

class="container1" onclick="play()" value="PLAY"

这是我的 JavaScript：

函数播放(){

    var audio = document.getElementById('audio');
    audio.currentTime = 0;

    audio.play();

}

也许我应该创建另一个名为 pause() 的函数并在 HTML 中使用 onmouseup="pause()" ？但是如何做另一个函数来调用这个停止呢？我很想听听一些建议。我是这里的新手。对不起格式。谢谢！

【问题讨论】：

标签： javascript html audio web

【解决方案1】：

使用onmousedown 和onmouseup 事件而不是onclick。添加暂停音频的方法。

function pause(){
  var audio = document.getElementById('audio')
  audio.pause();
}

之后在您的 html 中添加事件 onmousedown="play()" onmouseup="pause()"。应该可以的。

【讨论】：

【解决方案2】：

imageDivId.addEventListener("mousedown", function () {
//call play function
}, false);
imageDivId.addEventListener("mouseup", function () {
//call pause function
}, false);

Add event listener for mouse event
**imageDivId is used to target element for events
Write two different function for play and pause audio.

【讨论】：