demos/sound.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Anvil.js Lighting Demo</title>
    <script src="../build/anvil.js"></script>
  </head>
  <body>
    <canvas id="can" width="800" height="600"></canvas>
    <script>

      // Pull out the Scene, Polygon, Light, and SceneManager classes from the ANVIL object
      const {Scene, Polygon, Light, SceneManager, Sound, SoundEmitterPolygon} = ANVIL;

      // get the canvas
      const can = document.getElementById("can");

      // create a scene with lighting and FPS monitoring enabled
      const scene = new Scene({fpsMonitoringEnabled: true});
      // Create and add polygons
      const polygon1 = new Polygon({
        points: [
          [
            100, 100
          ],
          [
            150, 100
          ],
          [
            150, 150
          ],
          [
            100, 150
          ]
        ],
        backgroundColor: "#FF0000"
      });
      const polygon2 = new SoundEmitterPolygon({
        points: [
          [
            200, 200
          ],
          [
            250, 200
          ],
          [
            250, 250
          ],
          [
            200, 250
          ]
        ],
        backgroundColor: "#00FF00"
      },{
        source: "song.mp3",
        listener: polygon1
      });

      scene.addObject(polygon1);
      scene.treatAsPlayer(polygon1, 5);
      scene.addObject(polygon2);

      // Create a SceneManager and pass it the canvas and scene
      var manager = new SceneManager({canvas: can, initialScene: scene});
    </script>
  </body>
</html>