Воспроизвести звук при обнаружении маркера A-frame AR.JS

Я пытаюсь воспроизвести источник звука при обнаружении маркера с помощью библиотек A-frame и AR.JS.

В настоящее время у меня есть следующая сцена, камера и маркер:

  <a-scene embedded arjs='sourceType: webcam; debugUIEnabled: false;';>
        <a-marker preset = "hiro">
                <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>

Сначала я пробовал следующее:

var entity = document.querySelector('[sound]');

      if (document.querySelector("a-marker").object3D.visible == true){
            entity.components.sound.playSound();
            console.info("playing");
        } else {
            entity.components.sound.pauseSound();
            console.info("not playing");
        }

Однако это не работает. Есть идеи, почему это не работает или не работает? Я даже не вижу журнала консоли, значит, он тоже не запускается.

javascript jquery three.js aframe ar.js

25.04.2018 18:38

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

2 291

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы зарегистрировали компонент, который обрабатывает звук при каждом тике?

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

<script>
AFRAME.registerComponent('soundhandler', {
    tick: function () {
           var entity = document.querySelector('[sound]');
         if (document.querySelector('a-marker').object3D.visible == true) {
            entity.components.sound.playSound();
        } else {
            entity.components.sound.pauseSound();
        }

     }
});
</script>

Благодарность! Я пытался зарегистрировать компонент, но, должно быть, неправильно написал свой код, поскольку он не выполнялся, не говоря уже о создании журнала консоли. Возможно, это было с тех пор, как я попытался написать это в голове, а не в конце тега тела. Это сработало отлично.

— 26.04.2018 22:58

26.04.2018 13:13