Newer
Older
DH_Apicture / src / views / voice / lamejs / worker-example / index.html
@zhangqy zhangqy on 29 Nov 4 KB first commit
  1. <html>
  2. <head>
  3. <title>Lame.js Upload Example</title>
  4. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
  5. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
  6. </head>
  7.  
  8. <body style="padding-top: 30px">
  9. <div class="container">
  10. <div class="row">
  11. <div class="col-sm-8 col-sm-offset-2">
  12. <form method="post" enctype="multipart/form-data" action="" class="form-horizontal" id="inputForm">
  13. <div class="control-group">
  14. <label class="control-label col-sm-4">
  15. Select Wave File
  16. </label>
  17.  
  18. <div class="col-sm-3">
  19. <input type="file" id="audioReceiver" name="audioReceiver" accept="audio" class="form-control"/>
  20. </div>
  21.  
  22. <div class="col-sm-3">
  23. <div class="input-group">
  24. <select id="bitRate" class="form-control">
  25. <option>32</option>
  26. <option>40</option>
  27. <option>48</option>
  28. <option>56</option>
  29. <option>64</option>
  30. <option>80</option>
  31. <option>96</option>
  32. <option>112</option>
  33. <option selected="">128</option>
  34. <option>192</option>
  35. <option>224</option>
  36. <option>256</option>
  37. <option>320</option>
  38. </select>
  39. <span class="input-group-addon">kbit/s</span>
  40. </div>
  41. </div>
  42.  
  43. <div class="col-sm-2">
  44. <button class="btn btn-primary">
  45. Convert File
  46. </button>
  47. </div>
  48. </div>
  49.  
  50. </form>
  51.  
  52. <div class="clearfix"></div>
  53. <br/>
  54. <br/>
  55. <div id='StatusMessage' class="alert alert-info" style="display: none;"></div>
  56. <div id="AudioArea"></div>
  57. <ol class="convertedList"></ol>
  58.  
  59. </div>
  60. </div>
  61. </div>
  62. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  63. <script src="index.js"></script>
  64. <script>
  65. //on document ready
  66. $(function () {
  67. var converter = new MP3Converter();
  68. var file;
  69. $('#audioReceiver').on('change', function () {
  70. file = this.files[0];
  71. $('#StatusMessage').html(
  72. "File Size in bytes: " + file.size
  73. ).show();
  74. });
  75.  
  76. $('#inputForm').on('submit', function (e) {
  77. e.preventDefault();
  78. if (!file || file.size < 1) {
  79. alert('Specified file is not valid');
  80. return;
  81. }
  82.  
  83. //convert
  84. var onComplete = function () {
  85. $('#StatusMessage').html('').hide();
  86. file = null;
  87. $('#inputForm').show();
  88. };
  89.  
  90. $('#StatusMessage').html(
  91. '<div class="progress">' +
  92. '<div class="progress-bar" style="width: 0%;">' +
  93. '</div></div>'
  94. ).show();
  95. $('#inputForm').hide();
  96.  
  97. var bitRate = parseInt($('#bitRate').val(), 10);
  98.  
  99. converter.convert(file, {
  100. bitRate: bitRate
  101. }, function (blob) {
  102. //log blog
  103. var blobUrl = window.URL.createObjectURL(blob);
  104. $('ol.convertedList')
  105. .append('<li><strong>' +
  106. file.name +
  107. '</strong><br/>' +
  108. '<audio controls src="' + blobUrl + '"></audio>' +
  109. '</li>');
  110. onComplete();
  111. }, function (progress) {
  112. $('#StatusMessage')
  113. .find('.progress-bar')
  114. .css('width', (progress * 100) + '%')
  115. });
  116.  
  117. });
  118.  
  119. });
  120. </script>
  121. </body>
  122.  
  123. </html>