WIkitude는 모든 이미지 타겟에 사운드 추가

Question

모든 이미지 타겟에 다른 사운드를 추가 할 수 있는지 묻고 싶습니다. 나는 4 개의 이미지 타겟을 가지고 있으며, 각각이 인식 될 때 서로 다른 .mp3 파일을 플레이하고 싶습니다. 그렇게 할 수 있고 예제 코드를 제공 할 수 있다면 좋을 것입니다. 고마워!

편집 : 나는 AR.HtmlDrawable의 onLoaded 방법은 (내가 현재 내가 4 개 이미지 목표를 가지고 것을 제외하고는 ImageRecognitionHtmlDrawable 샘플을 찾고 있어요)라고 소리를 연주와 함께했지만, 나는 그것을가 동작하지 않습니다 모든 대상에 대해 서로 다른 사운드를 재생합니다. 또한 사운드 개체를 정의하는 가장 좋은 장소를 알려주시겠습니까? 현재 내 World var에있는 createSound 기능이 있습니다.

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를 호출합니다.

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