diff --git a/src/components/search.js b/src/components/search.js index ecea022..ed3b637 100644 --- a/src/components/search.js +++ b/src/components/search.js @@ -40,11 +40,26 @@ AFRAME.registerComponent('search-result', { this.audio = new Audio(); this.audio.currentTime = el.getAttribute('data-preview-start-time'); this.audio.src = utils.getS3FileUrl(el.getAttribute('data-id'), 'song.ogg'); - this.audio.volume = 0.5; + this.audio.volume = 0; this.eventDetail = {}; + + this.volumeTarget = {volume: 0}; + this.animation = AFRAME.anime({ + targets: this.volumeTarget, + delay: 250, + duration: 1500, + easing: 'easeInQuad', + volume: 0.5, + autoplay: false, + loop: false, + update: () => { + this.audio.volume = this.volumeTarget.volume; + } + }); }, remove: function () { + if (this.animation) { this.animation.pause(); } this.audio.pause(); }, @@ -52,10 +67,14 @@ AFRAME.registerComponent('search-result', { * Preview song. */ mouseenter: bindEvent(function () { + this.audio.volume = 0; + this.volumeTarget.volume = 0; this.audio.play(); + this.animation.restart(); }), mouseleave: bindEvent(function () { + if (this.animation) { this.animation.pause(); } this.audio.pause(); }),