juni/junisaber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tweak loading screen audio fades. fade down during loading. remove fade out, just pause

Browse Source
This commit is contained in:
Kevin Ngo
2018-10-12 16:51:27 -07:00
parent e5b25d343b
commit 0092a91cbe
2 changed files with 26 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/song-preview.js
View File

@@ -1,11 +1,14 @@
const ANIME = AFRAME.ANIME || AFRAME.anime;
var utils = require('../utils');
const PREVIEW_VOLUME = 0.5;
/**
* Song preview when search result selected with smart logic for preloading.
*/
AFRAME.registerComponent('song-preview-system', {
schema: {
challengeId: {default: ''},
debug: {default: false},
isSongLoading: {default: false}, // Continue to play preview song during loading.
selectedChallengeId: {type: 'string'}
@@ -25,7 +28,7 @@ AFRAME.registerComponent('song-preview-system', {
delay: 250,
duration: 1500,
easing: 'easeInQuad',
volume: 0.5,
volume: PREVIEW_VOLUME,
autoplay: false,
loop: false,
update: () => {
@@ -33,21 +36,16 @@ AFRAME.registerComponent('song-preview-system', {
}
});
this.fadeOutVolumeTarget = {volume: 0.5};
this.fadeOutAnimation = ANIME({
targets: this.fadeOutVolumeTarget,
this.fadeDownVolumeTarget = {volume: PREVIEW_VOLUME};
this.fadeDownAnimation = ANIME({
targets: this.fadeDownVolumeTarget,
duration: 500,
easing: 'easeOutQuad',
volume: 0,
easing: 'easeInQuad',
volume: 0.05,
autoplay: false,
loop: false,
update: () => {
this.audio.volume = this.fadeOutVolumeTarget.volume;
},
complete: () => {
setTimeout(() => {
this.audio.pause();
}, 1000);
this.audio.volume = this.fadeDownVolumeTarget.volume;
}
});
},
@@ -55,17 +53,22 @@ AFRAME.registerComponent('song-preview-system', {
update: function (oldData) {
const data = this.data;
// Continue to play preview song during loading to keep entertained.
if (oldData.isSongLoading && !data.isSongLoading) {
this.stopSong(true); // Flag for fade out.
// Play clicked.
// But don't start playing it if it wasn't playing already.
if (!oldData.challengeId && data.challengeId) {
if (this.analyserEl.components.audioanalyser.volume === 0) {
this.stopSong();
} else {
this.fadeDownVolumeTarget.volume = this.audio.volume;
this.fadeDownAnimation.restart();
}
return;
}
// But don't start playing it if it wasn't playing already.
if (!oldData.isSongLoading && data.isSongLoading) {
if (this.analyserEl.components.audioanalyser.volume === 0) {
this.stopSong();
}
// Song finished loading.
// Continue to play preview song during loading to keep entertained.
if (oldData.isSongLoading && !data.isSongLoading) {
this.stopSong();
return;
}
@@ -182,17 +185,11 @@ AFRAME.registerComponent('song-preview-system', {
this.currentLoadingId = preloadItem.challengeId;
},
stopSong: function (fadeOut) {
stopSong: function () {
if (!this.audio) { return; }
if (fadeOut) {
this.fadeOutVolumeTarget.volume = this.audio.volume;
this.fadeOutAnimation.restart();
return;
}
this.fadeInAnimation.pause();
if (!this.audio.paused) { this.audio.pause(); }
this.audio.volume = PREVIEW_VOLUME;
},
playSong: function (challengeId) {

2
src/index.html
View File

@@ -19,7 +19,7 @@
bind__gameover="isGameOver: isGameOver"
bind__intro-song="isPlaying: menu.active && !menuSelectedChallenge.id"
bind__song="challengeId: challenge.id; isPlaying: isPlaying; isBeatsPreloaded: challenge.isBeatsPreloaded; isGameOver: isGameOver"
bind__song-preview-system="isSongLoading: isSongLoading; selectedChallengeId: menuSelectedChallenge.id"
bind__song-preview-system="challengeId: challenge.id; isSongLoading: isSongLoading; selectedChallengeId: menuSelectedChallenge.id"
bind__overlay="enabled: !isPlaying"
animation__gameover="property: object3D.background; type: color; to: #750000; startEvents: gameover"
animation__gameoverfog="property: components.fog.el.object3D.fog.color; type: color; to: #330000; startEvents: gameover; dur: 500; easing: easeInQuad"