<html>
<head>
<title>Lame.js Upload Example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
</head>
<body style="padding-top: 30px">
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<form method="post" enctype="multipart/form-data" action="" class="form-horizontal" id="inputForm">
<div class="control-group">
<label class="control-label col-sm-4">
Select Wave File
</label>
<div class="col-sm-3">
<input type="file" id="audioReceiver" name="audioReceiver" accept="audio" class="form-control"/>
</div>
<div class="col-sm-3">
<div class="input-group">
<select id="bitRate" class="form-control">
<option>32</option>
<option>40</option>
<option>48</option>
<option>56</option>
<option>64</option>
<option>80</option>
<option>96</option>
<option>112</option>
<option selected="">128</option>
<option>192</option>
<option>224</option>
<option>256</option>
<option>320</option>
</select>
<span class="input-group-addon">kbit/s</span>
</div>
</div>
<div class="col-sm-2">
<button class="btn btn-primary">
Convert File
</button>
</div>
</div>
</form>
<div class="clearfix"></div>
<br/>
<br/>
<div id='StatusMessage' class="alert alert-info" style="display: none;"></div>
<div id="AudioArea"></div>
<ol class="convertedList"></ol>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="index.js"></script>
<script>
//on document ready
$(function () {
var converter = new MP3Converter();
var file;
$('#audioReceiver').on('change', function () {
file = this.files[0];
$('#StatusMessage').html(
"File Size in bytes: " + file.size
).show();
});
$('#inputForm').on('submit', function (e) {
e.preventDefault();
if (!file || file.size < 1) {
alert('Specified file is not valid');
return;
}
//convert
var onComplete = function () {
$('#StatusMessage').html('').hide();
file = null;
$('#inputForm').show();
};
$('#StatusMessage').html(
'<div class="progress">' +
'<div class="progress-bar" style="width: 0%;">' +
'</div></div>'
).show();
$('#inputForm').hide();
var bitRate = parseInt($('#bitRate').val(), 10);
converter.convert(file, {
bitRate: bitRate
}, function (blob) {
//log blog
var blobUrl = window.URL.createObjectURL(blob);
$('ol.convertedList')
.append('<li><strong>' +
file.name +
'</strong><br/>' +
'<audio controls src="' + blobUrl + '"></audio>' +
'</li>');
onComplete();
}, function (progress) {
$('#StatusMessage')
.find('.progress-bar')
.css('width', (progress * 100) + '%')
});
});
});
</script>
</body>
</html>
