javascript - 在标记检测 A 帧 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.log("playing");
} else {
entity.components.sound.pauseSound();
console.log("not playing");
}
但是,它不起作用。关于为什么这不起作用或不起作用的任何想法?我什至没有看到控制台日志,所以它似乎也没有运行。
解决方案
您是否注册了一个处理每个滴答声的组件?
<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>
推荐阅读
- laravel - Laravel 日志,如何检索级别?
- python - 在线发布脚本
- async-await - karma-typescript:使用 Async 关键字导入 JS 文件
- java - SQLite 数据库游标初始化异常
- powershell - Powershell 递归搜索以选择 .txt 文件,然后将所有文件的内容输出到单个 .txt 文件中
- python - Discord.py 机器人无法 ping,有人可以告诉我该怎么做吗?
- image - 使用单应矩阵并将其分解以找到固定在中心的平面的方向
- mysql - 参数 2 中的 JSON 文本无效 - 使用 Spring JPA 的 json_contains
- python - div中的Beautifulsoup打印值
- javascript - 我在自动刷新网页内容时遇到问题