鼠标单击时暂停声音

Question

我正在尝试设计自己的音频播放器。 我制作了"播放"、"暂停"和"停止"符号(Png 格式(，当您单击它们时，我找不到实际广告播放暂停和停止功能的解决方案。

我想出了在单击"播放">

一词(没有按钮(时如何播放声音，但是在添加"暂停"或"停止"时我迷失了方向。

我是一个使用 html/css 的菜鸟，所以如果我不是很清楚，请原谅我。 这是我到目前为止所拥有的：

<audio id="audio" src="sons/son.mp3" autostart="false" ></audio>
<a onclick="PlaySound()"> Play </a>
<script>
function PlaySound() {
var sound = document.getElementById("audio");
sound.play()
}
</script>

谢谢你的回答。

Answer 1

您是在正确的方法上实现这一目标！

首先，你全局声明你的变量声音，从你的三个函数中获取它。要暂停声音，请使用 .pause(( 方法，要停止它，请使用 .currentTime 属性返回到 0 秒播放时间。

代码：

<audio id="audio" src="sound.mp3" autostart="false" ></audio>
<a href="#" onclick="PlaySound()">Play</a>
<a href="#" onclick="PauseSound()">Pause</a>
<a href="#" onclick="StopSound()">Stop</a>
<script>
const sound = document.getElementById("audio")
function PlaySound() {
sound.play()
}
function PauseSound(){
sound.pause()
}
function StopSound(){
sound.pause()
sound.currentTime = 0
}
</script>

希望对您有所帮助！