Question

我正在努力制作一张互动名片＆＃34;正如我的设计课程所称，我想用可播放的按钮制作钢琴。问题在于，无论我尝试什么，声音都不会在任何浏览器中播放。我首先将声音链接到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文档中播放声音。按下按钮

1 个答案: