audio preview fade ins

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();
   }),