How to add onclick sound to my html file?

Question

recently started learning HTML so I'm wondering how to add sound effect to button in html, I saw some tutorials using js but I have no knowledge of js so my hands are tied pretty much, could someone just write me and explain what should I do? Thanks in advance. Code below. PS. I know it's messy and far from clean code but keep in mind that I started doing this like 2 days ago :)

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BREITLING</title>
    <link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
    
        <div class="container">
            <nav class="navbar">
                    <ul>
                        <li><a href="#home"><b>Home</b></a></li>
                        <li><a href="#store"><b>Store</b></a></li>
                        <li><a href="#trending"><b>Trending</b></a></li>
                        <li><a href="#about"><b>About</b></a></li>
                    </ul>
            </nav>
                    <section id="home">
                        <h1 class="homenaslov">BREITLING</h1>
                        <p class="quote">La pobreza<br> es la suma<br> de horas<br> mal utilizadas</p>
                    </section>
                    <section id="store">
                        <h1 class="storenaslov">Store</h1>
                        <p class="sat1opis">NAVITIMER B01 CHRONOGRAPH 46</p>
                        <div id="satovi">
                            <div class="inline-block">
                            <img src="sat1.png" class="sat1" width="350px" height="375px">
                            </div>
                            <div class="inline-block">
                                <img src="sat2.webp" class="sat1" width="350px" height="375px">
                            </div><div class="inline-block">
                                <img src="sat3.webp" class="sat1" width="350px" height="375px">
                            </div>
                        </div>
                        <p class="out1">OUT OF STOCK!</p>
                        <p class="out2">OUT OF STOCK!</p>
                        <a href="sat1.html">
                            <button class="btn btn1">Purchase</button>
                            </a>
                    </section>
                    
            
                
            
        </div>
    
              
</body>
</html>

Does this answer your question? [How to play audio?](https://stackoverflow.com/questions/9419263/how-to-play-audio) — Taplar, Dec 03 '20 at 22:29
There is a fundamental flaw in this question, that being that the onclick *is* a javascript hook. There isn't a "non-javascript onclick function" what you put in there must be javascript at some level. I recommend you start learning javascript, as it is currently the only real way to make interactive web interfaces in the way that you're looking for. Once you get that far enough to run JS from your HTML page, this has your answer: https://stackoverflow.com/questions/9419263/how-to-play-audio — David Culbreth, Dec 03 '20 at 22:42
Yeah, i know js is really important and kinda must-know thing when developing web pages and ill get into it as soon as ive gathered some decent knowledge in html and css, but i was hoping someone could walk me through or just insert it into my code for now :) — BAĆA KAZAMAJA, Dec 03 '20 at 22:50

score 1 · Answer 1 · answered Dec 03 '20 at 22:59

Your code was not completely relevant to your question so I've created a snippet to show you how this could be done.

I've included comments in the code to explain, and used sample audio sources to make sounds play on click.

Run the snippet below to see it in action (volume up).

//(element) is your target element where the function is being called
//in the HTML you can see the onclick="play(this)" is being used to call the play function
function play(element) {

  //get audio by id
  var audio = document.getElementById('audio');
  //get source by id
  var source = document.getElementById('audioSource');

  //set source to current data-value attribute of of element where function is being called
  source.src = element.getAttribute('data-value');

  //load
  audio.load();
  //play  
  audio.play();
};

<p><a href="#" onclick="play(this)" data-value="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3">music1</a></p>
<p><a href="#" onclick="play(this)" data-value="https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3">music2</a></p>
<p><a href="#" onclick="play(this)" data-value="https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3">music3</a></p>


<audio id="audio">
  <source id="audioSource" src=""></source>
</audio>

How to add onclick sound to my html file?

1 Answers1