在javascript中單擊按鈕時添加聲音
[英]Adding sound when button is clicked in javascript
問題描述
我剛剛開始編碼。 我做了一個測驗，當學生點擊正確的答案時，我想要播放聲音，當他們點擊不正確的答案時播放另一個聲音。 我在網上發現了一些帖子，但它們沒有用。 有人可以幫忙嗎？ 先感謝您！
使用Javascript：
function checkAnswer(){
myAnswer=$('#inputBox').val();
if(myAnswer.slice(myAnswer.length-1,myAnswer.length)==" "){
myAnswer=myAnswer.slice(0,myAnswer.length-1);}
if(currentAnswer==myAnswer){
score++;
$('#feedback').append('<img src="tick.png">');
$('#inputBox').css("background-color","green");
$('#inputBox').css("color","white");
}
else{
$('#feedback').append('<img src="cross.png">');
$('#inputBox').css("background-color","red");
$('#inputBox').css("color","white");
$('#inputBox').val($('#inputBox').val()+" (ans= "+currentAnswer+")");
}
$('#message').append('Press ENTER again to continue');
$("#inputBox").prop('disabled', true);
$("#gameArea").focus();
gamePosition=2;
if(currentQuestionNumber==numberOfQuestions){gamePosition=3;}
}//checkAnswer
HTML：
<!DOCTYPE HTML>
<head>
<title>Quiz</title>
<meta name=viewport content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="main.css" rel="stylesheet" type="text/css"/>
<link href="mainclock.css"rel="stylesheet"type="text/css"/>
<script src="jquery.js"></script>
<script src="controller.js"></script>
</head>
<body>
<div id="gameArea" tabindex="1"></div>
<div id="mainStage">
</div>
</body>
2 個解決方案
解決方案1
0 2016-08-24 06:36:49
您可以在JavaScript中創建audio元素，並在必要時在應用程序中播放它。 下面是如何在JS中動態啟動audio元素的示例。
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'some-audio-file-here.mp3');
// play audio
audioElement.play();
// stop audio
audioElement.stop()
有關詳細信息，請參閱使用HTML5音頻和視頻 。
解決方案2
0 已采納 2016-08-24 07:39:37
顯然你正在使用Jquery 。 所以我建議你使用基於Jquery的代碼來處理這個過程，因為編碼較少等等 。 所以只需復制你底部的代碼，然后在需要聽到聲音時調用它：
function rightAnswerChosen(){
var audioFileName="audio.mp3";
$("body").append("<audio src="+audioFileName+" autoplay=true loop=false/>");
}
它如此簡單！ 不要忘記將您的音頻文件放在此頁面所在的同一目錄（文件夾）中，並將其名稱替換為'audio.mp3'。
要獲得更多功能，您可以根據需要在Audio標簽中添加更多屬性 （例如：loop-preload-volume ...）。
而已！
單擊javascript按鈕時添加媒體
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.