如何动态更改 A-FRAME 中的背景音频答案

【问题标题】：How to dynamically change background audio in A-FRAME如何动态更改 A-FRAME 中的背景音频
【发布时间】：2021-11-08 22:18:16
【问题描述】：

我正在创建一个 360° 图片库，并希望在 360° 图片更改时更改元素中的音频源。故障在这里：https://glitch.com/edit/#!/360-gallery-for-class -

这是基于以下教程。 https://aframe.io/docs/1.2.0/guides/building-a-360-image-gallery.html#sidebar

  <head>
   <meta charset="utf-8">
   <title>360&deg; Image Gallery</title>
   <meta name="description" content="360&deg; Image Gallery - A-Frame">
   <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
   <script src="https://unpkg.com/aframe-event-set-component@5/dist/aframe-event-set-component.min.js"></script>
   <script src="https://unpkg.com/aframe-layout-component@5.3.0/dist/aframe-layout-component.min.js"></script>
   <script src="https://unpkg.com/aframe-template-component@3.2.1/dist/aframe-template-component.min.js"></script>
   <script src="https://unpkg.com/aframe-proxy-event-component@2.1.0/dist/aframe-proxy-event-component.min.js"></script>
   
   <!-- Image link template to be reused. -->
   <script id="link" type="text/html">
     <a-entity class="link"
       geometry="primitive: plane; height: 1; width: 1"
       material="shader: flat; src: ${thumb}"
       event-set__mouseenter="scale: 1.2 1.2 1"
       event-set__mouseleave="scale: 1 1 1"
       event-set__click="_target: #image-360; _delay: 300; material.src: ${src}"
       event-set__audio="_target: #ambient; _delay: 300; sound.src: ${audio}"
       proxy-event="event: click; to: #image-360; as: fade"
       sound="src: #click-sound; autoplay: true; loop: false;"></a-entity>
       
       

   </script>
 </head>
 <body>
   <a-scene>
     <a-assets>
       <!-- thumbnails-->
       <img id="city-thumb" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-city.jpg">
       <img id="cubes-thumb" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-cubes.jpg">
       <img id="sechelt-thumb" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-sechelt.jpg">
       <!--audio-->
       <audio id="click-sound" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/audio/click.ogg"></audio>
       <audio id="city-sound" crossorigin="anonymous" preload="auto" src="https://cdn.glitch.com/7338225a-c79f-422d-9292-78f0c3aa39d1%2FSix%20Seasons%20-%20Unicorn%20Heads.mp3?v=1631539928688"></audio>
       <audio id="cubes-sound" crossorigin="anonymous" preload="auto" src="https://cdn.glitch.com/7338225a-c79f-422d-9292-78f0c3aa39d1%2FO%20Boy%20-%20Jeremy%20Black.mp3?v=1631541371169"></audio>
       <audio id="sechelt-sound" crossorigin="anonymous" preload="auto" src="https://cdn.glitch.com/7338225a-c79f-422d-9292-78f0c3aa39d1%2FThe%20Stoic%20and%20the%20Sailor%20-%20Unicorn%20Heads.mp3?v=1631541374784"></audio>
       
       
       <!--360 images-->
       <img id="city" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/city.jpg">
       <img id="cubes" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/cubes.jpg">
       <img id="sechelt" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">

     </a-assets>

     <!-- 360-degree image. -->
     <a-sky id="image-360" radius="10" src="#city" 
            animation__fade="property: components.material.material.color; type: color; from: #FFF; to: #000; dur: 300; startEvents: fade"
            animation__fadeback="property: components.material.material.color; type: color; from: #000; to: #FFF; dur: 300; startEvents: animationcomplete__fade">
     </a-sky>
 
     <a-sound id="ambient" src="#sechelt-sound" autoplay="true" loop="true" position="0 2 5"></a-sound>

     <!-- Image links. -->
     <a-entity id="links" layout="type: line; margin: 1.5" position="0 -1 -4">
       <a-entity template="src: #link" data-src="#cubes" data-audio="#cubes-sound" data-thumb="#cubes-thumb"></a-entity>
       <a-entity template="src: #link" data-src="#city" data-audio="#city-sound" data-thumb="#city-thumb"></a-entity>
       <a-entity template="src: #link" data-src="#sechelt" data-audio="#sechelt-sound" data-thumb="#sechelt-thumb"></a-entity>
     </a-entity>

     <!-- Camera + cursor. -->
     <a-entity camera look-controls>
       <a-cursor
         id="cursor"
         animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150"
         animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500"
         event-set__mouseenter="_event: mouseenter; color: springgreen"
         event-set__mouseleave="_event: mouseleave; color: black"
         raycaster="objects: .link"></a-cursor>
     </a-entity>
      </a-scene>

【问题讨论】：

您是否尝试将<a-sound src 属性更改为另一个音频文件？

标签： aframe

【解决方案1】：

 <a-entity class="link"
   geometry="primitive: plane; height: 1; width: 1"
   material="shader: flat; src: ${thumb}"
   event-set__mouseenter="scale: 1.2 1.2 1"
   event-set__mouseleave="scale: 1 1 1"
   event-set__click="_target: #image-360; _delay: 300; material.src: ${src}"
   event-set__click2="_event: click;_target: #ambient; _delay: 300; sound.src: ${audio}"
   proxy-event="event: click; to: #image-360; as: fade"
   sound="src: #click-sound; autoplay: true; loop: false;"></a-entity>

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。