試圖在我的html文檔中播放聲音。通過按一個按鈕

我試圖製作一個「互動名片」，因爲我的設計課程叫它，而且我想製作帶有可播放按鈕的鋼琴。問題是無論我嘗試什麼，聲音都不會在任何瀏覽器中播放。我開始將聲音鏈接到javascript/jQuery中的某個按鈕（我對這兩種語言都很新穎，所以我不能完全說我知道我在做什麼）。但現在我只想聽到聲音，所以我將它合併到我的html文檔中。試圖在我的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的。）

來源

2015-02-06 padawanMiyagi

哪來的'playSound'功能？ – adeneo 2015-02-06 10:47:07

您的黑/白鍵點擊事件處理程序在哪裏？ – qtgye 2015-02-06 10:51:21

請查看http://kahimyang.info/kauswagan/code-blogs/1652/how-to-play-a-sound-when-an-element-is-clicked-in-html-page – Outlooker 2015-02-06 11:11:26

首先需要實現用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/

請打勾左側的綠色標籤，如果它工作。快樂編碼！

來源

2015-02-06 13:41:03

非常感謝。這看起來很直截了當，但我的聲音仍然沒有演奏。我應該在哪裏存儲歌曲文件？是的，我正在試着製作一架鋼琴:) – padawanMiyagi 2015-02-10 12:32:06

您可以將聲音存儲在包含您的html文件的相同目錄中。就像你爲圖像做的一樣。或者，如果你將它保存在一個名爲「foo」的文件夾中，那麼這個你會做什麼 var aud = new Audio（'foo /'+ file）;'。而我忘了提，這種方法適用於** MP3文件只**繼承人的鏈接文件：https://www.freesound.org/people/pinkyfinger/packs/4409/ 也請給予好評。 :)快樂編碼！ – 2015-02-10 13:15:01

再次感謝！我試圖讓我會立即upvote，只要我有足夠的分數:) – padawanMiyagi 2015-02-10 13:46:43

試圖在我的html文檔中播放聲音。通過按一個按鈕

回答

相關問題