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

2
src/index.html
View File

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