プログラムとタグを連携させる
前回は、"a-sound"タグを使い、音源をVR空間に配置してみました。
今回は、このオブジェクトとボタンとの連携についてのお話です。
idを使ってオブジェクトにアクセスする
"a-xxx"タグのアトリビュートとして、"id"をつけていたタグが複数ありました。
この"id"を使う事で、プログラム側からアクセスする事ができます。
具体的には、"getElementById関数"を使います。(以前にもやりましたね!!)
main.js
const オブジェクト = document.getElementById("タグに付けたID");
音源とボタンを連携させる
ではさっそく、音源とボタンにアクセスしてみます。
"a-sound"に付けた"id"は"my_sound01"、
"a-image"に付けた"id"は"my_btn01"でしたね。
具体的な記述は次の様になります。
main.js
const sound01 = document.getElementById("my_sound01");
const btn01 = document.getElementById("my_btn01");
ボタンをクリックする
ここまで来ると後は簡単です。
"btn01"オブジェクトに対して"addEventListener関数"を使い、クリックイベントを設定します。(こちらも以前やりましたね!!)
main.js
btn01.addEventListener("click", (e)=>{
// ボタンをクリックするとこの部分が実行されます
});
動画の再生と停止
ボタンをクリックするその都度、再生中か停止中かを判定して動画を制御します。
動画オブジェクト"sound01"から音源にアクセスし、再生/停止の命令を記述していきます。
具体的な処理は次の様になります。
main.js
btn01.addEventListener("click", (e)=>{
const sound = sound01.components.sound;// 音源にアクセス
if(sound.isPlaying){// 音源が再生されているかどうかを判定
sound.pauseSound();// 音源を再生
e.target.setAttribute("src", "#img_pause");// ボタンの画像を変更
}else{
sound.playSound();// 音源を停止
e.target.setAttribute("src", "#img_play");// ボタンの画像を変更
}
});
動作確認をする
最後に全体のコードを載せておきますね。(コピペでもいけますよ!!)
main.js
"use strict";
// Window
window.onload = (e)=>{
//console.log("onload!!");
const scene = document.querySelector("a-scene");
const sound01 = document.getElementById("my_sound01");
const btn01 = document.getElementById("my_btn01");
btn01.addEventListener("click", (e)=>{
const sound = sound01.components.sound;
if(sound.isPlaying){
sound.pauseSound();
e.target.setAttribute("src", "#img_pause");
}else{
sound.playSound();
e.target.setAttribute("src", "#img_play");
}
});
}
カーソルをボタンに合わせ、クリックする事で音源を再生/停止する事ができる様になりました。(見た目は変わりませんね!!)
キーボードの上下左右でVR空間を移動すると、音源が聞こえてくる方向が変化する事がわかると思います。(文字では伝わらない!!)
次回は、VRデバイス(OculusQuest2)のコントローラーについてのお話です。