WIkitude add sound for every image target

Question

I want to ask if it is possible to add different sound for every image target. I have 4 image targets, and I want to play different .mp3 file when each one of them is recognized. Can I do that and if you can provide some example code, it would be great. Thx!

EDIT: I tried with playing the sound when the onLoaded method of the AR.HtmlDrawable is called (i am currently looking at the ImageRecognition HtmlDrawable sample except that i have 4 image targets), but i can't get it to work to play different sound for every target. Also, can you tell me the best place to define the sound object. Currently i have a function createSound which is located in my World var.

Answer 1

Check out the Wikitude sample ImageRecognition/MultipleTargets. You find it among the samples when you download the SDK. Extend the sample by adding this code:

sound1: null,
sound2: null,

loadAudio: function() {
    this.sound1 = new AR.Sound("assets/sound1.mp3", {
        onLoaded: function() {
            // if the sound finished loading
        },
        onError: function() {
            // alert the user that the sound file could not be loaded
        },
    });

    this.sound2 = new AR.Sound("assets/sound2.mp3", {
        onLoaded: function() {
            // if the sound finished loading
        },
        onError: function() {
            // alert the user that the sound file could not be loaded
        },
    });
},

Then call loadAudio in the init function. Then implement the onEnterFieldOfVision function of the Trackable2DObject:

onEnterFieldOfVision: function() {
    if (World.sound2 !== null) {
        World.sound1.play();
    }
}

Here the full source code:

var World = {
loaded: false,

init: function initFn() {
    /* Disable all sensors in "IR-only" Worlds to save performance. If the property is set to true, any geo-related components (such as GeoObjects and ActionRanges) are active. If the property is set to false, any geo-related components will not be visible on the screen, and triggers will not fire.*/
    AR.context.services.sensors = false;
    this.loadAudio();
    this.createOverlays();
},

sound1: null,
sound2: null,

loadAudio: function() {
    this.sound1 = new AR.Sound("assets/sound1.mp3", {
        onLoaded: function() {
            // if the sound finished loading
        },
        onError: function() {
            // alert the user that the sound file could not be loaded
        },
    });

    this.sound2 = new AR.Sound("assets/sound2.mp3", {
        onLoaded: function() {
            // if the sound finished loading
        },
        onError: function() {
            // alert the user that the sound file could not be loaded
        },
    });
},

createOverlays: function createOverlaysFn() {
    // Initialize Tracker
    this.tracker = new AR.Tracker("assets/magazine.wtc", {
        onLoaded: this.worldLoaded
    });

    // Create overlay for page one
    var imgOne = new AR.ImageResource("assets/imageOne.png");
    var overlayOne = new AR.ImageDrawable(imgOne, 1, {
        offsetX: -0.15,
        offsetY: 0
    });
    var pageOne = new AR.Trackable2DObject(this.tracker, "pageOne", {
        drawables: {
            cam: overlayOne
        },
        onEnterFieldOfVision: function() {
            if (World.sound2 !== null) {
                World.sound1.play();
            }
        }
    });

    // Create overlay for page two
    var imgTwo = new AR.ImageResource("assets/imageTwo.png");
    var overlayTwo = new AR.ImageDrawable(imgTwo, 0.5, {
        offsetX: 0.12,
        offsetY: -0.01
    });
    var pageTwo = new AR.Trackable2DObject(this.tracker, "pageTwo", {
        drawables: {
            cam: overlayTwo
        },
        onEnterFieldOfVision: function() {
            if (World.sound2 !== null) {
                World.sound2.play();
            }
        }
    });
},

worldLoaded: function worldLoadedFn() {
    var cssDivLeft = " style='display: table-cell;vertical-align: middle; text-align: right; width: 50%; padding-right: 15px;'";
    var cssDivRight1 = " style='display: table-cell;vertical-align: middle; text-align: left; padding-right: 15px; width: 38px'";
    var cssDivRight2 = " style='display: table-cell;vertical-align: middle; text-align: left; padding-right: 15px;'";
    document.getElementById('loadingMessage').innerHTML =
        "<div" + cssDivLeft + ">Scan Target &#35;1 (surfer) or &#35;2 (biker):</div>" +
        "<div" + cssDivRight1 + "><img src='assets/surfer.png'></img></div>" +
        "<div" + cssDivRight2 + "><img src='assets/bike.png'></img></div>";
}
};

World.init();