Fixes THREE.Audio.load is deprecated, closes aframevr#1472 (aframevr#…

…1629) * Fixes THREE.Audio.load is deprecated, closes aframevr#1472 * Initialize THREE.AudioLoader in sound.init * Sound CMPT use src property type, closes aframevr#1356 * Tests update for aframevr#1629, using sound.src url() * Sound component (update docs/examples) for aframevr#1629 * Fix sound component (docs/examples) for aframevr#1629
chuxin-liao · Jul 14, 2016 · 733ab95 · 733ab95
1 parent 33fb096
commit 733ab95
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 21 deletions.
diff --git a/docs/components/sound.md b/docs/components/sound.md
@@ -12,18 +12,18 @@ The sound component defines the entity as a source of sound or audio. The sound
 
 ```html
 <a-entity id="river" geometry="primitive: plane" material="color: blue"
-          position="-10 0 0" sound="src: river.mp3; autoplay: true"></a-entity>
+          position="-10 0 0" sound="src: url(river.mp3); autoplay: true"></a-entity>
 ```
 
 ## Properties
 
-| Property | Description                                                | Default Value |
-|----------|------------------------------------------------------------|---------------|
-| autoplay | Whether to automatically play sound once set.              | false         |
-| on       | An event for the entity to listen to before playing sound. | click         |
-| loop     | Whether to loop the sound once the sound finishes playing. | false         |
-| src      | Path to sound file.                                        | null          |
-| volume   | How loud to play the sound.                                | 1             |
+| Property | Description                                                           | Default Value |
+|----------|-----------------------------------------------------------------------|---------------|
+| autoplay | Whether to automatically play sound once set.                         | false         |
+| on       | An event for the entity to listen to before playing sound.            | null          |
+| loop     | Whether to loop the sound once the sound finishes playing.            | false         |
+| src      | Selector to an asset `<audio>`or `url()`-enclosed path to sound file. | null          |
+| volume   | How loud to play the sound.                                           | 1             |
 
 ## Events
 
@@ -39,7 +39,7 @@ The `sound` component can also listen to an event before playing as well. For ex
 <a-entity cursor position="0 0 -5"></a-entity>
 
 <a-entity id="elmo" geometry="primitive: box" material="src: elmo.png"
-          sound="src: ticklelaugh.mp3; on: click"></a-entity>
+          sound="src: url(ticklelaugh.mp3); on: click"></a-entity>
 ```
 
 ## Preloading a Sound Asset
@@ -52,7 +52,7 @@ For performance, it is recommended to block the scene on the sound asset to prel
     <audio id="river" src="river.mp3">
   </a-assets>
 
-  <a-entity sound="src: river.mp3"></a-entity>
+  <a-entity sound="src: #river"></a-entity>
 </a-scene>
 ```
 

diff --git a/examples/showcase/anime-UI/index.html b/examples/showcase/anime-UI/index.html
@@ -226,8 +226,8 @@
       <a-light type="ambient" color="#4f6487" ></a-light>
 
       <!-- Sounds. -->
-      <a-entity sound="autoplay: true; src: audio/321103__nsstudios__blip1.wav;"></a-entity>
-      <a-entity sound="autoplay: true; src: audio/321104__nsstudios__blip2.wav;"></a-entity>
+      <a-entity sound="autoplay: true; src: #blip1;"></a-entity>
+      <a-entity sound="autoplay: true; src: #blip2;"></a-entity>
     </a-scene>
   </body>
 </html>
diff --git a/examples/test/cursor/index.html b/examples/test/cursor/index.html
@@ -9,6 +9,8 @@
   <body>
     <a-scene stats>
       <a-assets>
+        <audio id="blip1" src="../../showcase/anime-UI/audio/321103__nsstudios__blip1.wav"></audio>
+        <audio id="blip2" src="../../showcase/anime-UI/audio/321104__nsstudios__blip2.wav"></audio>
         <a-mixin id="cube" geometry="primitive: box"></a-mixin>
         <a-mixin id="cube-hovered" material="color: #CC435F"></a-mixin>
         <a-mixin id="cube-selected" material="color: #876A96"></a-mixin>
@@ -41,8 +43,8 @@
 
       <a-entity position="0 1 0">
         <a-entity mixin="green cube"
-                  sound__1="on: click; src: ../../showcase/anime-UI/audio/321103__nsstudios__blip1.wav;"
-                  sound__2="on: mouseenter; src: ../../showcase/anime-UI/audio/321104__nsstudios__blip2.wav;">
+                  sound__1="on: click; src: #blip1;"
+                  sound__2="on: mouseenter; src: #blip2;">
           <a-animation begin="click" attribute="rotation" to="0 360 0"
                        easing="linear" dur="2000" fill="backwards"></a-animation>
         </a-entity>

diff --git a/src/components/sound.js b/src/components/sound.js
@@ -9,8 +9,8 @@ var warn = debug('components:sound:warn');
  */
 module.exports.Component = registerComponent('sound', {
   schema: {
-    src: { default: '' },
-    on: { default: 'click' },
+    src: { type: 'src' },
+    on: { default: '' },
     autoplay: { default: false },
     loop: { default: false },
     volume: { default: 1 }
@@ -20,6 +20,7 @@ module.exports.Component = registerComponent('sound', {
 
   init: function () {
     this.listener = null;
+    this.audioLoader = new THREE.AudioLoader();
     this.sound = null;
     this.playSound = this.playSound.bind(this);
   },
@@ -46,7 +47,13 @@ module.exports.Component = registerComponent('sound', {
     }
 
     // All sound values set. Load in `src`.
-    if (srcChanged) { sound.load(data.src); }
+    if (srcChanged) {
+      this.audioLoader.load(data.src, function (buffer) {
+        sound.setBuffer(buffer);
+        // Remove this key from cache, otherwise we can't play it again
+        THREE.Cache.remove(data.src);
+      });
+    }
   },
 
   /**

diff --git a/tests/components/sound.test.js b/tests/components/sound.test.js
@@ -5,7 +5,7 @@ suite('sound', function () {
   setup(function (done) {
     var el = this.el = entityFactory();
 
-    el.setAttribute('sound', 'src: mysoundfile.mp3; autoplay: true; loop: true');
+    el.setAttribute('sound', 'src: url(mysoundfile.mp3); autoplay: true; loop: true');
     el.addEventListener('loaded', function () {
       done();
     });
@@ -22,15 +22,15 @@ suite('sound', function () {
     test('re-creates sound when changing src', function () {
       var el = this.el;
       var oldAudio = el.getObject3D('sound');
-      el.setAttribute('sound', 'src', 'anothersound.wav');
+      el.setAttribute('sound', 'src', 'url(anothersound.wav)');
       assert.notEqual(oldAudio.uuid, el.getObject3D('sound').uuid);
     });
 
     test('can change src', function () {
       var audio;
       var el = this.el;
 
-      el.setAttribute('sound', 'src', 'anothersound.wav');
+      el.setAttribute('sound', 'src', 'url(anothersound.wav)');
       audio = el.getObject3D('sound');
       assert.equal(audio.type, 'Audio');
       assert.ok(audio.autoplay);

diff --git a/tests/core/a-entity.test.js b/tests/core/a-entity.test.js
@@ -497,7 +497,7 @@ suite('a-entity', function () {
     test('returns full data of a multiple component', function () {
       var componentData;
       var el = this.el;
-      el.setAttribute('sound__test', 'src: mysoundfile.mp3');
+      el.setAttribute('sound__test', 'src: url(mysoundfile.mp3)');
       componentData = el.getComputedAttribute('sound__test');
       assert.equal(componentData.src, 'mysoundfile.mp3');
       assert.equal(componentData.autoplay, false);