分配给鼠标点击的音频不起作用，因为可点击的图像是 h ref 链接

Question

我已将音频分配给鼠标单击，但它不起作用。 可点击的图片是 h ref 链接，我想这是一个原因。 你能告诉我如何更正语法，让它工作吗？

这是 JavaScript 中的代码：

document.querySelector(".title-image").addEventListener("click", function() {

  var audio = new Audio("sounds/birds-sounds.mp3");
      audio.play();

});

HTML 中的代码：

<a href="?????????.html">
              <img class="title-image" src="images/??????????.jpg" alt="????????">
            </a>

Answer 1

您在这里不需要“a”标签。 您可以删除 <a...> 并保留 img 标签。

您可以使用 CSS 在图像上添加指针。

<style>
    .title-image
    {
        cursor: pointer;
    }
</style>

Answer 2

这是另一个解决方案：

<a onClick="return playAudio();" href="?????????.html">
    <img class="title-image" src="images/??????????.jpg" alt="????????">
</a>

<script>   
function playAudio() {
    var audio = new Audio("sounds/birds-sounds.mp3");
    audio.play();
 
    return true;
}   
</script>