Clever Geek Handbook

Problem with sound playback when clicking on an image

My html document has the following code:

    <script>
    function playSound() {
      document.getElementById("easteregg").innerHTML= "<embed src=\"file.mp3\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
    }
    </script>

      

        
        
        
      

    
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand"><img src="img/logo.png" width="180px" onclick="playSound();" /></a>
    </div>

      

        
        
        
      

    
    <span id="easteregg"></span>

Nothing happens when I click the logo. Thoughts?

Edit : Found a solution.

I took Blake McConnell's advice and converted to tag <audio>

.

code:

    audio { 
        display:none;
    }

    <a class="navbar-brand"><img src="img/logo.png" width="180px" onclick="document.getElementById('easteregg').play();" /></a>

    <audio id="easteregg" src="file.mp3" type="audio/mpeg" hidden="true" controls="false"></audio>
+3


source to share


1 answer


Try replacing "autoplay" for the "autostart" attribute in the embed tag.



I may not understand what you are trying to do, but wouldn't it be easier to connect an event listener to your range and use it to play audio using the Web Audio API ?

+1


source






More articles:


All Articles