Web Audio Api Jquery Plugin
JavaScript C# PowerShell Other
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
Example
src
.gitattributes
.gitignore
LICENSE
README.md

README.md

AudioLibraryJs

This project contains several jquery plugin's - using the jquery ui widget design pattern - to easily create a Web Audio API based audio player and a Web Audio API based audio editor. These two plugin's can work side by side but don't necessarily need to. Since it is web audio api based, the plugin only works on webkit browsers (Chrome/Safari on mac).

Third Party Tools (Required)

  • Jquery 1.8 (and later)
  • Jquery-ui-1.10 (only the core, draggable and droppable needed)
  • processing-1.4.1.js

How to use

To attach the player to an element, simply add audioPlayerGraphical({:options}) to the jquery object. Example

HTML

<div id="player"></div>
<button class="btn btn-primary" id="playerPlay">
    Play <i class="icon-play icon-white"></i>
</button>
<button class="btn btn-primary" id="playerStop">
    Stop <i class="icon-stop icon-white"></i>
</button>
<button class="btn btn-primary" href="#saveModal" data-signed-in="false" id="playerSave">
    Save <i class="icon-file icon-white"></i>
</button>
<button class="btn btn-primary pull-right" id="playerReset">
    Clear <i class="icon-trash icon-white"></i>
</button>

Javascript

$('#player').audioPlayerGraphical({
    bpm: 100,
    stopButton: '#playerStop',
    saveButton: '#playerSave',
    playButton: '#playerPlay',
    clearButton: '#playerReset'
  });

To use the audio editor, see the following example.

HTML

<div id="audioViewer">
    <canvas id="sampleTrim"></canvas>
    <canvas id="sampleWaveform"></canvas>
    <canvas id="samplePlayIndex"></canvas>
</div>
<div id="audioViewerControls">
    <button class="btn btn-mini btn-primary" id="samplePlay" title="Play/Stop">
        <i class="icon-play icon-white"></i>
    </button>
    <button class="btn btn-mini btn-primary" id="sampleZoomIn" title="Zoom In">
        <i class="icon-zoom-in icon-white"></i>
    </button>
    <button class="btn btn-mini btn-primary" id="sampleZoomOut" title="Zoom Out">
        <i class="icon-zoom-out icon-white"></i>
    </button>
    <div id="waveformSample" data-waveform="true">Drag to player when finished.</div>
</div>

Javascript

//plug-in for viewer
$('#sampleWaveform').audioViewer({
    playButton: '#samplePlay',
    zoomInButton: '#sampleZoomIn',
    zoomOutButton: '#sampleZoomOut',
    dropFileBox: '#sampleTrim'
});