Search code examples
aframe

A-Frame Sound Not Playing


I hope someone can help me. I can't make the sound to play. I'm kinda new in A-Frame. I hope anyone can help me check what's wrong with my code:

<html>
  <head>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-assets>
        <img id="sky" src="https://content.codecademy.com/courses/learn-a-frame/building-the-environment/mountains2.jpg">
        <img id="grass" src="https://upload.wikimedia.org/wikipedia/commons/f/f4/Light_green_oats_field.jpg">
        <a-asset-item 
          id="codey" 
          src="https://content.codecademy.com/courses/learn-a-frame/building-the-environment/codey.gltf"></a-asset-item>

<a-asset-item
          id="music"         
          src="https://cdn.aframe.io/basic-guide/audio/backgroundnoise.wav"
        ></a-asset-item>
      </a-assets>
      
      <a-sky src="#sky"></a-sky>
      <a-plane 
        src="#grass"
        rotation="-90 0 0" 
        width="20" 
        height="20"></a-plane>
      <a-entity
        text="value: Welcome!; color: #FFD500; align: center"
        position="0 3 -4"
        scale="6 6 6"
        animation="property: object3D.position.y;
          to: 3.2; 
          dir: alternate; 
          dur: 2000; 
          loop: true"></a-entity>  
      <a-entity 
        gltf-model="#codey" 
        position="0 2 -4" 
        scale="0.5 0.5 0.5"
        animation="property: object3D.position.y;
          to: 2.2; 
          dir: alternate; 
          dur: 2000; 
          loop: true"></a-entity>
      <a-light 
        type="point" 
        intensity="2" 
        position="2 4 4"></a-light>
       <!-- Add entity here: -->
       
       <a-sound
        src="#music"
        autoplay = "true"
        ></a-sound>

    </a-scene>
  </body>
</html>

I compared this with the answer provided in Codecademy. Codecademy actually accepted the code but did not play the sound. I think I'm missing something but I can't figure it out. I tried using different browsers but it's still not working so I think there's really something wrong with my code which I'm having a hard time figuring out.

Thanks in advance!


Solution

  • It's working now! Looks like I was missing the preload="auto" attribute which was not covered in the course.