添加按钮以允许声音在 iphone vi a-frame 上播放

Question

我想在我的 A-Frame 应用程序中添加一个允许 iphone 上的声音的按钮，但我是 HTML 新手，不知道怎么做。有没有人成功做到这一点，如果有，你能分享一些示例源代码吗？

如何在开始屏幕上获得按钮，最好是在出现谷歌纸板/耳机图标的位置旁边？

Answer 1

我想出了一个办法，所以想分享。我为场景本身添加了一个点击事件，然后当您按下 vr-enter 按钮（耳机图标）时，它会触发音频播放。在场景中，我添加了一个带有 mouseenter 事件的扬声器图标，还可以通过注视来控制音频。我关闭 img 以打开/关闭声音。我没有在耳机图标旁边的画布上添加按钮，但我认为无论如何这效果更好。如果你有更好的方法，我很乐意看到它！

<!DOCTYPE>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,user-scalable=no,maximum-scale=1">
    <title>Sound Demo</title>
    <meta name="description" content="Audio Button Demo">
    <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
  </head>
  <body>

<a-scene background="blue">
  <a-assets>
    <img id="soundButton" src="sourceimages/sound.png" >
    <img id="soundOffButton" src="sourceimages/soundOff.png" >
    <audio id="soundtrack" src="assets/Narration.mp3" preload="auto"></audio>
  </a-assets>

  <a-sky color="#00AEEF"></a-sky>

  <a-plane class="link" id="sButton" src="#soundOffButton" height="40" width="40" rotation="0 0 0" position="0 0 -300" material="transparent:true"
          event-set__1="_event: mousedown; scale: 1 1 1"
          event-set__2="_event: mouseup; scale: 1.2 1.2 1"
          event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
          event-set__4="_event: mouseleave; scale: 1 1 1">
      </a-plane>


  <a-entity camera look-controls>
        <a-cursor id="cursor"
          color="white"

          animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500"
          event-set__1="_event: mouseenter; color: cyan"
          event-set__2="_event: mouseleave; color: white"
          fuse="true"
          raycaster="objects: .link"></a-cursor>
  </a-entity>


</a-scene>


<script>

  var sbutt = document.querySelector('#sButton');
  var strack = document.querySelector('#soundtrack');

  sbutt.addEventListener('mouseenter', playButtonAudio);

  var scene = document.querySelector('a-scene');
  if (scene.hasLoaded) {
    playButtonAudio();
    } else {
      scene.addEventListener('click', playButtonAudio);
  }

  function playButtonAudio () {        
    if (strack.paused) {
      strack.play();
      sbutt.setAttribute('material', "src: #soundButton");          
    } else {
      strack.pause();
      sbutt.setAttribute('material', "src: #soundOffButton");          
    }
  }



</script>