waveform-playlist
Version:
Multiple track web audio editor and player with waveform preview
70 lines (60 loc) • 3.69 kB
HTML
<html>
<head>
<meta charset=utf-8 />
<title>Waveform Playlist | Record Track Example</title>
<meta name="description" content="Record audio tracks in the browser with the MediaRecorder API." />
<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>Record An Audio Track</h1>
<p>Experimental recording feature using <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder">MediaRecorder</a>, only works in Firefox. Tested in Firefox >= 41.0.2.</p>
<p>Best to access the page over https for getUserMedia</p>
<p>Can record a track on top of the previously recorded track! Drop some tracks into the container below if you'd like to try recording over them.</p>
<div id="top-bar" class="playlist-top-bar">
<div class="playlist-toolbar">
<div class="btn-group">
<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-record btn btn-danger disabled"><i class="fa fa-microphone"></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>
</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/record.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>