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