Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Simple JS waveform library.
JavaScript
branch: master
Failed to load latest commit information.
examples Added 'scale' option.
LICENSE Initial commit
README.md Updated README.
shore.js It freaking scrolls.

README.md

Shore

Shore is a simple waveform generator library for JS. It's reminiscent of SoundCloud's, but can be used in conjunction with an audio element and is not tied to an online service. Feel free to try out the demo, but you may need to refresh the page if it's not working.

Shore is currently real-time and volume dependant, so in order for the waveform to work, you must have the file audibly playing. I'm working on getting pre-processing working, though, so this should be fixed soon. I hope. Also, if the waveform outgrows the canvas, the canvas scrolls to fit it, so no worries there.

Use

Using Shore is pretty simple. Just create an audio element with a file and call the Shore function with options! Here's an example HTML snippet:

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="../shore.js"></script>
        <script>
            window.onload = function() {
                shore({
                    source: 'source',
                    view: 'visualisation',
                    color: '#FF2C00',
                    scale: 0.4
                });
            };
        </script>
    </head>
    <body>

        <audio id="source" controls>
            <source src="bird.wav" type="audio/wav">
        </audio>
        <canvas id="visualisation" width="800" height="200"></canvas>
    </body>
</html>

The view is the canvas that you'll be displaying on, the source is the audio element with playable file, the color is the hue of the waveform, and the scale is the waveform size.

Thanks

Thank you to freesound.org for the example audio file.

Something went wrong with that request. Please try again.