WIkitude为每个图像目标添加声音

Question

我想问一下，是否可以为每个图像目标添加不同的声音。我有4个图像目标，我想播放不同的.mp3文件，当他们每一个被识别。我能这样做吗?如果你能提供一些示例代码，那就太好了。谢谢！

编辑:当调用AR.HtmlDrawable的AR.HtmlDrawable方法时，我尝试播放声音(除了有4个图像目标外，我目前正在查看ImageRecognition HtmlDrawable示例)，但我无法让它对每个目标播放不同的声音。另外，你能告诉我定义声音对象的最佳地点吗？目前，我有一个函数createSound，它位于我的World var中。

Answer 1

查看Wikitude示例ImageRecognition/MultipleTarget。下载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
        },
    });
},

然后在init函数中调用loadAudio。然后实现了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();