Выбор объекта 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

Чтобы узнать больше об API для javascript и аудио HTML5, ознакомьтесь с Документация Mozilla .

Чтобы ответить на ваш вопрос о том, как "связать" вещи здесь, это грубый набросок о том, какэто будет работать.У вас есть список аудиоклипов и список изображений, который идет с каждым и какое изображение является правильным (например, вопрос с множественным выбором).Затем вы отображаете изображения и воспроизводите аудиоклип.Подождите, пока пользователь нажмет на одно из изображений, а затем проверьте, правильно ли оно или нет.Это все может быть достигнуто с довольно простым Javscript.Я не так много работал с аудио API, но вы можете вернуться с конкретным вопросом, если вам нужна дополнительная помощь.