尝试在我的 html 文档中播放声音。按一个按钮

Question

我正在尝试制作一架 "interactive business card" 正如我的设计课程所称，我想制作一架带有可弹奏按钮的钢琴。问题是无论我尝试什么，声音都不会在任何浏览器中播放。我开始将声音链接到 javascript/jQuery 中的一个按钮（我对这两种语言都很陌生，所以我不能确切地说我知道我在做什么。）但现在我只想听到听起来不错，所以我将它合并到我的 html 文档中。

代码如下：

<!Doctype html>
<html>
<head> <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<h1>"Yo Dawg, i heard you like muzic."</h1>
<p>"hej"</p>


    </head>
<body>
    <div id= "wholething">
    <div id= "whitekey1">
        <div id= "blackkey2"></div></div>


    <div id= "whitekey2">
        </div>

    <div id= "whitekey1">
        <div id="blackkey3"></div>
        </div>

    <div id= "whitekey3">
        <div id = "blackkey2"></div>
        </div>

        <div id= "whitekey4">
        <div id = "blackkey2"></div>
        </div>
        <div id= "whitekey1">
        <div id = "blackkey2"></div>
        </div>

        <div id= "whitekey3"></div>

        <div id= "whitekey2">
        <div id = "blackkey1"></div>
        </div>
        <div id= "whitekey4">
        <div id = "blackkey1"></div>
        </div>
        <div id= "whitekey1">
        <div id = "blackkey2"></div>
        </div>
    </div> 
<script type= "text/javascript" src= "jquery-1.11.2.js"></script>
<script type= "text/javascript" src="script.js"></script>

<span id="dummy"></span>
<p><a href="#" onclick="playSound('afrique-kissingmylove.wav');">Click here to             hear a bird sing</a></p>

    <p onmouseover="playSound('afrique-kissingmylove.wav');">Or you can put your mouse over this paragraph to hear the same bird sound.</p>



</body>

我做错了什么？当您按下黑键和白键时，如何播放声音？（最好使用 javascript/jQuery。）

Answer 1

首先你需要使用javascript实现playSound函数。你可以这样做：

function playSound(file)
{
  var aud=new Audio(file);
  aud.play();
}

并在您的 html 中执行此操作，:

<p onclick="playSound('afrique-kissingmylove.mp3');">Click here to             hear a bird sing</p>

不需要锚标签。假设你想制作一架钢琴（抱歉你的问题很不清楚），你可以为你所有的 div 做这个：

<div id= "whitekey1" onclick="playSound('whitekey1.mp3');">
    <div id = "blackkey2" onclick="playSound('blackkey2.mp3');"></div>
</div>

您可以从这里下载钢琴名称文件并相应地重新命名它们：https://www.freesound.org/people/pinkyfinger/packs/4409/

如果有效，请勾选左边的绿色标签。编码愉快！

尝试在我的 html 文档中播放声音。按一个按钮

Trying to make a sound play in my html document. by pressing a button

html

javascript

audio

jquery

interactive