demo/overview-waveform.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Peaks.js Demo Page</title>
    <style>
      body {
        font-family: 'Helvetica neue', Helvetica, Arial, sans-serif;
      }

      #titles, #waveform-container {
        margin: 24px auto;
        width: 1000px;
      }

      #overview-container {
        box-shadow: 3px 3px 20px #919191;
        margin: 0 0 24px 0;
        -moz-box-shadow: 3px 3px 20px #919191;
        -webkit-box-shadow: 3px 3px 20px #919191;
        line-height: 0;
        height: 200px;
      }

      #demo-controls {
        margin: 0 auto 24px auto;
        width: 1000px;
        display: flex;
        align-items: center;
      }

      #demo-controls button {
        background: #fff;
        border: 1px solid #919191;
        cursor: pointer;
      }

      #audio {
        flex: 0 0 30%;
      }

      #controls {
        flex: 1;
        margin-left: 1em;
      }

      #seek-time {
        width: 4em;
      }
    </style>
  </head>
  <body>
    <div id="titles">
      <h1>Peaks.js</h1>
      <p>
        Peaks.js is a JavaScript library that allows you to display and
        interaction with audio waveforms in the browser.
      </p>
      <p>
        It was developed by <a href="https://www.bbc.co.uk/rd">BBC R&amp;D</a>
        to allow audio editors to make accurate clippings of audio content.
        You can read more about the project
        <a href="https://waveform.prototyping.bbc.co.uk/">here</a>.
      </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.html">Custom Point and Segment Markers</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 id="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">
        Your browser does not support the audio element.
      </audio>

      <div id="controls">
        <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">
        <label for="waveform-color">Waveform color</label>
        <input type="color" id="waveform-color" value="#cccccc">
      </div>
    </div>

    <script src="peaks.js"></script>
    <script>
      (function(Peaks) {
        var options = {
          containers: {
            overview: document.getElementById('overview-container')
          },
          mediaElement: document.getElementById('audio'),
          dataUri: {
            arraybuffer: 'TOL_6min_720p_download.dat',
            json: 'TOL_6min_720p_download.json'
          },
          keyboard: true,
          pointMarkerColor: '#006eb0',
          overviewWaveformColor: '#cccccc',
          showPlayheadTime: 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);
          });
        });
      })(peaks);
    </script>
  </body>
</html>