鼠标点击暂停声音

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

你是在正确的方式来实现这一点！

首先，您全局声明您的变量 sound 以从您的三个函数中获取它。要暂停您的声音，您可以使用 .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>

希望对你有帮助！