Trigger doesn't play single sounds correctly

Question

Trigger doesn't play single sounds correctly

notthetup opened this issue 9 years ago · comments

Chinmay Pendharkar commented 9 years ago

<!doctype html>
<html>

<head>
  <!-- Stripped down code template implementation -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--   <meta property="og:url" content="@PreviewURL@" />
  <meta property="og:type" content="website" />
  <meta property="og:title" content="Lick Sound Animation" />
  <meta property="og:description" content="A Sound Animation by @author@" />
  <meta property="og:image" content="@PreviewURL@/lick.jpg" />  -->
  <title>Lick - @SoundModel@</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <style type="text/css">
    *, *:before, *:after {
      box-sizing: border-box;
      -moz-box-sizing: border-box;
    }
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
    }
    #licktemplate {
      position: relative;
      width: 592px;
      margin: 0 auto;
    }
    .image {
      position: absolute;
      background: #ffffff url('lick.jpg') no-repeat;
      width: 592px;
      height: 500px;
    }
    .tappable {
      position: absolute;
      top: 170px;
      left: 130px;
      width: 80px;
      height: 80px;
      cursor: pointer;
    }
  </style>
  <!-- Sonoport sound library uses AMD to load the sound models and it's dependencies. Get requirejs from http://requirejs.org/. -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.min.js"></script>

</head>

<body>

  <div id="licktemplate"></div>

<script type="text/javascript">
    // Set path for require.js to load dependencies
    require.config({
      baseUrl: "https://storage.googleapis.com/sdk.sonoport.com/js/2.5.8/",
      paths: {
        hammer: 'https://storage.googleapis.com/sdk.sonoport.com/js/lib/hammer.min'
      },
      shim: {
        'hammer.min': {
          exports: 'Hammer'
        }
      }
    });
    require(["models/Trigger", "hammer"], function(Trigger, Hammer) {
      "use strict";
      /**
       * Place in <div id="licktemplate"></div> in your html as a hook
       */
      var canvas = document.getElementById("licktemplate");
      var imageContainer = document.createElement("div");
      imageContainer.setAttribute('class', 'image');
      canvas.appendChild(imageContainer);

      var tappable = document.createElement("div");
      tappable.setAttribute('class', 'tappable');
      imageContainer.appendChild(tappable);

      // Create a global audiocontext
      window.AudioContext = window.AudioContext || window.webkitAudioContext;
      var context = new window.AudioContext();

      // An array of sound urls to pass in for the sound models
      var soundList = ['/bongo1.mp3'];

      // Initialise a new model to load in the sound files
      var snd = new Trigger(context, soundList, null, onLoad);

      var hammerActions = null;

      // After the sound files has loaded, start playing sounds.
      function onLoad() {

        // Create a Gain Node and connect to the model
        var gainNode = context.createGain();
        // Create a Pan node and connect to the model
        var panNode = context.createPanner();
        // Disconnect destination node to add more audio nodes
        // snd.disconnect();
        // connect gain node to model
        // snd.connect(gainNode);
        // connect pan node to gain node
        // gainNode.connect(panNode);
        // connect gain to destination node
        // panNode.connect(context.destination);

        // // Setup default values for connected parameters
        // snd.pitchRand.value = @pitchRand@;
        // snd.eventRand.value = @eventRand@;
        // snd.pitchShift.value = @pitchShift@;
        // // Update gain value
        // gainNode.gain.value = 1;
        // // Update pan value
        // updatePannerPosition(0, panNode);

        // Add click event listener to circle
        hammerActions = new Hammer(tappable);
        hammerActions.on('tap', function(evt){
          // Call play();
          snd.start(context.currentTime);
          console.log('play');
        });

      }

      // Update pan node position based on the position value passed in.
      function updatePannerPosition(position, panNode){
        var xDeg = parseInt(position);
        var zDeg = xDeg + 90;
        if (zDeg > 90) {
          zDeg = 180 - zDeg;
        }
        var x = Math.sin(xDeg * (Math.PI / 180));
        var z = Math.sin(zDeg * (Math.PI / 180));
        panNode.setPosition(x, 0, z);
      }
    });
  </script>
</body>

</html>