WIkitude добавить звук для каждой цели изображения

Question

Я хочу спросить, возможно ли добавить разные звуки для каждой цели изображения. У меня есть 4 изображения цели, и я хочу играть в разные .mp3 файл, когда каждый из них распознается. Могу ли я сделать это, и если вы можете предоставить пример кода, это было бы здорово. Спасибо!

РЕДАКТИРОВАТЬ: я пытался играть звук, когда onLoaded метод AR.HtmlDrawable называется (я в настоящее время смотрю на ImageRecognitionHtmlDrawable сэмпл, за исключением того, что у меня есть 4 изображения цели), но я не могу заставить его работать по-разному звук для каждой цели Кроме того, вы можете сказать мне лучшее место для определения звукового объекта. В настоящее время у меня есть функция createSound который находится в моем World вар.

Answer 1

Посмотрите в образце Wikitude ImageRecognition/MultipleTargets. Вы найдете его среди примеров при загрузке SDK. Расширьте образец, добавив этот код:

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
        },
    });
},

Затем вызовите loadAudio в функции init. Затем реализуйте функцию onEnterFieldOfVision объекта Trackable2DObject:

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

Вот полный исходный код:

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