-
Notifications
You must be signed in to change notification settings - Fork 0
/
audio_feedback.html
executable file
·66 lines (55 loc) · 2.35 KB
/
audio_feedback.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
type="text/css"
href="style.css">
<script src="https://aframe.io/aframe/dist/aframe-master.min.js"></script>
<script src="./components/backButton.js"></script>
<script src="./components/goto.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<audio id="noise"
src="https://cdn.aframe.io/basic-guide/audio/backgroundnoise.wav"
autoplay
preload
loop="true"></audio>
</a-assets>
<a-entity id="backButton"
back-button></a-entity>
<a-entity text="value: Hello! color: #BBB"
position="-0.9 0.2 -3"
scale="1.5 1.5 1.5"></a-entity>
<!-- <a-sound src="https://cdn.aframe.io/basic-guide/audio/backgroundnoise.wav"
position="-3 1 -4" ></a-sound> -->
<a-box id="button"
color="tomato"
position="5 2 -5"
rotation="0 45 45"
scale="2 2 2"
sound="#noise; on: click"></a-box>
<a-camera>
<a-entity animation__click="property: scale; startEvents: click; easing: easeInCubic; dur: 50; from: 0.01 0.01 0.01; to: .005 .005 .005"
animation__fusing="property: scale; startEvents: fusing; easing: easeInCubic; dur: 250; from: .01 .01 .01; to: 0.005 0.005 0.005"
animation__fusing__color="property: components.material.material.color; type: color; startEvents: fusing; dur: 250; to: yellow"
animation__mouseleave="property: scale; startEvents: mouseleave; easing: easeInCubic; dur: 12; to: .01 .01 .01"
animation__mouseleave__color="property: components.material.material.color; type: color; startEvents: mouseleave; dur: 12; to: #FFF"
cursor="fuse: true;"
scale=".01 .01 .01"
material="color: white; shader: flat"
position="0 0 -1"
geometry="primitive: sphere"></a-entity>
</a-camera>
<script>
// One-liner to resume playback when user interacted with the page.
document.querySelector('#button').addEventListener('click', function () {
const soundEl = document.querySelector('[sound]');
console.log('play sound thing', soundEl, document.querySelector('#button'));
soundEl.components.sound.playSound();
});
</script>
</a-scene>
</body>
</html>