demo/overview-waveform.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Peaks.js Demo Page</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <style>
      #overview-container {
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div id="titles">
      <h1>Peaks.js</h1>
      <p>
        Peaks.js is a JavaScript library that allows you to display and
        interact with audio waveforms in the browser.
      </p>

      <h2>Demo pages</h2>
      <p>
        The following pages demonstrate various configuration options:
      </p>
      <p>
        <a href="/index.html">Precomputed Waveform Data</a> |
        <a href="/webaudio.html">Web Audio API</a> |
        <a href="/zoomable-waveform.html">Single Zoomable Waveform</a> |
        Single Fixed Waveform |
        <a href="/cue-events.html">Cue Events</a> |
        <a href="/set-source.html">Changing the Media URL</a> |
        <a href="/multi-channel.html">Multi-Channel Waveform</a> |
        <a href="/custom-markers">Custom Point and Segment Markers</a> |
        <a href="/overlay-segments.html">Overlay Segments</a> |
        <a href="/external-player.html">External Audio Player</a> |
        <a href="/scrollbar.html">Scrollbar</a>
      </p>
      <h2>Demo: Single Fixed Waveform</h2>
      <p>
        This demo shows how to configure Peaks.js to render a single waveform
        view, scaled to fit a given container element.
      </p>
    </div>

    <div class="waveform-container">
      <div id="overview-container"></div>
    </div>

    <div id="demo-controls">
      <audio id="audio" controls="controls">
        <source src="/TOL_6min_720p_download.mp3" type="audio/mpeg">
        <source src="/TOL_6min_720p_download.ogg" type='audio/ogg; codecs="vorbis"'>
        Your browser does not support the audio element.
      </audio>

      <div id="controls">
        <div>
          <input type="text" id="seek-time" value="0.0">
          <button data-action="seek">Seek</button>
          <label for="amplitude-scale">Amplitude scale</label>
          <input type="range" id="amplitude-scale" min="0" max="10" step="1">
        </div>
        <div>
          <label for="waveform-color">Waveform color</label>
          <input type="color" id="waveform-color" value="#cccccc">
          <label for="played-waveform-color">Played waveform color</label>
          <input type="color" id="played-waveform-color" value="#888888">
        </div>
      </div>
    </div>

    <script src="/peaks.js"></script>
    <script>
      (function(Peaks) {
        var options = {
          overview: {
            container: document.getElementById('overview-container'),
            waveformColor: '#cccccc',
            playedWaveformColor: '#888888',
            showPlayheadTime: true
          },
          mediaElement: document.getElementById('audio'),
          dataUri: {
            arraybuffer: '/TOL_6min_720p_download.dat',
            json: '/TOL_6min_720p_download.json'
          },
          keyboard: true
        };

        Peaks.init(options, function(err, peaksInstance) {
          if (err) {
            console.error(err.message);
            return;
          }

          console.log('Peaks instance ready');

          document.querySelector('button[data-action="seek"]').addEventListener('click', function(event) {
            var time = document.getElementById('seek-time').value;
            var seconds = parseFloat(time);

            if (!Number.isNaN(seconds)) {
              peaksInstance.player.seek(seconds);
            }
          });

          var amplitudeScales = {
            "0": 0.0,
            "1": 0.1,
            "2": 0.25,
            "3": 0.5,
            "4": 0.75,
            "5": 1.0,
            "6": 1.5,
            "7": 2.0,
            "8": 3.0,
            "9": 4.0,
            "10": 5.0
          };

          document.getElementById('amplitude-scale').addEventListener('input', function(event) {
            var scale = amplitudeScales[event.target.value];
            var view = peaksInstance.views.getView();

            view.setAmplitudeScale(scale);
          });

          document.getElementById('waveform-color').addEventListener('input', function(event) {
            var view = peaksInstance.views.getView();

            view.setWaveformColor(event.target.value);
          });

          document.getElementById('played-waveform-color').addEventListener('input', function(event) {
            var view = peaksInstance.views.getView();

            view.setPlayedWaveformColor(event.target.value);
          });
        });
      })(peaks);
    </script>
  </body>
</html>