在javascript中单击按钮时添加声音

时间:2016-08-24 06:09:10

标签: javascript audio

我刚刚开始编码。我做了一个测验,当学生点击正确的答案时,我想要播放声音,当他们点击不正确的答案时播放另一个声音。我在网上发现了一些帖子,但它们没有用。有人可以帮忙吗?提前谢谢!

使用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 个答案:

答案 0 :(得分:0)

您可以在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()

可以在Using HTML5 audio and video找到更多信息。

答案 1 :(得分:0)

显然您使用的是 Jquery 。所以我建议你使用基于Jquery的代码来处理这个过程,因为less codding and so on。  所以只需复制你底部的代码,然后在需要听到声音时调用它:

  function rightAnswerChosen(){
    var audioFileName="audio.mp3";
    $("body").append("<audio src="+audioFileName+" autoplay=true loop=false/>");
  }

它如此简单! 不要忘记将您的音频文件放在同一目录(文件夹)中,此页面位于 AND ,将其名称替换为'audio。 MP3' 。

要获得更多功能,您可以根据需要在音频标签中添加more attributes(例如:loop-preload-volume ...)。

就是这样!