자바 스크립트에서 버튼을 클릭 할 때 소리 추가

방금 코딩을 시작했습니다. 나는 퀴즈를 만들었고 학생들이 정답을 클릭 할 때 소리를 내기를 원합니다. 그리고 그들이 틀린 답을 클릭했을 때 또 다른 소리가 나기를 원합니다. 일부 게시물을 온라인에서 찾았지만 작동하지 않습니다. 누구든지 도와 줄 수 있습니까? 미리 감사드립니다.자바 스크립트에서 버튼을 클릭 할 때 소리 추가

자바 스크립트 :

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>

출처

2016-08-24 Shannon

내가 어떠한'audio' 요소를 볼 수 없습니다 당신의 HTML/JS ... – Rayon

참조하십시오 ['

분명히 사용하고 있습니다. Jquery입니다. 그래서 less codding and so on 때문에이 프로세스를 처리하기 위해 Jquery 기반 코드를 사용하는 것이 좋습니다. 그래서 단지 당신의 하단에 코드 아래에 복사하여 소리를들을 필요가있을 때 이제까지 그것을 전화 :

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

그것의 너무 간단! do'nt는을 오디오 파일 을 같은 디렉토리 (폴더)에 넣고 에 있고을 'audio.mp3'으로 바꿉니다.

더 많은 기능을 추가하려면 원하는대로 오디오 태그에 more attributes (예 : 루프 프리로드 볼륨 ...)을 추가 할 수 있습니다.

그게 전부 야!

출처

2016-08-24 07:39:37

먼저 도움을 주셔서 감사합니다. . 하지만 mp3 파일은 퀴즈의 맨 아래에 코드를 추가하거나 $ ('# inputBox') 사이에 코드를 추가하더라도 여전히 재생되지 않습니다. css ("color", "white"); } else {. DId를 잘못 넣었거나 폴더에 다른 Jquery를 추가해야합니까? 감사합니다 – Shannon

보세요 http://drax.ir/tmp/myquizPage.htm. 샘플 페이지를 넣어 소리를 재생합니다. 소스 코드에서 설명을 볼 수 있습니다. –

또한 AnswerChosen (참)을 넣어야합니다. after if (currentAnswer == myAnswer) {그리고 당연히 AnswerChosen (false); 당신이 틀린 대답을하면. 샘플 페이지에서 소스 코드와 파일을 다운로드 할 수 있습니다. :) –

당신은 자바 스크립트에 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에서 확인할 수 있습니다.

출처

2016-08-24 06:36:49 GibboK

자바 스크립트에서 버튼을 클릭 할 때 소리 추가

답변

관련 문제