title: How to dynamically change background audio in A-FRAME
body: <p>I am creating a 360° image gallery and want to change the source of the audio in the  element when the 360° image changes. The Glitch is here: https://glitch.com/edit/#!/360-gallery-for-class -</p>
  <p>This is based on the following tutorial. <a href="https://aframe.io/docs/1.2.0/guides/building-a-360-image-gallery.html#sidebar" rel="nofollow noreferrer">https://aframe.io/docs/1.2.0/guides/building-a-360-image-gallery.html#sidebar</a></p>
  <pre><code>  &lt;head&gt;
     &lt;meta charset=&quot;utf-8&quot;&gt;
     &lt;title&gt;360&amp;deg; Image Gallery&lt;/title&gt;
     &lt;meta name=&quot;description&quot; content=&quot;360&amp;deg; Image Gallery - A-Frame&quot;&gt;
     &lt;script src=&quot;https://aframe.io/releases/1.0.4/aframe.min.js&quot;&gt;&lt;/script&gt;
     &lt;script src=&quot;https://unpkg.com/aframe-event-set-component@5/dist/aframe-event-set-component.min.js&quot;&gt;&lt;/script&gt;
     &lt;script src=&quot;https://unpkg.com/aframe-layout-component@5.3.0/dist/aframe-layout-component.min.js&quot;&gt;&lt;/script&gt;
     &lt;script src=&quot;https://unpkg.com/aframe-template-component@3.2.1/dist/aframe-template-component.min.js&quot;&gt;&lt;/script&gt;
     &lt;script src=&quot;https://unpkg.com/aframe-proxy-event-component@2.1.0/dist/aframe-proxy-event-component.min.js&quot;&gt;&lt;/script&gt;
     
     &lt;!-- Image link template to be reused. --&gt;
     &lt;script id=&quot;link&quot; type=&quot;text/html&quot;&gt;
       &lt;a-entity class=&quot;link&quot;
         geometry=&quot;primitive: plane; height: 1; width: 1&quot;
         material=&quot;shader: flat; src: ${thumb}&quot;
         event-set__mouseenter=&quot;scale: 1.2 1.2 1&quot;
         event-set__mouseleave=&quot;scale: 1 1 1&quot;
         event-set__click=&quot;_target: #image-360; _delay: 300; material.src: ${src}&quot;
         event-set__audio=&quot;_target: #ambient; _delay: 300; sound.src: ${audio}&quot;
         proxy-event=&quot;event: click; to: #image-360; as: fade&quot;
         sound=&quot;src: #click-sound; autoplay: true; loop: false;&quot;&gt;&lt;/a-entity&gt;
         
         
  
     &lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
     &lt;a-scene&gt;
       &lt;a-assets&gt;
         &lt;!-- thumbnails--&gt;
         &lt;img id=&quot;city-thumb&quot; crossorigin=&quot;anonymous&quot; src=&quot;https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-city.jpg&quot;&gt;
         &lt;img id=&quot;cubes-thumb&quot; crossorigin=&quot;anonymous&quot; src=&quot;https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-cubes.jpg&quot;&gt;
         &lt;img id=&quot;sechelt-thumb&quot; crossorigin=&quot;anonymous&quot; src=&quot;https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-sechelt.jpg&quot;&gt;
         &lt;!--audio--&gt;
         &lt;audio id=&quot;click-sound&quot; crossorigin=&quot;anonymous&quot; src=&quot;https://cdn.aframe.io/360-image-gallery-boilerplate/audio/click.ogg&quot;&gt;&lt;/audio&gt;
         &lt;audio id=&quot;city-sound&quot; crossorigin=&quot;anonymous&quot; preload=&quot;auto&quot; src=&quot;https://cdn.glitch.com/7338225a-c79f-422d-9292-78f0c3aa39d1%2FSix%20Seasons%20-%20Unicorn%20Heads.mp3?v=1631539928688&quot;&gt;&lt;/audio&gt;
         &lt;audio id=&quot;cubes-sound&quot; crossorigin=&quot;anonymous&quot; preload=&quot;auto&quot; src=&quot;https://cdn.glitch.com/7338225a-c79f-422d-9292-78f0c3aa39d1%2FO%20Boy%20-%20Jeremy%20Black.mp3?v=1631541371169&quot;&gt;&lt;/audio&gt;
         &lt;audio id=&quot;sechelt-sound&quot; crossorigin=&quot;anonymous&quot; preload=&quot;auto&quot; src=&quot;https://cdn.glitch.com/7338225a-c79f-422d-9292-78f0c3aa39d1%2FThe%20Stoic%20and%20the%20Sailor%20-%20Unicorn%20Heads.mp3?v=1631541374784&quot;&gt;&lt;/audio&gt;
         
         
         &lt;!--360 images--&gt;
         &lt;img id=&quot;city&quot; crossorigin=&quot;anonymous&quot; src=&quot;https://cdn.aframe.io/360-image-gallery-boilerplate/img/city.jpg&quot;&gt;
         &lt;img id=&quot;cubes&quot; crossorigin=&quot;anonymous&quot; src=&quot;https://cdn.aframe.io/360-image-gallery-boilerplate/img/cubes.jpg&quot;&gt;
         &lt;img id=&quot;sechelt&quot; crossorigin=&quot;anonymous&quot; src=&quot;https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg&quot;&gt;
  
       &lt;/a-assets&gt;
  
       &lt;!-- 360-degree image. --&gt;
       &lt;a-sky id=&quot;image-360&quot; radius=&quot;10&quot; src=&quot;#city&quot; 
              animation__fade=&quot;property: components.material.material.color; type: color; from: #FFF; to: #000; dur: 300; startEvents: fade&quot;
              animation__fadeback=&quot;property: components.material.material.color; type: color; from: #000; to: #FFF; dur: 300; startEvents: animationcomplete__fade&quot;&gt;
       &lt;/a-sky&gt;
   
       &lt;a-sound id=&quot;ambient&quot; src=&quot;#sechelt-sound&quot; autoplay=&quot;true&quot; loop=&quot;true&quot; position=&quot;0 2 5&quot;&gt;&lt;/a-sound&gt;
  
       &lt;!-- Image links. --&gt;
       &lt;a-entity id=&quot;links&quot; layout=&quot;type: line; margin: 1.5&quot; position=&quot;0 -1 -4&quot;&gt;
         &lt;a-entity template=&quot;src: #link&quot; data-src=&quot;#cubes&quot; data-audio=&quot;#cubes-sound&quot; data-thumb=&quot;#cubes-thumb&quot;&gt;&lt;/a-entity&gt;
         &lt;a-entity template=&quot;src: #link&quot; data-src=&quot;#city&quot; data-audio=&quot;#city-sound&quot; data-thumb=&quot;#city-thumb&quot;&gt;&lt;/a-entity&gt;
         &lt;a-entity template=&quot;src: #link&quot; data-src=&quot;#sechelt&quot; data-audio=&quot;#sechelt-sound&quot; data-thumb=&quot;#sechelt-thumb&quot;&gt;&lt;/a-entity&gt;
       &lt;/a-entity&gt;
  
       &lt;!-- Camera + cursor. --&gt;
       &lt;a-entity camera look-controls&gt;
         &lt;a-cursor
           id=&quot;cursor&quot;
           animation__click=&quot;property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150&quot;
           animation__fusing=&quot;property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500&quot;
           event-set__mouseenter=&quot;_event: mouseenter; color: springgreen&quot;
           event-set__mouseleave=&quot;_event: mouseleave; color: black&quot;
           raycaster=&quot;objects: .link&quot;&gt;&lt;/a-cursor&gt;
       &lt;/a-entity&gt;
        &lt;/a-scene&gt;
  </code></pre>