A-Frame Solar System: Audio not working

Hello Everyone!!

While getting some more effort into the A-Frame Solar System project, I got it to work on GitHub through its personal website function:
It’s up on https://snowprimate.github.io/
Everything is working, just the audio I’ve got into it doesn’t seem to play! I’d like to know if anyone could figure it out, reading A-Frame’s documentations seems like I’m doing everything right! (Just on iOS it won’t work since it requires audio to play on user Input). I’m also no HTML enthusiast :smiley: which is kind of getting on my way.
Code is the following:

<html>
  <head>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <!-- Asset management system -->
      <a-assets>

        <img 
          id="sun" 
          src="sun.jpg">

        <img 
          id="mercury"
          src="mercury.jpg">

        <img 
          id="venus"
          src="venus.jpg">

        <img 
          id="earth"
          src="earth.jpg">

        <img 
          id="mars"
          src="mars.jpg">

        <img 
          id="jupiter"
          src="jupiter.jpg">

        <img 
          id="uranus"
          src="uranus.jpg">
          
        <img 
          id="neptune"
          src="neptune.jpg">
          <img id="sky"
          src="sky2.jpg" transparent="true">
        <audio id="ambient" src="Ambient.mp3" autoplay="true loop="true" preload="auto"></audio>
          
      </a-assets>
      <a-entity sound="src: #ambient"></a-entity>
      <a-sky src="#sky"></a-sky>
      <a-sphere 
        src="#sun"
        color="#F5C85D"
        position="-20 1.5 -10" 
        radius="7"
        emissive="#f2de02"></a-sphere>
        <a-light type="point" position="-20 2 -10" ></a-light>

      <!-- Mercury -->
      <a-sphere
        src="#mercury"
        position="-7 1.5 -10"
        radius=".024" animation="property: rotation; to: 0 360 0; loop: true; dur: 10000"></a-sphere>

      <!-- Venus -->
      <a-sphere 
        src="#venus"
        position="-5 1.5 -10" 
        radius=".06" animation="property: rotation; to: 0 360 0; loop: true; dur: 10000"></a-sphere>

      <!-- Earth -->
      <a-sphere 
        src="#earth"
        position="-3 1.5 -10" 
        radius=".063" animation="property: rotation; to: 0 360 0; loop: true; dur: 10000"></a-sphere>

      <!-- Mars -->
      <a-sphere 
        src="#mars"
        position="-1 1.5 -10" 
        radius=".034" animation="property: rotation; to: 0 360 0; loop: true; dur: 10000"></a-sphere>

      <!-- Jupiter -->
      <a-sphere 
        src="#jupiter"
        position="1 1.5 -10"
        radius="0.7" animation="property: rotation; to: 0 360 0; loop: true; dur: 10000"></a-sphere>
      
      <!-- Saturn -->
      <a-sphere 
        src="#saturn"
        position="4 1.5 -10" 
        radius=".7" animation="property: rotation; to: 0 360 0; loop: true; dur: 10000"></a-sphere>

      <!-- Uranus -->
      <a-sphere 
        src="#uranus"
        position="7 1.5 -10"
        radius=".25" ></a-sphere>

      <!-- Neptune -->
      <a-sphere 
        src="#neptune"
        position="10 1.5 -10" 
        radius=".25" animation="property: rotation; to: 0 360 0; loop: true; dur: 10000"></a-sphere>
     
      <!-- The other not-so-basic planets. These have rings around them. The rings are made of torii (singular torus) a shape that can be used to make donuts, tubes and yes, ring shapes -->
      <a-entity id="saturn-container" position="4 1.5 -10">
        <a-sphere position="0 0 0 " radius=".8" color="#F8EC99" id="saturn"></a-sphere>
        <a-torus id="saturn-ring-1" color="#57524A" segments-tubular="50" radius="3.2" radius-tubular="0.1" rotation="90 0 0" scale=".44 .44 0.04" animation="property: rotation; to: 90 0 0; loop: true; dur: 10000"></a-torus>
        <a-torus id="saturn-ring-2" color="#A29A87" segments-tubular="50" radius="2.4" radius-tubular="0.2" rotation="90 0 0" scale=".44 .44 0.04" animation="property: rotation; to: 90 0 0; loop: true; dur: 10000"></a-torus>
      </a-entity>

      <a-entity id="uranus-container" position="7 1.5 -10">
        <a-sphere radius=".75" color="#73AAF8"></a-sphere>
        <a-torus id="uranus-ring" color="#FFFFFF" segments-tubular="50" radius="1.5" radius-tubular="0.01" rotation="-10 90 0" scale=".75 .75 0.075" animation="property: rotation; to: -10 90 0; loop: true; dur: 10000"></a-torus>
      </a-entity>

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

@lucasvinzon looks awesome!

in the <audio> element’s 's autoplay attribute, there should be a closing double quote after true.

also btw, that project just got updated so make sure to check out the new version. and more content coming next week!

and if you keep going and create your own solar system, i’m more than happy to include the solution in the project.

Hey Sony! Thanks!! Got the double-quote fixed but haven’t found the solution! Looking into the chrome dev tools, I got a warning on AudioContext: The user should initialize the audio with a command.
Eventually got to Howler.js and used their code which attempts to play if the script gets an error. Since I dodn’t know how to integrate JS into HTML, I got to this (just began the Web Dev Career Path because of that):

<html>
  <head>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <script src="howler.js-master/dist/howler.js"></script>
  </head>
  <body>
    <a-scene>
      <!-- Asset management system -->
      <a-assets>

        <img 
          id="sun" 
          src="sun.jpg">

        <img 
          id="mercury"
          src="mercury.jpg">

        <img 
          id="venus"
          src="venus.jpg">

        <img 
          id="earth"
          src="earth.jpg">

        <img 
          id="mars"
          src="mars.jpg">

        <img 
          id="jupiter"
          src="jupiter.jpg">

        <img 
          id="uranus"
          src="uranus.jpg">
          
        <img 
          id="neptune"
          src="neptune.jpg">
          <img id="sky"
          src="sky2.jpg" transparent="true">
        <audio id="ambient" src="Ambient.mp3" loop="true" preload="auto"></audio>
        
        <script src="/path/to/howler.js"></script>
<script>
    var sound = new Howl({
  src: ['sound.webm', 'Ambient.mp3'],
  onplayerror: function() {
    sound.once('unlock', function() {
      sound.play();
    });
  }
});

sound.play();
</script>
          
      </a-assets>
      <a-entity></a-entity>
      <a-sky src="#sky"></a-sky>
      <a-sphere 
        src="#sun"
        color="#F5C85D"
        position="-8 1.55 -2" 
        radius="7"
        material = "shader: flat"
        sound="src: #ambient; on: click; volume: 1; refDistance: 20; rolloffFactor: 0.1"></a-sphere>
                          
        <a-light type="point" position="-8 1.6 -5" ></a-light>

      <!-- Mercury -->
      <a-sphere
        src="#mercury"
        position="5 1.55 -2"
        radius=".024" animation="property: rotation; to: 0 360 0; loop: true; dur: 10000"></a-sphere>

      <!-- Venus -->
      <a-sphere 
        src="#venus"
        position="7 1.55 -2" 
        radius=".06" animation="property: rotation; to: 0 360 0; loop: true; dur: 10000"></a-sphere>

      <!-- Earth -->
      <a-sphere 
        src="#earth"
        position="9 1.55 -2" 
        radius=".063" animation="property: rotation; to: 0 360 0; loop: true; dur: 10000"></a-sphere>

      <!-- Mars -->
      <a-sphere 
        src="#mars"
        position="11 1.55 -2" 
        radius=".034" animation="property: rotation; to: 0 360 0; loop: true; dur: 10000"></a-sphere>

      <!-- Jupiter -->
      <a-sphere 
        src="#jupiter"
        position="13 1.55 -2"
        radius="0.7" animation="property: rotation; to: 0 360 0; loop: true; dur: 10000"></a-sphere>
      
      <!-- Saturn -->
      <a-sphere 
        src="#saturn"
        position="16 1.55 -2" 
        radius=".7" animation="property: rotation; to: 0 360 0; loop: true; dur: 10000"></a-sphere>

      <!-- Uranus -->
      <a-sphere 
        src="#uranus"
        position="19 1.55 -2"
        radius=".25" animation="property: rotation; to: 0 360 0; loop: true; dur: 10000"></a-sphere>

      <!-- Neptune -->
      <a-sphere 
        src="#neptune"
        position="22 1.55 -2" 
        radius=".25" animation="property: rotation; to: 0 360 0; loop: true; dur: 10000"></a-sphere>
     
      <!-- The other not-so-basic planets. These have rings around them. The rings are made of torii (singular torus) a shape that can be used to make donuts, tubes and yes, ring shapes -->
      <a-entity id="saturn-container" position="16 1.55 -2">
        <a-sphere position="0 0 0 " radius=".8" color="#F8EC99" id="saturn"></a-sphere>
        <a-torus id="saturn-ring-1" color="#57524A" segments-tubular="50" radius="3.2" radius-tubular="0.1" rotation="90 0 0" scale=".44 .44 0.04" animation="property: rotation; to: 90 0 0; loop: true; dur: 10000"></a-torus>
        <a-torus id="saturn-ring-2" color="#A29A87" segments-tubular="50" radius="2.4" radius-tubular="0.2" rotation="90 0 0" scale=".44 .44 0.04" animation="property: rotation; to: 90 0 0; loop: true; dur: 10000"></a-torus>
      </a-entity>

      <a-entity id="uranus-container" position="19 1.55 -2">
        <a-sphere radius=".75" color="#73AAF8"></a-sphere>
        <a-torus id="uranus-ring" color="#FFFFFF" segments-tubular="50" radius="1.5" radius-tubular="0.01" rotation="-10 90 0" scale=".75 .75 0.075" animation="property: rotation; to: -10 90 0; loop: true; dur: 10000"></a-torus>
      </a-entity>

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

I just didn’t understand what you meant by including the solution in the project! You meant push the solution you guys have to my Github project?
Thanks so much for your response!
Lucas :smiley:

try this: add an <a-sound> element in the scene, but outside of the asset management system:

<a-scene>
  <a-assets>
    <audio 
      id="background"
      src="https://cdn.aframe.io/basic-guide/audio/backgroundnoise.wav"></audio>
  </a-assets>

  <a-sound 
    src="#background" 
    autoplay="true"></a-sound>
</a-scene>

and let me know if that fix the problem :slight_smile:

Yaaaaaaaaaa Thanks Sonny! The experience is great right now!!

1 Like