问题
I am trying to find a way to reproduce the effect of having all my sound files in my A-frame vr project autoplay once the scene loads, but with an on-window-click function so that they are able to work on browsers that do not allow autoplay / require user interaction
i'm sure the solution is pretty simple but I have tried for quite a few hours and can't seem to find a solution online including stack anywhere. when I try to follow tutorials such as this, I can't get them to work:
Play sound on click in A-Frame
Autoplaying videosphere from A-frame is not working on any browser(Safari/Chrome)
in my html i have something like this (but with about 10 sound files and 10 models in total):
<a-assets>
<a-asset-item id="logo" src="code/to/gltf"></a-asset-item>
<a-asset-item id="logo" src="code/to/gltf"></a-asset-item>
<audio id="track" src="code/to/audio" crossOrigin="anonymous"></audio>
<audio id="track" src="code/to/audio" crossOrigin="anonymous"></audio>
</a-assets>
<a-entity
gltf-model="#logo"
play-audio
sound="
src: #track;
loop: true;
volume: 0.05;
distanceModel: inverse;
refDistance: 1000"
position="0 1.5 -2.5"
rotation="90 0 0"
scale="0.4 0.4 0.4"
foo>
</a-entity>
<a-entity
gltf-model="#bink"
navigate-on-click="url: bink.html"
play-audio
sound="
src: #binkaudio;
loop: true;
volume: 1;
distanceModel: inverse;
refDistance: 10"
position="-2.93 1.5 6"
rotation="90 149 0"
scale="0.4 0.4 0.4"
foo
></a-entity>
then in a separate js file linked into the html I have this
AFRAME.registerComponent('play-audio', {
init: function () {
this.onClick = this.onClick.bind(this);
},
play: function () {
window.addEventListener('click', this.onClick);
},
// pause: function () {
// window.removeEventListener('click', this.onClick);
// },
onClick: function (evt) {
var sceneEl = document.querySelector('a-scene')
var entity = sceneEl.querySelectorAll('[sounds]');
entity.components.sound.playSound();
}
});
EDIT
I keep recieveing this error message
Uncaught TypeError: Cannot read property 'sound' of undefined
at i.onClick (audiohandler.js:109)
at HTMLElement.emit (a-node.js:263)
at i.twoWayEmit (cursor.js:415)
at i.onCursorUp (cursor.js:271)
at HTMLCanvasElement.<anonymous> (bind.js:12)
EDIT
this was the final solution thank you !!!
AFRAME.registerComponent('play-audio', {
init: function () {
this.onClick = this.onClick.bind(this);
},
play: function () {
window.addEventListener('click', this.onClick);
},
pause: function () {
window.removeEventListener('click', this.onClick);
},
onClick: function (evt) {
let entity = document.querySelectorAll('[sound]');
for (let item of entity) {
item.components.sound.playSound();
}
}
});
回答1:
If you want to grab all nodes that have the sound
component, then you need to change your selector from sounds
to sound
- document.querySelectorAll('[sound]')
.
Also querySelectorAll will return a list of elements, so You have to iterate through them:
for (let item of list) {
item.components.sound.playSound()
}
回答2:
This is fantastic and something I've been trying to figure out for a while. How could we adapt this component so that you had to click on once of the sound entities to start it (instead of clicking anywhere in the scene?)
来源:https://stackoverflow.com/questions/65030477/component-to-play-multiple-audio-files-at-the-same-time-on-click-aframe-webvr