Exercise

Audio in Networked A-Frame

https://glitch.com/edit/#!/networked-aframe-audio

<html>
  <head>
    <meta charset="utf-8">
    <title>Networked Audio Example — Networked-Aframe</title>
    <meta name="description" content="etworked Audio Example — Networked-Aframe">

    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.5/socket.io.min.js"></script>
    <script src="easyrtc/easyrtc.js"></script>
    <script src="https://unpkg.com/networked-aframe@^0.6.0/dist/networked-aframe.min.js"></script>

    <script src="https://unpkg.com/aframe-randomizer-components@^3.0.1/dist/aframe-randomizer-components.min.js"></script>
    <script src="https://unpkg.com/aframe-particle-system-component@1.0.5/dist/aframe-particle-system-component.min.js"></script>
    <script src="/js/spawn-in-circle.component.js"></script>
  </head>
  <body>
    <a-scene networked-scene="
      room: audio;
      adapter: easyrtc;
      audio: true;
      debug: true;
    ">
      <a-assets>

        <img id="grid" src="https://img.gs/bbdkhfbzkk/stretch/https://i.imgur.com/25P1geh.png" crossorigin="anonymous">
        <img id="sky" src="https://img.gs/bbdkhfbzkk/2048x2048,stretch/http://i.imgur.com/WqlqEkq.jpg" crossorigin="anonymous" />

        <!-- Templates -->

        <!-- Avatar -->
        <template id="avatar-template">
          <a-entity class="avatar" networked-audio-source>
            <a-sphere class="head"
              color="#5985ff"
              scale="0.45 0.5 0.4"
              random-color
            ></a-sphere>
            <a-entity class="face"
              position="0 0.05 0"
            >
              <a-sphere class="eye"
                color="#efefef"
                position="0.16 0.1 -0.35"
                scale="0.12 0.12 0.12"
              >
                <a-sphere class="pupil"
                  color="#000"
                  position="0 0 -1"
                  scale="0.2 0.2 0.2"
                ></a-sphere>
              </a-sphere>
              <a-sphere class="eye"
                color="#efefef"
                position="-0.16 0.1 -0.35"
                scale="0.12 0.12 0.12"
              >
                <a-sphere class="pupil"
                  color="#000"
                  position="0 0 -1"
                  scale="0.2 0.2 0.2"
                ></a-sphere>
              </a-sphere>
            </a-entity>
          </a-entity>
        </template>

        <!-- /Templates -->
      </a-assets>

      <a-entity id="player" networked="template:#avatar-template;attachTemplateToLocal:false;" camera spawn-in-circle="radius:3;" position="0 1.3 0" wasd-controls look-controls>
        <a-sphere class="head"
          visible="false"
          random-color
        ></a-sphere>
      </a-entity>

      <a-entity position="0 0 0"
        geometry="primitive: plane; width: 10000; height: 10000;" rotation="-90 0 0"
        material="src: #grid; repeat: 10000 10000; transparent: true; metalness:0.6; roughness: 0.4; sphericalEnvMap: #sky;"></a-entity>

      <a-entity light="color: #ccccff; intensity: 1; type: ambient;" visible=""></a-entity>
      <a-entity light="color: #ffaaff; intensity: 1.5" position="5 5 5"></a-entity>

      <a-sky src="#sky" rotation="0 -90 0"></a-sky>
      <a-entity id="particles" particle-system="preset: snow"></a-entity>
    </a-scene>

    <script>
      // On mobile remove elements that are resource heavy
      var isMobile = AFRAME.utils.device.isMobile();

      if (isMobile) {
        var particles = document.getElementById('particles');
        particles.parentNode.removeChild(particles);
      }
      
      // Define custom schema for syncing avatar color, set by random-color
      NAF.schemas.add({
        template: '#avatar-template',
        components: [
          'position',
          'rotation',
          {
            selector: '.head',
            component: 'material',
            property: 'color'
          }
        ]
      });
    </script>
  </body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *