Skip to content

Modernize application to current web standards #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
plucked wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Modernize application to current web standards #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@

.DS_Store
node_modules/
451 changes: 196 additions & 255 deletions index.html
View file
Open in desktop

Large diffs are not rendered by default.

319 changes: 319 additions & 0 deletions legacy.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,319 @@

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 Audio Editor</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<!-- Le styles -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="bootstrap/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="bootstrap/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="bootstrap/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="bootstrap/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="bootstrap/ico/apple-touch-icon-57-precomposed.png">
</head>

<body onload="onDocumentLoaded()">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">HTML5 Audio Editor</a>
<ul class="nav pull-right">
<li><a data-toggle="modal" href="#helpAsModal">Help</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">
<center>
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn btn-primary" onclick="$('#audioLayerControl')[0].copy();"><i class="icon-share icon-white"></i> Copy</a>
<a class="btn btn-primary" onclick="$('#audioLayerControl')[0].paste();"><i class="icon-chevron-down icon-white"></i> Paste</a>
<a class="btn btn-primary" onclick="$('#audioLayerControl')[0].cut();"><i class="icon-chevron-up icon-white"></i> Cut</a>
<a class="btn btn-primary" onclick="$('#audioLayerControl')[0].crop();"><i class="icon-retweet icon-white"></i> Crop</a>
<a class="btn btn-primary" onclick="$('#audioLayerControl')[0].del();"><i class="icon-remove icon-white"></i> Delete</a>
</div>
<div class="btn-group">
<a class="btn btn-success" onclick="$('#audioLayerControl')[0].selectAll();"><i class="icon-resize-horizontal icon-white"></i> Select All</a>
<a class="btn btn-success" onclick="$('#audioLayerControl')[0].zoomIntoSelection();"><i class="icon-plus-sign icon-white"></i> Zoom To Selection</a>
<a class="btn btn-success" onclick="$('#audioLayerControl')[0].zoomToFit();"><i class="icon-fullscreen icon-white"></i> Zoom To Fit</a>
</div>
</div>
</center>
</div>
</div>
<hr />
<div class="row">
<div class="span4">
<h6>Spectrum</h6>
<div class="well">
<div id="spectrum"></div>
</div>
</div>
<div class="span8">
<h6>Editor</h6>
<div class="well">
<audioLayerControl id="audioLayerControl" title="CloudCompany.mp3" />
</div>
<!--<div id="editor">
<div id="editorbox">
<audioLayerControl id="audioLayerControl" title="CloudCompany.mp3" />
</div>
</div>-->
</div>
</div>
<hr>
<div class="row">
<div class="span12">
<center>
<div class="btn-toolbar">
<div class="btn-group">
<a id="btn_play" class="btn btn-success btn-large" onclick="$('#audioLayerControl')[0].play()" rel="tooltip" title="first tooltip"><i class="icon-play icon-white"></i></a>
<a id="btn_pause" class="btn btn-success btn-large disabled"><i class="icon-pause icon-white"></i></a>
<a id="btn_stop" class="btn btn-success btn-large" onclick="$('#audioLayerControl')[0].stop()"><i class="icon-stop icon-white"></i></a>
<a id="btn_loop" class="btn btn-warning btn-large" data-toggle="button" onclick="$('#audioLayerControl')[0].toggleLoop();"><i class="icon-repeat icon-white"></i></a>
</div>
<div class="btn-group">
<a class="btn btn-large btn-primary" onclick="$('#audioLayerControl')[0].save($('#savelink')[0]);"><i class="icon-fire"></i> Render</a>
<a class="btn btn-large btn-success disabled" id="savelink" download="export.wav"><i class="icon-download"></i> Save</a>
</div>
</div>
</center>
</div>
</div>
<div class="row">
<div class="span4 offset4">
<div class="progress progress-striped active">
<div id="app-progress" class="bar" style="width: 0%;"></div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="span1"><br></div>
<div class="span2">
<h6>Gain</h6>
<div class="well" style="height: 130px; position:relative">
<p>Change the volume of the selected audio sequence with the given gain multiplicator.</p>

<div class="pull-right" style=" position:absolute; bottom: 5px; width: 100%;" >
<div class="btn-group" >

<button class="btn btn-success" onclick="decrease_db()"><i class="icon-minus"></i></button>
<button id="gain-db" class="btn disabled" onclick="gain_btn_clicked()">0 db</button>
<button class="btn btn-success" onclick="increase_db()"><i class="icon-plus"></i></button>
</div>
</div>
<script type="text/javascript">
var db_gain = 0;

function decrease_db()
{
--db_gain;
update_db_gain_btn();
}

function increase_db()
{
++db_gain;
update_db_gain_btn();
}

function update_db_gain_btn()
{
var gain_btn = $('#gain-db')[0];

gain_btn.innerHTML = db_gain + ' db';

if (db_gain === 0)
{
gain_btn.className = 'btn disabled';
}
else
{
gain_btn.className = 'btn btn-primary';
}
}

function gain_btn_clicked()
{
$('#audioLayerControl')[0].filterGain(db_gain);
db_gain = 0;
update_db_gain_btn();
}
</script>
</div>
</div>
<div class="span2">
<h6>Normalize</h6>
<div class="well" style="height: 130px; position:relative">
<p>Adjust the volume to the maximum of the selected audio sequence.</p>
<a style="position:absolute; bottom: 5px; right: 5px" class="btn btn-primary pull-right" onclick="$('#audioLayerControl')[0].filterNormalize();">Apply</a>
<br>
</div>
</div>
<div class="span2">
<h6>Silence</h6>
<div class="well" style="height: 130px; position:relative">
<p>Silence the selected audio sequence</p>
<a style="position:absolute; bottom: 5px; right: 5px" class="btn btn-primary pull-right" onclick="$('#audioLayerControl')[0].filterSilence();">Apply</a>
<br>
</div>
</div>
<div class="span2">
<h6>Fade In</h6>
<div class="well" style="height: 130px; position:relative">
<p>Create a linear fade int of the selected audio sequence</p>
<a style="position:absolute; bottom: 5px; right: 5px" class="btn btn-primary pull-right" onclick="$('#audioLayerControl')[0].filterFadeIn();">Apply</a>
<br>
</div>
</div>
<div class="span2">
<h6>Fade Out</h6>
<div class="well" style="height: 130px; position:relative">
<p>Create a linear fade out of the selected audio sequence</p>
<a style="position:absolute; bottom: 5px; right: 5px" class="btn btn-primary pull-right" onclick="$('#audioLayerControl')[0].filterFadeOut();">Apply</a>
<br>
</div>
</div>
<div class="span1">

</div>
</div>

<div class="row">
<div class="span8">

</div>
</div>

<!-- Le Footer
================================================== -->
<footer class="footer">

<br>
<p class="pull-left"><a href="#">Back to top</a></p>
<blockquote class="pull-right">
<p>This Web-Application was written by Rainer Heynke <a href="http://twitter.com/plucked">@plucked</a></p>
<p>I used <a href="http://twitter.github.com/bootstrap/index.html">Bootstrap</a> for the design and especially the theme <a href="http://bootswatch.com/slate/">Slate</a></p>
<p>Parts of the code were taken from the <a href="http://audacity.sourceforge.net/">Audacity</a> project and converted from C++ to JavaScript</p>
<p>The project is available at github: <a href="https://github.com/plucked/html5-audio-editor">html5-audio-editor</a></p>
</blockquote>
</footer>


<!-- Le Help
================================================== -->
<div class="modal hide" id="helpAsModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Help</h3>
</div>
<div class="modal-body">
<p>Help text … TODO</p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a>
</div>
</div>

<!-- Le Startup
================================================== -->
<div class="modal hide" id="welcomeAsModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Information</h3>
</div>
<div class="modal-body">
<p>Welcome to my HTML 5 Audio Editor. You can edit WAVE, OGG and MP3 files and export them as WAVE. This application uses no extra plugins like Flash or Silverlight, it's written in JavaScript and HTML.</p>
<p>I used some of the implementations given the design draft of the HTML5 and Web Audio APIs. It is currently supported in all the major browsers except Internet Explorer.</p>
<p>Your browser support is: <span id="browser_support" class="label">Unknown</span></p>
<p>Have fun, this is a prototype and my first web project.</p>


</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a>
</div>
</div>


<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="jquery/js/jquery-1.7.2.js"></script>
<script src="bootstrap/js/bootstrap-transition.js"></script>
<script src="bootstrap/js/bootstrap-alert.js"></script>
<script src="bootstrap/js/bootstrap-modal.js"></script>
<script src="bootstrap/js/bootstrap-dropdown.js"></script>
<script src="bootstrap/js/bootstrap-scrollspy.js"></script>
<script src="bootstrap/js/bootstrap-tab.js"></script>
<script src="bootstrap/js/bootstrap-tooltip.js"></script>
<script src="bootstrap/js/bootstrap-popover.js"></script>
<script src="bootstrap/js/bootstrap-button.js"></script>
<script src="bootstrap/js/bootstrap-collapse.js"></script>
<script src="bootstrap/js/bootstrap-carousel.js"></script>
<script src="bootstrap/js/bootstrap-typeahead.js"></script>


<script type="text/javascript" src="app/js/ACFIRFilter.js"></script>
<script type="text/javascript" src="app/js/ACAAFilter.js"></script>
<script type="text/javascript" src="app/js/ACSpectrum.js"></script>
<script type="text/javascript" src="app/js/ACFFT.js"></script>
<script type="text/javascript" src="app/js/SpectrumWorker.js"></script>
<script type="text/javascript" src="app/js/SpectrumDisplay.js"></script>
<script type="text/javascript" src="app/js/audioplayback.js"></script>
<script type="text/javascript" src="app/js/filedropbox.js"></script>
<script type="text/javascript" src="app/js/fft.js"></script>
<script type="text/javascript" src="app/js/audioLayerControl.js"></script>
<script type="text/javascript" src="app/js/audiosequence.js"></script>
<script type="text/javascript" src="app/js/AudioSequenceEditor.js"></script>
<script type="text/javascript" src="app/js/mathutilities.js"></script>
<script type="text/javascript" src="app/js/wavetrack.js"></script>
<script type="text/javascript" src="app/js/binarytoolkit.js"></script>
<script type="text/javascript" src="app/js/filesystemutility.js"></script>
<script type="text/javascript" src="app/js/recorder.js"></script>
<script type="text/javascript" src="app/js/recorderWorker.js"></script>
<script type="text/javascript" src="app/js/editorapp.js"></script>

<script type="text/javascript">
$(window).load(function()
{
var supportLabel = $('#browser_support')[0];

if (typeof(window.AudioContext || window.webkitAudioContext) === 'undefined')
{
supportLabel.className = "label label-important";
supportLabel.innerHTML = 'no web audio API support. try the latest Google Chrome build.';
}
else
{
supportLabel.className = "label label-success";
supportLabel.innerHTML = 'you have web audio API support.';
}

$('#welcomeAsModal').modal('show');
});
</script>
</body>
</html>
Loading