如何用JavaScript实现CSS :active等效效果，让音频在鼠标按下时播放

现有代码使用的onclick事件触发时机为鼠标按下后抬起时，要实现按下即触发的效果，直接将事件替换为onmousedown即可。该事件会在鼠标按键按下的瞬间立即执行，完全匹配你需要的类似CSS:active的触发逻辑。

注：上述交互属于用户主动触发的行为，符合浏览器的媒体自动播放策略，不会触发权限拦截。

基础版本（按下即播放，播放完成后自动停止） #

仅替换触发事件即可实现需求，额外加了重置播放进度的逻辑，重复按下时会从头开始播放，不需要可以删除对应行：

<!doctype html>
<html>
<head>
  <title>Audio</title>
</head>
<body>
  <script>
    function play() {
      var audio = document.getElementById("audio");
      // 重复按下时重置播放进度，不需要可删除该行
      audio.currentTime = 0;
      audio.play();
    }
  </script>
  <!-- 将onclick替换为onmousedown -->
  <input type="button" value="PLAY" onmousedown="play()">
  <audio id="audio" src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"></audio>
</body>
</html>

进阶版本（按下播放、松开暂停，完全匹配:active交互逻辑） #

如果需要实现按住播放、松开即停止的效果，可以新增暂停函数绑定onmouseup事件：

<!doctype html>
<html>
<head>
  <title>Audio</title>
</head>
<body>
  <script>
    const audio = document.getElementById("audio");
    function play() {
      audio.currentTime = 0;
      audio.play();
    }
    function pause() {
      audio.pause();
    }
  </script>
  <input type="button" value="PLAY" onmousedown="play()" onmouseup="pause()">
  <audio id="audio" src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"></audio>
</body>
</html>

内容的提问来源于stack exchange，提问作者r0naldinio