diff --git a/src/assets/sfx/tone.mp3 b/src/assets/sfx/tone.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..304cf7cbc36aa31baee9e9de534adafa0aed93ba
Binary files /dev/null and b/src/assets/sfx/tone.mp3 differ
diff --git a/src/assets/sfx/tone.ogg b/src/assets/sfx/tone.ogg
old mode 100755
new mode 100644
index c1d5d5f765d600523a9cd920f08c26ab92489ae3..d0b5b151fcf45e01c2cd53853013c2cd8d9cf80d
Binary files a/src/assets/sfx/tone.ogg and b/src/assets/sfx/tone.ogg differ
diff --git a/src/assets/sfx/tone.wav b/src/assets/sfx/tone.wav
new file mode 100644
index 0000000000000000000000000000000000000000..2d7b195387bbddd53c8ac4508657ecd3f9abb5fd
Binary files /dev/null and b/src/assets/sfx/tone.wav differ
diff --git a/src/assets/sfx/tone.webm b/src/assets/sfx/tone.webm
new file mode 100644
index 0000000000000000000000000000000000000000..de9789187bd8b1cdc70152b2cd9cf2cb5dc5400a
Binary files /dev/null and b/src/assets/sfx/tone.webm differ
diff --git a/src/assets/stylesheets/audio.scss b/src/assets/stylesheets/audio.scss
index d73a85eddc926c4b9a2f58c21fd4a97521822fd8..97abcfaa415e02ab6a9cbd1fb5ae2b54f11328a4 100644
--- a/src/assets/stylesheets/audio.scss
+++ b/src/assets/stylesheets/audio.scss
@@ -66,6 +66,7 @@
position:relative;
width: 111px;
height: 111px;
+ cursor: pointer;
}
&__icon-part {
diff --git a/src/hub.html b/src/hub.html
index edb7395d4641f10c27994b3399dc580e72f6952b..ad2bcf9af57cca18c10b72994e37b8a2bbe5e258 100644
--- a/src/hub.html
+++ b/src/hub.html
@@ -16,7 +16,12 @@
</head>
<body data-html-prefix="<%= HTML_PREFIX %>">
- <audio id="test-tone" src="./assets/sfx/tone.ogg"></audio>
+ <audio id="test-tone">
+ <source src="./assets/sfx/tone.webm" type="audio/webm"/>
+ <source src="./assets/sfx/tone.mp3" type="audio/mpeg"/>
+ <source src="./assets/sfx/tone.ogg" type="audio/ogg"/>
+ <source src="./assets/sfx/tone.wav" type="audio/wav"/>
+ </audio>
<a-scene
networked-scene="adapter: janus; audio: true; debug: true; connectOnLoad: false;"
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index 2883d23f066498e941d561b6722b9fc5b434590c..6dd077c36d747ac1b5cbbf0eebddb17ef97cb8c1 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -101,7 +101,6 @@ class UIRoot extends Component {
}
componentDidMount() {
- this.setupTestTone();
this.props.concurrentLoadDetector.addEventListener("concurrentload", this.onConcurrentLoad);
this.micLevelMovingAverage = MovingAverage(100);
this.props.scene.addEventListener("loaded", this.onSceneLoaded);
@@ -151,37 +150,22 @@ class UIRoot extends Component {
}
};
- setupTestTone = () => {
+ playTestTone = () => {
const toneClip = document.querySelector("#test-tone");
- const toneLength = 1800;
- const toneDelay = 5000;
-
- const toneIndicatorLoop = () => {
- this.setState({ tonePlaying: false });
-
- setTimeout(() => {
- this.setState({ tonePlaying: true });
- setTimeout(() => {
- this.setState({ tonePlaying: false });
- }, toneLength);
- }, toneDelay);
- };
-
- toneClip.addEventListener("seeked", toneIndicatorLoop);
- toneClip.addEventListener("playing", toneIndicatorLoop);
- };
-
- startTestTone = () => {
- const toneClip = document.querySelector("#test-tone");
- toneClip.loop = true;
+ toneClip.currentTime = 0;
toneClip.play();
+ clearTimeout(this.testToneTimeout);
+ this.setState({ tonePlaying: true });
+ const toneLength = 1393;
+ this.testToneTimeout = setTimeout(() => {
+ this.setState({ tonePlaying: false });
+ }, toneLength);
};
stopTestTone = () => {
const toneClip = document.querySelector("#test-tone");
toneClip.pause();
toneClip.currentTime = 0;
-
this.setState({ tonePlaying: false });
};
@@ -247,8 +231,8 @@ class UIRoot extends Component {
const hasGrantedMic = await this.hasGrantedMicPermissions();
if (hasGrantedMic) {
+ this.beginAudioSetup();
await this.setMediaStreamToDefault();
- await this.beginAudioSetup();
} else {
this.setState({ entryStep: ENTRY_STEPS.mic_grant });
}
@@ -420,10 +404,10 @@ class UIRoot extends Component {
if (hasAudio) {
this.setState({ entryStep: ENTRY_STEPS.mic_granted });
} else {
- await this.beginAudioSetup();
+ this.beginAudioSetup();
}
} else {
- await this.beginAudioSetup();
+ this.beginAudioSetup();
}
};
@@ -431,8 +415,7 @@ class UIRoot extends Component {
this.setState({ showProfileEntry: false });
};
- beginAudioSetup = async () => {
- this.startTestTone();
+ beginAudioSetup = () => {
this.setState({ entryStep: ENTRY_STEPS.audio_setup });
};
@@ -495,6 +478,7 @@ class UIRoot extends Component {
}
this.stopTestTone();
+ clearTimeout(this.testToneTimeout);
if (this.state.micLevelAudioContext) {
this.state.micLevelAudioContext.close();
@@ -658,7 +642,7 @@ class UIRoot extends Component {
/>
)}
</div>
- <div className="audio-setup-panel__levels__icon">
+ <div className="audio-setup-panel__levels__icon" onClick={this.playTestTone}>
<img
src="../assets/images/level_background.png"
srcSet="../assets/images/level_background@2x.png 2x"
diff --git a/webpack.config.js b/webpack.config.js
index 55bae82132e8d8611ba8b01ffcddf1ac49109c4b..69da8694296d35a1602f88f135ebd9d8129f213f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -117,7 +117,7 @@ const config = {
loader: "html-loader",
options: {
// <a-asset-item>'s src property is overwritten with the correct transformed asset url.
- attrs: ["img:src", "a-asset-item:src", "audio:src"],
+ attrs: ["img:src", "a-asset-item:src", "audio:src", "source:src"],
// You can get transformed asset urls in an html template using ${require("pathToFile.ext")}
interpolate: "require"
}
@@ -162,7 +162,7 @@ const config = {
})
},
{
- test: /\.(png|jpg|gif|glb|ogg|woff2|svg|webm)$/,
+ test: /\.(png|jpg|gif|glb|ogg|mp3|wav|woff2|svg|webm)$/,
use: {
loader: "file-loader",
options: {