CODEWITHSUNDEEP
javascripthtml
user1021118
user1021118

Reputation: 11

HTML5 object selection and audio playback

In my software engineering course we're designing a language-learning website in HTML5 but none of us have experience with it.

The main functionality of the website is essentially playing an audio clip, having the user select an image based on what they think the audio clip corresponds to, and then playing (and internally recording) a noise based on whether they correctly identified the object.

I'm just looking for some general ideas as to how this can be done. I'm assuming the use of javascript is a given but not entirely sure about how to 'link' an image to the audio clip to determine if the user selection was correct.

Any help is appreciated and thanks a lot for taking a look!

Upvotes: 0

Views: 182

Answers (2)

pimvdb
pimvdb

Reputation: 154948

This is a sketch: http://jsfiddle.net/pimvdb/eZWq5/.

Define a pair, and each pair can be "displayed"; it will make the audio and images appear. Clicking on an image will check whether it was the image of the same pair that the audio was from.

It does not have the noise implemented among other things you'd probably like to alter, but it might be a start.

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();

Upvotes: 1

qw3n
qw3n

Reputation: 6334

To learn more about the APIs for javascript and the HTML5 audio check out Mozilla Docs.

To answer your question on how to 'link' things here is a rough sketch about how it would work. You have a list of audio clips and a list of images that goes with each and which image is correct (like a multiple choice question). Then you display the images and play the sound clip. Wait for the user to click on one of the images and then check whether it is right or not. This all can be accomplished with pretty straightforward javscript. I haven't worked with the audio API as much but you can come back with a specific question if you need more help.

Upvotes: 0

Related Questions