添加“onmouseenter”（悬停）音频效果，但除非我先点击，否则它不会在 chrome 中播放？

Posted 2023-02-24

【中文标题】添加“onmouseenter”（悬停）音频效果，但除非我先点击，否则它不会在 chrome 中播放？

【英文标题】：Adding an "onmouseenter" (hover) audio effect, but it won't play in chrome unless i click first?

【发布时间】：2019-09-10 02:44:53

【问题描述】：

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

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

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 中运行良好。我可能误解了这个问题？在您单击视口之前，似乎chrome最初不会在悬停时播放音频？我正在查看css tricks 上的一个示例，并注意到了同样的问题。 chrome有解决方法吗？ chrome 的音频规则是否需要一些额外的标记？

【参考方案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>

【讨论】：

我尝试了这个解决方案，似乎没有解决问题，但经过进一步检查，问题似乎是 chrome 本身，因为它在 Firefox 中运行良好。我可能误解了这个问题。在您单击视口之前，似乎chrome最初不会在悬停时播放音频？我正在查看css tricks 上的一个示例，并注意到了同样的问题。不知道如何解决这个问题