thijstriemstra/gist:f1900272b8d680bda765

## gistfile1.js
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>wavesurfer.js</title>

        <link href="data:image/gif;" rel="icon" type="image/x-icon" />

        <!-- Bootstrap -->
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">

        <link rel="stylesheet" href="example/css/style.css" />
        <link rel="stylesheet" href="example/css/ribbon.css" />

        <link rel="screenshot" itemprop="screenshot" href="http://katspaugh.github.io/wavesurfer.js/example/screenshot.png" />

        <script src='http://code.jquery.com/jquery-1.11.2.min.js'></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

        <!-- wavesurfer.js -->
        <script src="src/wavesurfer.js"></script>
        <script src="src/webaudio.js"></script>
        <script src="src/audioelement.js"></script>
        <script src="src/drawer.js"></script>
        <script src="src/drawer.canvas.js"></script>

        <script>
            // Create an instance
            var wavesurfer = Object.create(WaveSurfer);

            // Init & load audio file
            document.addEventListener('DOMContentLoaded', function ()
            {
                $('.modal-body').append("<div id='waveform'></div>");

                $('#myModal').on('hidden.bs.modal', function (e) {
                    console.log('destroy!', e);

                    wavesurfer.destroy();
                });

                $('#myLaunchButton').on('click', function () {

                    var options = {
                        container     : document.querySelector('#waveform'),
                        waveColor     : 'violet',
                        progressColor : 'purple',
                        loaderColor   : 'purple',
                        cursorColor   : 'navy'
                    };

                    if (location.search.match('scroll')) {
                        options.minPxPerSec = 100;
                        options.scrollParent = true;
                    }

                    if (location.search.match('normalize')) {
                        options.normalize = true;
                    }

                    // Init
                    wavesurfer.init(options);

                    // Play at once when ready
                    // Won't work on iOS until you touch the page
                    wavesurfer.on('ready', function () {
                        //wavesurfer.play();
                    });

                    // Report errors
                    wavesurfer.on('error', function (err) {
                        console.error(err);
                    });

                    // Do something when the clip is over
                    wavesurfer.on('finish', function () {
                        console.log('Finished playing');
                    });

                    // Load audio from URL
                    var url = 'example/media/demo.wav';
                    url = 'example/media/ask_yourself.mp3';

                    console.log('Loading ' + url);
                    wavesurfer.load(url);

                });
            });

        </script>

        <script src="example/trivia.js"></script>
    </head>

    <body itemscope itemtype="http://schema.org/WebApplication">
        <div class="container">
            <div class="header">
                <noindex>
                <ul class="nav nav-pills pull-right">
                    <li><a href="?fill">Fill</a></li>
                    <li><a href="?scroll">Scroll</a></li>
                    <li><a href="?normalize">Normalize</a></li>
                </ul>
                </noindex>

                <h1 itemprop="name">wavesurfer.js</h1>
            </div>

            <div id="demo">
                <!-- Button trigger modal -->
                <button id="myLaunchButton" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                  Launch waveform
                </button>

                <!-- Modal -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Waveform</h4>
                      </div>
                      <div class="modal-body">

                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                        <div class="controls">
                            <button class="btn btn-primary" data-action="back">
                                <i class="glyphicon glyphicon-step-backward"></i>
                                Backward
                            </button>

                            <button class="btn btn-primary" data-action="play">
                                <i class="glyphicon glyphicon-play"></i>
                                Play
                                /
                                <i class="glyphicon glyphicon-pause"></i>
                                Pause
                            </button>

                            <button class="btn btn-primary" data-action="forth">
                                <i class="glyphicon glyphicon-step-forward"></i>
                                Forward
                            </button>

                            <button class="btn btn-primary" data-action="toggle-mute">
                                <i class="glyphicon glyphicon-volume-off"></i>
                                Toggle Mute
                            </button>
                        </div>

                      </div>
                    </div>
                  </div>
                </div>

            </div>

            <p class="lead pull-center" id="drop">
                Drag'n'drop your favorite
                <i class="glyphicon glyphicon-music"></i>-file
                here!
            </p>

            <div class="row marketing">
                <div class="col-lg-6">
                    <h4>Web Audio Waveform Visualizer</h4>

                    <p itemprop="about">Customizable waveform audio visualization built on top of Web Audio API and HTML5 Canvas. With <strong>wavesurfer.js</strong> you can create a cute <a href="https://www.toytalk.com/editors-picks/">HTML5 audio player</a> or <a href="http://moduscreate.com/touch-dj-a-sencha-touch-dj-app/">a sophisticated DJ application</a>.</p>

                    <h4>Compatibility</h4>

                    <p itemprop="browserRequirements"><strong>wavesurfer.js</strong> runs on modern browsers <a href="http://caniuse.com/audio-api" rel="nofollow">supporting Web Audio</a>. Including Firefox, Chrome, Safari, Mobile&nbsp;Safari and Opera.</p>

                    <h4>Download</h4>

                    <p>
                        <a class="btn btn-large btn-success" href="build/wavesurfer.min.js" itemprop="downloadUrl">Download <strong>wavesurfer.min.js</strong> (18 KB)</a>
                    </p>
                </div>

                <div class="col-lg-6">
                    <h4>Quick Start</h4>

                    <noindex><p>
<pre><code>var wavesurfer = Object.create(WaveSurfer);

wavesurfer.init({
    container: document.querySelector('#wave'),
    waveColor: 'violet',
    progressColor: 'purple'
});

wavesurfer.on('ready', function () {
    wavesurfer.play();
});

wavesurfer.load('example/media/demo.mp3');</code></pre>
                    </p></noindex>

                    <h4>Documentation</h4>

                    <p>The full list of options and methods can be found in <a href="https://github.com/katspaugh/wavesurfer.js/blob/master/README.md">README</a>.</p>
                </div>
            </div>

            <div class="row marketing">
                <div class="col-lg-8">
                    <h4>Plugins & Examples</h4>

                    <p>Thanks to the everyting-is-public API, it's easy to write <strong>wavesurfer.js</strong> plugins.</p>

                    <ul>
                        <li>
                            <h4><a href="example/annotation">Regions plugin</a></h4>
                            <p>
                                Adds ability to display and interact
                                with audio regions. Regions are visual
                                overlays that can be resized and
                                dragged around the waveform. You can
                                play back and loop a region.
                            </p>
                        </li>

                        <li>
                            <h4><a href="example/elan/?scroll">ELAN plugin</a></h4>
                            <p>
                                Reads ELAN files and displays audio annotations as an interactive widget. ELAN is parsed into a JavaScript object with some denormalization.
                            </p>
                        </li>

                        <li>
                            <h4><a href="example/timeline">Timeline plugin</a></h4>
                            <p>
                                Adds a nice simple timeline to your waveform. By <a href="https://github.com/instajams">Instajams</a>.
                            </p>
                        </li>

                        <li>
                            <h4><a href="example/microphone">Microphone plugin</a></h4>
                            <p>
                                Visualizes audio input from a microphone. By <a href="https://github.com/thijstriemstra">Thijs Triemstra</a>.
                            </p>
                        </li>

                        <li>
                            <h4><a href="example/panner">Panner</a></h4>
                            <p>
                                Creating a panner with wavesurfer.js is easy-peasy. Follow the 4 steps.
                            </p>
                        </li>

                        <li>
                            <h4><a href="example/equalizer">Equalizer</a></h4>
                            <p>
                                Simple equalizer to demonstrate how to connect multiple filters in chain.
                            </p>
                        </li>

                        <li>
                            <h4><a href="example/audio-element">Audio element</a></h4>
                            <p>
                                HTML5 Audio element fallback for browsers without Web Audio.
                            </p>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="footer row">
                <div class="col-sm-12">
                    <a rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/3.0/80x15.png" /></a>
                </div>

                <div class="col-sm-7">
                    <span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">wavesurfer.js</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="https://github.com/katspaugh/wavesurfer.js" property="cc:attributionName" rel="cc:attributionURL">katspaugh</a> is licensed under a&nbsp;<a style="white-space: nowrap" rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.en_US">Creative Commons Attribution 3.0 Unported License</a>.
                </div>

                <div class="col-sm-5">
                    <noindex>
                        Demo music track is <a href="http://www.jamendo.com/en/track/661578/trou" rel="nofollow"><b>Trou</b> <span class="muted">by</span>&nbsp;<b>czskamaarù</b></a>. Thanks!
                    </noindex>
                </div>
            </div>
        </div>

        <div class="github-fork-ribbon-wrapper right">
            <div class="github-fork-ribbon">
                <a itemprop="isBasedOnUrl" href="https://github.com/katspaugh/wavesurfer.js">Fork me on GitHub</a>
            </div>
        </div>

        <script>
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

            ga('create', 'UA-50026819-1', 'wavesurfer.fm');
            ga('send', 'pageview');
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>wavesurfer.js</title>

	<link href="data:image/gif;" rel="icon" type="image/x-icon" />

	<!-- Bootstrap -->
	<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">

	<link rel="stylesheet" href="example/css/style.css" />
	<link rel="stylesheet" href="example/css/ribbon.css" />

	<link rel="screenshot" itemprop="screenshot" href="http://katspaugh.github.io/wavesurfer.js/example/screenshot.png" />

	<script src='http://code.jquery.com/jquery-1.11.2.min.js'></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

	<!-- wavesurfer.js -->
	<script src="src/wavesurfer.js"></script>
	<script src="src/webaudio.js"></script>
	<script src="src/audioelement.js"></script>
	<script src="src/drawer.js"></script>
	<script src="src/drawer.canvas.js"></script>

	<script>
	// Create an instance
	var wavesurfer = Object.create(WaveSurfer);

	// Init & load audio file
	document.addEventListener('DOMContentLoaded', function ()
	{
	$('.modal-body').append("<div id='waveform'></div>");

	$('#myModal').on('hidden.bs.modal', function (e) {
	console.log('destroy!', e);

	wavesurfer.destroy();
	});

	$('#myLaunchButton').on('click', function () {

	var options = {
	container : document.querySelector('#waveform'),
	waveColor : 'violet',
	progressColor : 'purple',
	loaderColor : 'purple',
	cursorColor : 'navy'
	};

	if (location.search.match('scroll')) {
	options.minPxPerSec = 100;
	options.scrollParent = true;
	}

	if (location.search.match('normalize')) {
	options.normalize = true;
	}

	// Init
	wavesurfer.init(options);

	// Play at once when ready
	// Won't work on iOS until you touch the page
	wavesurfer.on('ready', function () {
	//wavesurfer.play();
	});

	// Report errors
	wavesurfer.on('error', function (err) {
	console.error(err);
	});

	// Do something when the clip is over
	wavesurfer.on('finish', function () {
	console.log('Finished playing');
	});

	// Load audio from URL
	var url = 'example/media/demo.wav';
	url = 'example/media/ask_yourself.mp3';

	console.log('Loading ' + url);
	wavesurfer.load(url);

	});
	});

	</script>

	<script src="example/trivia.js"></script>
	</head>

	<body itemscope itemtype="http://schema.org/WebApplication">
	<div class="container">
	<div class="header">
	<noindex>
	<ul class="nav nav-pills pull-right">
	<li><a href="?fill">Fill</a></li>
	<li><a href="?scroll">Scroll</a></li>
	<li><a href="?normalize">Normalize</a></li>
	</ul>
	</noindex>

	<h1 itemprop="name">wavesurfer.js</h1>
	</div>

	<div id="demo">
	<!-- Button trigger modal -->
	<button id="myLaunchButton" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	Launch waveform
	</button>

	<!-- Modal -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
	<div class="modal-content">
	<div class="modal-header">
	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
	<h4 class="modal-title" id="myModalLabel">Waveform</h4>
	</div>
	<div class="modal-body">

	</div>
	<div class="modal-footer">
	<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

	<div class="controls">
	<button class="btn btn-primary" data-action="back">
	<i class="glyphicon glyphicon-step-backward"></i>
	Backward
	</button>

	<button class="btn btn-primary" data-action="play">
	<i class="glyphicon glyphicon-play"></i>
	Play
	/
	<i class="glyphicon glyphicon-pause"></i>
	Pause
	</button>

	<button class="btn btn-primary" data-action="forth">
	<i class="glyphicon glyphicon-step-forward"></i>
	Forward
	</button>

	<button class="btn btn-primary" data-action="toggle-mute">
	<i class="glyphicon glyphicon-volume-off"></i>
	Toggle Mute
	</button>
	</div>

	</div>
	</div>
	</div>
	</div>

	</div>

	<p class="lead pull-center" id="drop">
	Drag'n'drop your favorite
	<i class="glyphicon glyphicon-music"></i>-file
	here!
	</p>

	<div class="row marketing">
	<div class="col-lg-6">
	<h4>Web Audio Waveform Visualizer</h4>

	<p itemprop="about">Customizable waveform audio visualization built on top of Web Audio API and HTML5 Canvas. With <strong>wavesurfer.js</strong> you can create a cute <a href="https://www.toytalk.com/editors-picks/">HTML5 audio player</a> or <a href="http://moduscreate.com/touch-dj-a-sencha-touch-dj-app/">a sophisticated DJ application</a>.</p>

	<h4>Compatibility</h4>

	<p itemprop="browserRequirements"><strong>wavesurfer.js</strong> runs on modern browsers <a href="http://caniuse.com/audio-api" rel="nofollow">supporting Web Audio</a>. Including Firefox, Chrome, Safari, Mobile Safari and Opera.</p>

	<h4>Download</h4>

	<p>
	<a class="btn btn-large btn-success" href="build/wavesurfer.min.js" itemprop="downloadUrl">Download <strong>wavesurfer.min.js</strong> (18 KB)</a>
	</p>
	</div>

	<div class="col-lg-6">
	<h4>Quick Start</h4>

	<noindex><p>
	<pre><code>var wavesurfer = Object.create(WaveSurfer);

	wavesurfer.init({
	container: document.querySelector('#wave'),
	waveColor: 'violet',
	progressColor: 'purple'
	});

	wavesurfer.on('ready', function () {
	wavesurfer.play();
	});

	wavesurfer.load('example/media/demo.mp3');</code></pre>
	</p></noindex>

	<h4>Documentation</h4>

	<p>The full list of options and methods can be found in <a href="https://github.com/katspaugh/wavesurfer.js/blob/master/README.md">README</a>.</p>
	</div>
	</div>

	<div class="row marketing">
	<div class="col-lg-8">
	<h4>Plugins & Examples</h4>

	<p>Thanks to the everyting-is-public API, it's easy to write <strong>wavesurfer.js</strong> plugins.</p>

	<ul>
	<li>
	<h4><a href="example/annotation">Regions plugin</a></h4>
	<p>
	Adds ability to display and interact
	with audio regions. Regions are visual
	overlays that can be resized and
	dragged around the waveform. You can
	play back and loop a region.
	</p>
	</li>

	<li>
	<h4><a href="example/elan/?scroll">ELAN plugin</a></h4>
	<p>
	Reads ELAN files and displays audio annotations as an interactive widget. ELAN is parsed into a JavaScript object with some denormalization.
	</p>
	</li>

	<li>
	<h4><a href="example/timeline">Timeline plugin</a></h4>
	<p>
	Adds a nice simple timeline to your waveform. By <a href="https://github.com/instajams">Instajams</a>.
	</p>
	</li>

	<li>
	<h4><a href="example/microphone">Microphone plugin</a></h4>
	<p>
	Visualizes audio input from a microphone. By <a href="https://github.com/thijstriemstra">Thijs Triemstra</a>.
	</p>
	</li>

	<li>
	<h4><a href="example/panner">Panner</a></h4>
	<p>
	Creating a panner with wavesurfer.js is easy-peasy. Follow the 4 steps.
	</p>
	</li>

	<li>
	<h4><a href="example/equalizer">Equalizer</a></h4>
	<p>
	Simple equalizer to demonstrate how to connect multiple filters in chain.
	</p>
	</li>

	<li>
	<h4><a href="example/audio-element">Audio element</a></h4>
	<p>
	HTML5 Audio element fallback for browsers without Web Audio.
	</p>
	</li>
	</ul>
	</div>
	</div>

	<div class="footer row">
	<div class="col-sm-12">
	<a rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/3.0/80x15.png" /></a>
	</div>

	<div class="col-sm-7">
	<span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">wavesurfer.js</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="https://github.com/katspaugh/wavesurfer.js" property="cc:attributionName" rel="cc:attributionURL">katspaugh</a> is licensed under a <a style="white-space: nowrap" rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.en_US">Creative Commons Attribution 3.0 Unported License</a>.
	</div>

	<div class="col-sm-5">
	<noindex>
	Demo music track is <a href="http://www.jamendo.com/en/track/661578/trou" rel="nofollow"><b>Trou</b> <span class="muted">by</span> <b>czskamaarù</b></a>. Thanks!
	</noindex>
	</div>
	</div>
	</div>

	<div class="github-fork-ribbon-wrapper right">
	<div class="github-fork-ribbon">
	<a itemprop="isBasedOnUrl" href="https://github.com/katspaugh/wavesurfer.js">Fork me on GitHub</a>
	</div>
	</div>

	<script>
	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]\|\|function(){
	(i[r].q=i[r].q\|\|[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

	ga('create', 'UA-50026819-1', 'wavesurfer.fm');
	ga('send', 'pageview');
	</script>
	</body>
	</html>