如何通過點擊同時觸發音頻和天空圖像/視頻球體？

AFRAME.registerComponent('set-sky', { 
schema: {default:''}, 
multiple: true 
init() { 
    const sky = document.querySelector('a-sky'); 
    this.el.addEventListener('click',() => { 
    sky.setAttribute('src', this.data); 
    }); 
} 
});

嘗試修改此組件，以便每次通過單擊更改天空盒圖片時都可以播放不同的音頻。任何建議如何可以做到？如何通過點擊同時觸發音頻和天空圖像/視頻球體？

此外，有沒有什麼機會可以在像這樣的組件中使用圖像和視頻領域？謝謝！

<html> 
<head> 
    <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script> 
    <script src="https://rawgit.com/aframevr/aframe/2baa063/dist/aframe-master.min.js"></script> 
    <meta charset="UTF-8"> 

    <script> 
    AFRAME.registerComponent('set-sky', { 
    schema: {default:''}, 
    init() { 
     const sky = document.querySelector('a-sky'); 
     this.el.addEventListener('click',() => { 
     sky.setAttribute('src', this.data); 
     }); 
    } 
    }); 
    </script> 
</head> 

<body> 
    <a-scene> 
    <a-assets> 
<audio id="opening" src="Lake Ambience.mp3"></audio> 
    <audio id="1" src="Game.wav"></audio> 
    <audio id="2" src="Explosion.wav"></audio> 
    <audio id="3" src="Laser.wav"></audio> 
    <audio id="4" src="Spooky.mp3"></audio> 
    <video id="video" src="Video.MP4"></video> 
    </a-assets> 

    <!-- Sounds --> 
    <a-entity sound="autoplay: true; loop: true; src: #opening;"></a-entity> 

    <a-camera position="0 2 0"> 
    <a-cursor color="#5DADE2" fuse="true" timeout="10"></a-cursor> 
    </a-camera> 

    <a-sphere color="#2C3E50" radius="0.5" position="0 -5 -15" set-sky="1.jpg"></a-sphere> 
    <a-sphere color="red" radius="0.5" position="-15 -5 0" set-sky="2.jpg"></a-sphere> 
    <a-sphere color="blue" radius="0.5" position="15 -5 0" set-sky="3.jpg"></a-sphere> 
    <a-sphere color="white" radius="0.5" position="0 -5 15" set-sky="4.jpg"></a-sphere> 

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

這就是我現在所擁有的，和我想的聲音添加到每個球體click事件，而在最後一個事件改變「4.JPG」到360的視頻。

來源

2017-05-30 Evan W.

您可以每次使用已設置的「單擊」事件更改音頻。

const sky = document.querySelector('a-sky'); 
const entity= document.querySelector('a-entity'); 
var image = this.data.substring(0,1) // this grabs the jpg file id to reference the audio asset id 

this.el.addEventListener('click',() => { 
    sky.setAttribute('src', this.data); 
    entity.setAttribute('src', "autoplay: true; loop: true; src: #" + image + ";"); 
});

這可能是不適合你做到這一點的最好辦法。如果您想要圖像和音頻文件的不同組合，則應該需要爲組件添加一個新的方案值以引用音頻文件。

來源

2017-06-01 03:34:09

如何通過點擊同時觸發音頻和天空圖像/視頻球體？

回答

相關問題