在框架中,当新声音开始播放时如何停止所有声音?
In a-frame how can I stop all sounds when a new sound starts playing?
当我播放时点击 a-entity 它会播放声音,但是我怎样才能让它在播放时停止所有其他声音,所以它不是一个响亮混乱的东西?
我用谷歌搜索了这个问题并尝试添加他们使用的代码,但它们一直没有用,我已经尝试了大约 5 个不同的代码。
我是运行我的声音是这样的:
<audio id="mercury-sound" src="mercury.mp3" preload="auto"></audio>
<script id="mercury" type="text/html">
<a-entity class="mercury"
geometry="primitive: sphere; radius: 0.67"
material="shader: flat; src: ${thumb}"
event-set__mouseenter="_target: #image-mercury; material.src: ${src}; opacity: 1"
event-set__mouseleave="_target: #image-mercury; material.src: ${src}; opacity: 0">
</a-entity>
</script>
<a-entity template="src: #mercury" sound="src: #mercury-sound; on"></a-entity>
我希望它播放声音并在播放时停止所有其他声音。
编辑:如果其他人遇到此问题,这就是解决问题的方法
The template component is creating child nodes, You need to grab let el = e.target.parentNode. Check it out here also i would manage all sound-related logic in js, but thats another topic :) btw where is poor pluto ! – Piotr Adam Milewski
这是一种使用 js
的方法。想法是:
1) 保留有声音的元素数组
2) 单击一个时 - 遍历数组并停止声音
3) 播放 'clicked' 一个
设置如下:
<a-box sound='#first'></a-box>
<a-box sound='#second'></a-box>
<a-box sound='#third'></a-box>
您可以创建一个脚本,它将:
// grab all elements with the sound component
var soundEls = document.querySelectorAll('[sound]')
// make sure all of those react on a 'click' event
for (var i = 0; i < soundEls.length; i++) {
var item = soundEls[i];
item.addEventListener('click', e => {
let el = e.target
// don't replay an already playing sound
let isPlaying = el.components.sound.isPlaying
// stop all sounds
soundEls.forEach(soundEl => {
soundEl.components.sound.stopSound()
})
// play the clicked sound if isn't already playing
if (!isPlaying)
el.components.sound.playSound()
})
}
通常,我建议使用框架 custom component. But it may be easier to get the idea this way. Check it out in this glitch。
当我播放时点击 a-entity 它会播放声音,但是我怎样才能让它在播放时停止所有其他声音,所以它不是一个响亮混乱的东西?
我用谷歌搜索了这个问题并尝试添加他们使用的代码,但它们一直没有用,我已经尝试了大约 5 个不同的代码。
我是运行我的声音是这样的:
<audio id="mercury-sound" src="mercury.mp3" preload="auto"></audio>
<script id="mercury" type="text/html">
<a-entity class="mercury"
geometry="primitive: sphere; radius: 0.67"
material="shader: flat; src: ${thumb}"
event-set__mouseenter="_target: #image-mercury; material.src: ${src}; opacity: 1"
event-set__mouseleave="_target: #image-mercury; material.src: ${src}; opacity: 0">
</a-entity>
</script>
<a-entity template="src: #mercury" sound="src: #mercury-sound; on"></a-entity>
我希望它播放声音并在播放时停止所有其他声音。
编辑:如果其他人遇到此问题,这就是解决问题的方法
The template component is creating child nodes, You need to grab let el = e.target.parentNode. Check it out here also i would manage all sound-related logic in js, but thats another topic :) btw where is poor pluto ! – Piotr Adam Milewski
这是一种使用 js
的方法。想法是:
1) 保留有声音的元素数组
2) 单击一个时 - 遍历数组并停止声音
3) 播放 'clicked' 一个
设置如下:
<a-box sound='#first'></a-box>
<a-box sound='#second'></a-box>
<a-box sound='#third'></a-box>
您可以创建一个脚本,它将:
// grab all elements with the sound component
var soundEls = document.querySelectorAll('[sound]')
// make sure all of those react on a 'click' event
for (var i = 0; i < soundEls.length; i++) {
var item = soundEls[i];
item.addEventListener('click', e => {
let el = e.target
// don't replay an already playing sound
let isPlaying = el.components.sound.isPlaying
// stop all sounds
soundEls.forEach(soundEl => {
soundEl.components.sound.stopSound()
})
// play the clicked sound if isn't already playing
if (!isPlaying)
el.components.sound.playSound()
})
}
通常,我建议使用框架 custom component. But it may be easier to get the idea this way. Check it out in this glitch。