Playing audio on marker detect

[peterlunglum]

How would I get an event listener to work with marker detection?

I've looked around and found a fork for this in an unmerged repo, but to use the main repo, looks like I would have to registerComponent?

I have the following added in a script tag after Aframe and AR.JS are called on, but placed before the a-scene.

AFRAME.registerComponent('registerevents', {
        init: function () {
            var marker = this.el;

            // Make the element emit events when found and when lost.
            marker.setAttribute('emitevents', 'true');

            marker.addEventListener('markerFound', function() {
                var markerId = marker.id;
                console.log('markerFound', markerId);
                console.log("Marker Found!");
                // TODO: Add your own code here to react to the marker being found.
            });

            marker.addEventListener('markerLost', function() {
                var markerId = marker.id;
                console.log('markerLost', markerId);
                console.log("Marker Gone!");
                // TODO: Add your own code here to react to the marker being lost.
            });
        }
    }); 

Here's the scene:

    <a-scene embedded arjs='sourceType: webcam; debugUIEnabled: false;';>
        <a-marker preset="hiro" registerevents emitevents="true">
                <a-box position='0 0.5 0' material='color: black;'></a-box>
        </a-marker>
        <a-assets>
            <audio id="sound" src="audio.mp3" preload="auto"></audio>
        </a-assets>
    <a-entity sound="src: #sound" autoplay="false"></a-entity>
    <a-entity camera></a-entity>
    </a-scene>

From registering the component though, it doesn't seem to even console.log when the marker is detected. Any ideas on why?

[donmccurdy]

See https://github.com/jeromeetienne/AR.js/issues/217 and https://github.com/jeromeetienne/AR.js/pull/303. The markerFound event does not exist in AR.js yet — until some sort of event is made available in the AR.js library, you'll likely need to compile a custom version of the library or check visibility and emit events yourself unfortunately.

[cesarmiguel85]

Hi @peterlunglum As explained in this post, you can register a component in aframe that checks if the marker is visible...

Here is the code to put in your header ` `

And of course, add the id to your a-marker

Hope this helps :-)

[vettorazi]

"adding a id in the a-marker"? what do you mean?

[cesarmiguel85]

Inside the tick, there is an if clause that checks if the object with id #your_marker_id is visible. That's the id you should put in your a-marker (you can change it, of course)

Good luck ;-)

[vettorazi]

yeah, i get it. i asked cuz i never saw an id inside the a-marker tag. i tried put an id in the a-marker tag, but didn't see to work. if (document.querySelector("#markerid").object3D.visible == true) {

<a-marker-camera preset='hiro' registerevents emitevents="true" id="markerid"></a-marker-camera>

[nicolocarpignoli]

@vettorazi try with this properties on the element (and maybe try also a-marker instead of a-marker-camera if the first doesn't work):

<a-marker markerhandler cursor="rayOrigin: mouse" emitevents="true" id="animated-marker" preset='hiro'></a-marker>

[nicolocarpignoli]

I collect what i learned about events on ar.js in this article. It contains a full working example for click events. Hope it helps!

https://medium.com/chialab-open-source/how-to-handle-click-events-on-ar-js-58fcacb77c4

[nicolocarpignoli]

@peterlunglum @vettorazi if this is solved / obsolete I will close, let us know please

[donmccurdy]

@nicolocarpignoli you mention emitevents="true" in a previous comment, but I thought the PR for that (https://github.com/jeromeetienne/AR.js/pull/303) had not been merged? I think the problem here is not that users don't know how to listen for events, but that there is no event available at all when a marker is found or lost.

Related: https://github.com/jeromeetienne/AR.js/issues/217

[delphinoluiz]

@nicolocarpignoli I am going to play video when marker is detected. I am new to AR.js and trying with a lot of examples but none of them are working. Can you help me?

[nicolocarpignoli]

@delphinoluiz

see this repo. on index.html you have the elements definition and on events.js you have your eventListener for click event. When a user clicks on the 3D object that is shown on top of the marker, we can do something.

Now, if you want to play an audio track, simply call 'play()' method of HTML5 audio elements https://www.w3schools.com/jsref/met_audio_play.asp

In the example I provide, on events.js, I change the scale of the 3D object. Instead, you could play an audio:

// instead of this:
  const scale = aEntity.getAttribute('scale');
  Object.keys(scale).forEach((key) => scale[key] = scale[key] + 1);
 aEntity.setAttribute('scale', scale);

// do something like this:
 const audio = document.querySelector('audio');
audio.play();

Of course, before that, you have to attach an audio element on the index.html with the src attribute that points to a valid audio source.

:)

[delphinoluiz]

@nicolocarpignoli Thank you very much. I want to play "video" using 'a-video'. Can you help me? Do you have any repo for video play?

[nicolocarpignoli]

@delphinoluiz never used it sorry :) you can check here

https://aframe.io/docs/0.8.0/primitives/a-video.html

[delphinoluiz]

@nicolocarpignoli Thanks

[nicolocarpignoli]

you're welcome @delphinoluiz

[Shabeera185]

how to play audios for marker ,when you have 6 audio files for 6 respective markers in webAR using AFRAME and AR.js.

I am trying to create a web application where I want different audios to be played on detecting different markers.(Each marker has been assigned an audio file.only one marker will be shown at a time.

I had create eventlistners for all 6 files as follows

` the audio asset was added as follows: <audio src="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/Shabeera185/BookAR/main/audioBEE.mp3" preload="auto" id="sid2" response-type="arraybuffer" loop autoplay

  >`

and the audio has been placed under tag as <a-audio src="#sid2"> </a-audio>

when the programme is run, whichever audiohandler is put at last in Githubissues.

Githubissues is a development platform for aggregating issues.