song progress ring

src/components/song-progress-ring.js

@@ -0,0 +1,37 @@
+AFRAME.registerComponent('song-progress-ring', {
+  dependencies: ['geometry', 'material'],
+
+  schema: {
+    challengeId: {type: 'string'},
+    enabled: {default: false}
+  },
+
+  init: function () {
+    this.tick = AFRAME.utils.throttleTick(this.tick.bind(this), 2000);
+    this.el.sceneEl.addEventListener('cleargame', () => {
+      this.progress.value = 0;
+    });
+  },
+
+  update: function (oldData) {
+    // Reset when changing song.
+    if (oldData.challengeId !== this.data.challengeId && this.progress) {
+      this.progress.value = 0;
+    }
+  },
+
+  play: function () {
+    this.context = this.el.sceneEl.components.song.context;
+    this.progress = this.el.getObject3D('mesh').material.uniforms.progress;
+  },
+
+  tick: function () {
+    if (!this.data.enabled) { return; }
+
+    const source = this.el.sceneEl.components.song.source;
+    if (!source) { return; }
+
+    const progress = this.context.currentTime / source.buffer.duration;
+    this.progress.value = progress;
+  }
+});