waveform-playlist
Version:
Multiple track web audio editor and player with waveform preview
89 lines (79 loc) • 5.16 kB
HTML
<html>
<head>
<meta charset=utf-8 />
<title>Waveform Playlist | Multitrack Web Audio Editor Full Example</title>
<meta name="description" content="Waveform Playlist: The multitrack javascript web audio editor and player. Set audio cue in and cue out. Set linear, exponential, logarithmic, and s-curve fades. Shift audio in time. Zoom in and zoom out on the waveform. Play, stop, pause and seek inside the audio tracks." />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/playlist.css">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/waveform-playlist.var.js"></script>
</head>
<body>
<a href="https://github.com/naomiaro/waveform-playlist" style="position: absolute; top: 0; right: 0; border: 0; z-index: 100;"><img src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
<h1>Full Waveform Editor Example</h1>
<p>Every control and state available</p>
<div id="top-bar" class="playlist-top-bar">
<div class="playlist-toolbar">
<div class="btn-group">
<span class="btn-pause btn btn-warning"><i class="fa fa-pause"></i></span>
<span class="btn-play btn btn-success"><i class="fa fa-play"></i></span>
<span class="btn-stop btn btn-danger"><i class="fa fa-stop"></i></span>
<span class="btn-rewind btn btn-success"><i class="fa fa-fast-backward"></i></span>
<span class="btn-fast-forward btn btn-success"><i class="fa fa-fast-forward"></i></span>
</div>
<div class="btn-group">
<span title="zoom in" class="btn-zoom-in btn btn-default"><i class="fa fa-search-plus"></i></span>
<span title="zoom out" class="btn-zoom-out btn btn-default"><i class="fa fa-search-minus"></i></span>
</div>
<div class="btn-group btn-playlist-state-group">
<span class="btn-cursor btn btn-default active" title="select cursor"><i class="fa fa-headphones"></i></span>
<span class="btn-select btn btn-default" title="select audio region"><i class="fa fa-italic"></i></span>
<span class="btn-shift btn btn-default" title="shift audio in time"><i class="fa fa-arrows-h"></i></span>
<span class="btn-fadein btn btn-default" title="set audio fade in"><i class="fa fa-long-arrow-left"></i></span>
<span class="btn-fadeout btn btn-default" title="set audio fade out"><i class="fa fa-long-arrow-right"></i></span>
</div>
<div class="btn-group btn-fade-state-group hidden">
<span class="btn btn-default btn-logarithmic active">logarithmic</span>
<span class="btn btn-default btn-linear">linear</span>
<span class="btn btn-default btn-exponential">exponential</span>
<span class="btn btn-default btn-scurve">s-curve</span>
</div>
<div class="btn-group btn-select-state-group hidden">
<span title="keep only the selected audio region for a track" class="btn-trim-audio btn btn-primary disabled">Trim Audio</span>
</div>
<div class="btn-group">
<span title="Prints playlist info to console" class="btn btn-info">Print Playlist Info to Console</span>
</div>
</div>
</div>
<div id="playlist"></div>
<div class="playlist-bottom-bar">
<form class="form-inline">
<select class="time-format form-control">
<option value="seconds">seconds</option>
<option value="thousandths">thousandths</option>
<option value="hh:mm:ss">hh:mm:ss</option>
<option value="hh:mm:ss.u">hh:mm:ss + tenths</option>
<option value="hh:mm:ss.uu">hh:mm:ss + hundredths</option>
<option value="hh:mm:ss.uuu">hh:mm:ss + milliseconds</option>
</select>
<input type="text" class="audio-start input-small form-control">
<input type="text" class="audio-end input-small form-control">
<label class="audio-pos">00:00:00.0</label>
</form>
<div class="track-drop"></div>
</div>
<script type="text/javascript" src="js/examples/web-audio-editor.js"></script>
<script type="text/javascript" src="js/examples/emitter.js"></script>
<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-62186746-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>