diff --git a/package.json b/package.json index a7ead1b..efadcdc 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "dependencies": { "aframe-animation-component": "^5.1.2", "aframe-animation-timeline-component": "^1.3.1", - "aframe-audioanalyser-component": "^4.0.0", + "aframe-audioanalyser-component": "^4.0.1", "aframe-cubemap-component": "^0.1.2", "aframe-event-decorators": "^1.0.2", "aframe-event-set-component": "^4.0.1", diff --git a/src/components/audio-columns.js b/src/components/audio-columns.js index 43ac977..8a3534c 100644 --- a/src/components/audio-columns.js +++ b/src/components/audio-columns.js @@ -9,10 +9,8 @@ const NUM_VALUES_PER_BOX = 72; * Column bars moving in sync to the audio via audio analyser. */ AFRAME.registerComponent('audio-columns', { - dependencies: ['audioanalyser'], - schema: { - analyser: {type: 'selector', default: '#audioanalyser'}, + analyser: {type: 'selector', default: '#audioAnalyser'}, height: {default: 1.0}, mirror: {default: 3}, scale: {default: 4.0}, diff --git a/src/components/song.js b/src/components/song.js index fa77c5b..dec8c42 100644 --- a/src/components/song.js +++ b/src/components/song.js @@ -5,6 +5,7 @@ const utils = require('../utils'); */ AFRAME.registerComponent('song', { schema: { + analyserEl: {type: 'selector', default: '#audioAnalyser'}, challengeId: {default: ''}, isPlaying: {default: false} }, @@ -13,6 +14,7 @@ AFRAME.registerComponent('song', { // Use audio element for audioanalyser. this.audio = document.createElement('audio'); this.audio.setAttribute('id', 'song'); + this.audio.crossOrigin = 'anonymous'; this.el.sceneEl.appendChild(this.audio); }, @@ -23,12 +25,13 @@ AFRAME.registerComponent('song', { // Changed challenge. if (data.challengeId !== oldData.challengeId) { let songUrl = utils.getS3FileUrl(data.challengeId, 'song.ogg'); - this.audio.src = data.challengeId ? songUrl : ''; + this.audio.setAttribute('src', data.challengeId ? songUrl : ''); } // Keep playback state up to date. if ((data.isPlaying && data.challengeId) && this.audio.paused) { console.log(`Playing ${this.audio.src}...`); + this.data.analyserEl.setAttribute('audioanalyser', 'src', this.audio); this.audio.play(); return; } else if ((!data.isPlaying || !data.challengeId) && !this.audio.paused) { diff --git a/src/templates/stage.html b/src/templates/stage.html index 8bc1d63..143f1bc 100644 --- a/src/templates/stage.html +++ b/src/templates/stage.html @@ -2,7 +2,7 @@