3
Go to list of users who liked
1
スペースコロニーXRで音楽を聴く
Posted at
はじめに
経緯はこちら。
きっかけはこちら。
成果物はこちら。
A-Frameで音楽を聴く
公式のドキュメントを確認します。
画像ファイル(再生・停止ボタン)と任意の音楽ファイル(mp3)を用意します。
ソースコード
追加するA-Frame(a-scene)のパーツです。
index.htm
<a-cameraposition="0 -320 0"cursor="rayOrigin: mouse;"></a-camera><a-assets><imgid="img_play"src="img_play.png"/></a-assets><a-assets><imgid="img_pause"src="img_pause.png"/></a-assets><a-assets><audioid="audio01"preload="auto"src="音楽.mp3"/></a-assets><a-entitysound="src: #audio01; autoplay: false; positional: false; loop: true"></a-entity><a-imageid="button01"src="#img_pause"position="0 -300 -200"scale="20 20 20"/>イベント(クリック)をトリガーとして音楽を再生(停止)、ボタンを表示(変更)します。
main.js
"use strict";// Windowwindow.onload=(e)=>{console.log("onload!!");constscene=document.querySelector("a-scene");constentity=document.querySelector('[sound]');constbutton01=document.getElementById("button01");button01.addEventListener("click",(e)=>{console.log("clicked!!");console.log(entity);if(entity.components.sound.isPlaying){console.log("paused!");entity.components.sound.pauseSound();e.target.setAttribute("src","#img_pause");}else{console.log("played!");entity.components.sound.playSound();e.target.setAttribute("src","#img_play");}});}NT金沢2025で体験(出展)
今週末(6/21(土)〜22(日))のNT金沢2025(うH)でお待ちしております！
Register as a new user and use Qiita more conveniently
- You get articles that match your needs
- You can efficiently read back useful information
- You can use dark theme