A幀單擊同一元素播放和暫停聲音

Question

我試圖通過單擊同一元素來進行聲音播放和暫停，雖然可以播放，但是每次單擊都無法暫停並再次播放，為此我正在使用javascript。

這是我到目前為止的內容：

的HTML

<a-image id="statue" src="#audio_logo" width="1.5" height="1.5" position="-27 7 -4" rotation="0 90 0" sound="src:#museumSound"> </a-image>

Java腳本

  var sound = document.querySelector('#statue');
    sound.addEventListener('click', function () {
    sound.components.sound.playSound(); 
    });

在這里，我復制了這種情況以更好地理解，我將能夠單擊紅色方塊並播放聲音，然后再次單擊同一方塊並使其停止

https://codepen.io/EdgarJF/pen/jwdOZr

Answer 1

嘗試暫停聲音。

document.querySelector('#museumSound').pause();

要么

sound.components.sound.pauseSound(); 

讓布爾值知道是播放還是暫停。

var isPlaying = false; 
if (isPlaying) {
  // Do pause.
  isPlaying = false;
} else {
  // Do play.
  isPlaying = true;
}

Answer 2

thx ngokevin！ 您還救了我，您的建議在我的情況下也非常有效。

親愛的Evoinsec：我能與您建立起很多聯系，並且在ngokevin的幫助下很幸運。 所以在這里，我提供了部分代碼。

這是HTML https://aframe.io/releases/0.3.0/aframe-inspector.min.js“>

    <a-marker preset="hiro">

        <!--This is to Start/Pause audio-->
        <a-image id="audio"
                 src="./img/bird.jpg"
                 width="1" height="1"
                 position="1 0 0"
                 rotation="90 0 -90"
                 sound="src:./sound/bird.mp3"></a-image>
     </a-marker>


    <a-entity camera>
        <a-entity id="myCursor" 
                  cursor="fuse:true; maxDistance:30; timeout:500;" 
                  scale="0.03 0.03 0.03" 
                  position="0 0 -2" 
                  geometry="primitive: ring" 
                  material="color: red; shader: flat; opacity:0.5">
        </a-entity>
    </a-entity>
   </a-scene>
</body>

這是.js函數init（）{document.getElementById（'audio'）。addEventListener（'click'，audioControle，false）; }

function audioControle() { //SOUND STATUS
  var sound = document.querySelector('#audio');
  if (isPlaying == true) {
    // Do pause.
    sound.components.sound.pauseSound(); 
    isPlaying = false;
  } else if (isPlaying == false){
    // Do play.
    sound.components.sound.playSound(); 
    isPlaying = true;
  }
init();
}

這也許不是最聰明的方法，但對我有用。 我希望這可以幫助你。