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

标签 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>

最佳答案

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

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

就这么简单! 不要忘记将您的音频文件放在与此页面相同的目录(文件夹)将其名称替换为“audio”。 mp3'。

要拥有更多功能,您可以添加 more attributes (例如:loop-preload-volume...)在音频标签中如您所愿。

就是这样!

关于javascript - 在javascript中单击按钮时添加声音,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39115575/

相关文章:

javascript - 在 yarn 中安装所有未满足的依赖项

android - AudioFocusChangeListener 无法收听

c++ - 在 Ubuntu 中使用 C/C++ 进行线路输入插孔感知

bash - 我如何确定sox在不知道版本的情况下不会执行自动抖动?

javascript - onclick 天关闭 Bootstrap 日期选择器

Javascript提示框字段大小限制

javascript - Rails 4 - CoffeeScript 无法正常工作

javascript - 如何访问 @URL.Action() 中的 javascript 变量

ios - 在 iOS 中写入随机值 AudioBuffer 时无法听到 'noise'

java - 共享音频按钮