时间戳

首页 > 解决方案 > 如何在我的 html 文件中添加 onclick 声音？

javascript - 如何在我的 html 文件中添加 onclick 声音？

问题描述

最近开始学习 HTML，所以我想知道如何在 html 中为按钮添加音效，我看到了一些使用 js 的教程，但我对 js 不了解，所以我的手很紧，有人可以写信给我解释一下我应该怎么做做？提前致谢。代码如下。PS。我知道它很混乱而且远非干净的代码，但请记住，我是在 2 天前开始这样做的 :)

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

标签： javascripthtmlcss

解决方案

您的代码与您的问题并不完全相关，因此我创建了一个片段来向您展示如何做到这一点。

我在代码中添加了注释来解释，并使用示例音频源让声音在点击时播放。

运行下面的代码片段以查看它的实际效果（提高音量）。

//(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>

推荐阅读