javascript - 添加 "onmouseenter"(悬停)音频效果，但除非我先点击，否则它不会在 chrome 中播放？

Question

(我保留了我原来的问题，但请参阅帖子底部的更新)

本质上，我正在尝试将单击和悬停效果添加到链接以播放不同的音频文件(声音效果)。出于某种原因，当我同时拥有 onclick 时和 onmouseenter相同的属性 <a>在我单击视口(viewport)中的任意位置之前，悬停声音(audioID)最初不会在悬停时播放。然后悬停声音之后正常播放。在我最初单击之前，似乎单击功能会覆盖鼠标悬停。我正在使用从 code pen 调整的代码片段为音频文件创建函数。下面是我的标记。有什么想法吗？

的HTML:

    <h1 class="animated fadeIn faster">
        I’m <a href="#" onmouseenter="playAudio()" onclick="playAudio2()"  class="squiggle about-link" >Alex Pierce</a>.<br/> 
        I like <a href="#" class="squiggle menu-open transition work-link" data-featherlight="#navigation"  onmouseenter="playAudio()" onclick="playAudio2()">making stuff</a> on the internet.
    </h1>

    <audio id="audioID" preload="auto" volume=".1">
      <source src="img/twotonebeep.mp3" type="audio/mpeg">
    </audio>

    <audio id="audioID2" preload="auto" volume=".1">
      <source src="img/two_tone_bright.mp3" type="audio/mpeg">
    </audio>

Javascript:

    //Defining variable based on unique ID

    var audio1 = document.getElementById("audioID");

    //Sound for the hover

    function playAudio() {
      audio1.play();
        audio1.volume = 0.1;
    }

    //Sound for the click

    var audio2 = document.getElementById("audioID2");

    //Example of an HTML Audio/Video Method

    function playAudio2() {
      audio2.play();
        audio2.volume = 0.1;
    }

更新

经过进一步检查，问题似乎出在 chrome 本身，因为它在 Firefox 中运行良好。我可能误解了这个问题？在您单击视口(viewport)之前，似乎chrome最初不会在悬停时播放音频？我正在查看 css tricks 上的示例，并注意到同样的问题。 chrome有解决方法吗？ chrome 的音频规则是否需要一些额外的标记？

Answer 1

尝试使用 javascript 添加事件监听器。

//Defining variable based on unique ID

    var anchors = document.getElementsByTagName("A");
        
    anchors[0].addEventListener('click', playAudio, false);
    anchors[0].addEventListener('mouseover', playAudio2, false);
    
    anchors[1].addEventListener('click', playAudio, false);
    anchors[1].addEventListener('mouseover', playAudio2, false);

    var audio1 = document.getElementById("audioID");

    //Sound for the hover

    function playAudio() {
      console.log('playAudio');
      audio1.play();
        audio1.volume = 0.1;
    }

    //Sound for the click

    var audio2 = document.getElementById("audioID2");

    //Example of an HTML Audio/Video Method

    function playAudio2() {
    console.log('playAudio2');
      audio2.play();
        audio2.volume = 0.1;
    }

<h1 class="animated fadeIn faster">
        I’m <a href="#" class="squiggle about-link" >Alex Pierce</a>.<br/> 
        I like <a href="#" class="squiggle menu-open transition work-link" data-featherlight="#navigation">making stuff</a> on the internet.
    </h1>

    <audio id="audioID" preload="auto" volume=".1">
      <source src="img/twotonebeep.mp3" type="audio/mpeg">
    </audio>

    <audio id="audioID2" preload="auto" volume=".1">
      <source src="img/two_tone_bright.mp3" type="audio/mpeg">
    </audio>