HTML5オブジェクトの選択とオーディオ再生

Question

私のソフトウェアエンジニアリングコースでは、HTML5で語学学習ウェブサイトを設計していますが、経験はありません。

ウェブサイトの主な機能は、オーディオクリップを再生して、オーディオクリップが対応していると思われるイメージに基づいてイメージを選択し、正しく識別したかどうかに基づいてノイズを再生（内部で記録）することです。オブジェクト。

これはどのように行うことができるかに関する一般的なアイデアを探しています。私は、javascriptの使用は、ユーザー選択が正しいかどうかを判断するために画像をオーディオクリップに 'リンクする'方法について完全にはわかっていないと仮定しています。

ご協力いただきありがとうございます！

Answer 1

JavaScriptとHTML5のAPIの詳細については、Mozilla Docsをご覧ください。

「リンクする」方法に関する質問には、それがどのように機能するかについての大まかなスケッチがあります。あなたは、オーディオクリップのリストと、それぞれに付随するイメージのリストと、どのイメージが正しいか（多項選択質問のような）があります。次に、画像を表示してサウンドクリップを再生します。ユーザーが画像の1つをクリックして、画像が正しいかどうかを確認します。これはすべて、かなり簡単なjavscriptで実現できます。私はオーディオAPIを多用していませんが、より多くのヘルプが必要な場合は、特定の質問に戻ってくることができます。

Answer 2

これはスケッチです：http://jsfiddle.net/pimvdb/eZWq5/です。

ペアを定義し、各ペアを「表示」することができます。音声と画像が表示されます。画像をクリックすると、その画像と同じペアの画像であるかどうかがチェックされます。

変更する可能性のあるものの中にはノイズが実装されていませんが、それが始まる可能性があります。

function Pair(image, sound) { 
    this.image = image; 
    this.sound = sound; 
} 

Pair.prototype.display = function() { 
    var div1 = document.getElementById("div1"); 
    var div2 = document.getElementById("div2"); 
    div1.innerHTML = ""; 
    div2.innerHTML = ""; 

    var audio = document.createElement("audio"); // make audio 
    audio.src = this.sound; 
    audio.autoplay = true; 
    audio.controls = true; 

    div1.appendChild(audio); 

    var thisPair = this; 

    for(var i = 0; i < pairs.length; i++) { // make images 
     var img = document.createElement("img"); 
     img.src = pairs[i].image; 
     img.onclick = function() { 
      if(this.src === thisPair.image) { 
       alert('yey'); 
      } else { 
       alert('nop'); 
      } 
      showRandom(); 
     }; 
     div2.appendChild(img); 
    } 
}; 

var pairs = [ 
    new Pair("http://lorempixel.com/100/100/?1", 
      "http://upload.wikimedia.org/wikipedia/" 
      + "commons/a/a9/Tromboon-sample.ogg"), 
    new Pair("http://lorempixel.com/100/100/?2", 
      "http://upload.wikimedia.org/wikipedia/" 
      + "commons/c/c8/Example.ogg") 
]; 

function showRandom() { 
    pairs[Math.random() * pairs.length | 0].display(); 
} 

showRandom();