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 ed68cb462ef209df770430a74de6fb0912bd1da5..e2f8a35193d8fdff02ef6126a14862c4d9a3d4e3 100644
--- a/src/assets/stylesheets/audio.scss
+++ b/src/assets/stylesheets/audio.scss
@@ -65,6 +65,7 @@
position:relative;
width: 111px;
height: 111px;
+ cursor: pointer;
}
&__icon-part {
diff --git a/src/hub.html b/src/hub.html
index 0b3b72b38371ce427919e04a6326bd4bc488ba5d..581bc3ffe008dc53cb4be3c414c119935af629e6 100644
--- a/src/hub.html
+++ b/src/hub.html
@@ -19,7 +19,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 a3cb308e4b96d840880c1543fe19cbd341e158dd..43d39ba0a1e442f55dc095b29e63b64096be68ae 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -112,7 +112,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);
@@ -170,37 +169,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 });
};
@@ -270,8 +254,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 });
}
@@ -443,10 +427,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();
}
};
@@ -454,8 +438,7 @@ class UIRoot extends Component {
this.setState({ showProfileEntry: false });
};
- beginAudioSetup = async () => {
- this.startTestTone();
+ beginAudioSetup = () => {
this.setState({ entryStep: ENTRY_STEPS.audio_setup });
};
@@ -518,6 +501,7 @@ class UIRoot extends Component {
}
this.stopTestTone();
+ clearTimeout(this.testToneTimeout);
if (this.state.micLevelAudioContext) {
this.state.micLevelAudioContext.close();
@@ -707,7 +691,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 8c4e0ed6d1f33fc621f574ecfe6d8ea52578ed59..c0f8c88b3af3a6c2e43f7111f517841c4fcfec3c 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -118,7 +118,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"
}
@@ -167,7 +167,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: {