HTML5对象选择和音频播放

Question

在我的软件工程课程中，我们正在用HTML5设计一个语言学习网站，但我们都没有使用它的经验。

网站的主要功能实质上是播放音频剪辑，让用户基于他们认为音频剪辑对应的内容来选择图像，然后基于他们是否正确地识别对象来播放(和内部记录)噪声。

我只是在寻找一些关于如何做到这一点的一般想法。我假设javascript的使用是既定的，但不完全确定如何将图像链接到音频剪辑以确定用户的选择是否正确。

我们非常感谢您的帮助，非常感谢您的关注！

Answer 1

这是一个草图：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();

Answer 2

要了解有关javascript和HTML5音频的API的更多信息，请访问Mozilla Docs。

为了回答你关于如何“链接”事物的问题，这里有一个关于它如何工作的粗略草图。您有一个音频剪辑列表和一个图像列表，其中每个图像都是正确的(就像一个多项选择题)。然后显示图像并播放声音剪辑。等待用户点击其中一个图像，然后检查是否正确。这一切都可以用非常简单的javscript来完成。我没有使用过那么多的音频API，但是如果你需要更多的帮助，你可以带着一个具体的问题回来。