CODEWITHSUNDEEP
javascriptgoogle-chromeaudioonclickmouseevent
Alex
Alex

Reputation: 81

Adding an "onmouseenter" (hover) audio effect, but it won't play in chrome unless i click first?

(I've preserved my original question, but see bottom of post for update)

Essentially I am trying to add both a click and hover effect to a link to play different audio files (sound effects). For some reason when I have both the onclick and the onmouseenter attributes in the same <a>the hover sound (audioID) will not initially play on hover until I click anywhere in the viewport. Then the hover sound plays normally after. It seems like the click function is overriding the mouse-hover until I initially click. I'm using a code snippet I tweaked from a code pen to create functions for the audio files. here's my markup below. Any thoughts?

The 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>

The 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;
    }

UPDATE

Upon further inspection it does seem that the issue is chrome itself, cause it works fine in firefox. I may have misinterpreted the issue? It seems like chrome won't initially play audio on hover until you click in the viewport? I was looking at an example on css tricks, and was noticing the same issue. Is there a work around for chrome? Is there some additional piece of markup that chrome requires for their audio rules?

Upvotes: 0

Views: 657

Answers (1)

gcfabri
gcfabri

Reputation: 574

Try to add event listeners using 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>

Upvotes: 0

Related Questions