add button to allow sound to play on iphone vi a-frame

Question

I want to add a button to allow sound on iphone to my A-Frame app, but I'm new to HTML and can't figure out how to do it. Has anyone successfully done this and if so can you share some example source code?

How do you get the button on the beginning screen, ideally next to where the google cardboard/headset icon appears?

debcat debcat · Accepted Answer · 2018-03-15T01:20:40

I figured out a way to do it so wanted to share. I added a click event for the scene itself, then when you press the vr-enter button (the headset icon) it triggers the audio to play. Inside the scene I added a speaker icon with a mouseenter event to also control the audio via gazing. I switch out the img for sound on/sound off. I did NOT add a button on the canvas next to the headset icon, but I think this works better anyway. If you have a better way, I'd love to see it!

<!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>

add button to allow sound to play on iphone vi a-frame

1 Answers