Блог

В моем курсе разработки программного обеспечения мы разрабатываем веб-сайт для изучения языка на HTML5, но ни у кого из нас нет опыта работы с ним.

Основная функциональность веб-сайта, по сути, заключается в воспроизведении аудиоклипа, при котором пользователь выбирает изображение на основе того, чему, по его мнению, соответствует аудиоклип, а затем воспроизводит (и внутренне записывает) шум на основе того, правильно ли они идентифицировали объект.

Я просто ищу некоторые общие идеи относительно того, как это можно сделать. Я предполагаю, что использование javascript является заданным, но не совсем уверен в том, как «связать» изображение с аудиоклипом, чтобы определить, был ли выбор пользователя правильным.

Любая помощь приветствуется и большое спасибо за просмотр!

Это эскиз: 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();
 

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

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