Question

我想询问是否可以为每个图像目标添加不同的声音。我有4个图像目标，我想在识别每个目标时播放不同的.mp3文件。我可以这样做，如果你能提供一些示例代码，那就太棒了。 THX！

编辑：我尝试在调用onLoaded的{{1}}方法时播放声音（我目前正在查看AR.HtmlDrawable ImageRecognition示例，除了我有4个图像目标），但我不能让它为每个目标播放不同的声音。另外，你能告诉我定义声音对象的最佳位置吗？目前我的函数HtmlDrawable位于我的createSound var中。

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

然后在 init 函数中调用 loadAudio 。然后实现 Trackable2DObject 的 onEnterFieldOfVision 函数：

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

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

1 个答案: