templates/base64-to-audio.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title %}
  3. ToBase64.dev - Decode base64 audio and get decoded audio
  4. {% endblock %}
  5. {% block h1 %}Decode base64 to audio{% endblock %}
  6. {% block body %}
  7. <div class="row" style="height: 60%;">
  8. <div class="padding col-5">
  9. <form method="post" action="" class="form" style="height: 100%">
  10. <textarea class="form-control" id="input4" name="input3" placeholder="Type (or paste) here..." spellcheck="false" style="width: 100%;height: 100%;"></textarea>
  11. </form>
  12. </div>
  13. <div class="col-2 d-flex flex-column">
  14. <div class="padding row" style="margin-top:auto;margin-bottom:auto;">
  15. <button type="button" onclick="toaudio()" class="col-12 btn btn-info"><i class="fas fa-long-arrow-alt-right"></i></button>
  16. </div>
  17. </div>
  18. <div class="padding col-5 d-flex flex-column">
  19. <div style="height: 85%">
  20. <audio controls class="form-control" id="audio" name="output" placeholder="Output will be displayed here..." spellcheck="false" style="width: 100%;height: 100%;">
  21. <source id="output4" src="data:image/png;base64," type="audio/mpeg">
  22. Your browser does not support the audio element.
  23. </audio>
  24. </div>
  25. <button id="download" type="button" class="btn btn-info" onclick="download()" style="margin-top:auto;">Download file!</button>
  26. </div>
  27. </div>
  28. <script type="text/javascript">
  29. // Add the following code if you want the name of the file appear on select
  30. $(".custom-file-input").on("change", function() {
  31. var fileName = $(this).val().split("\\").pop();
  32. $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
  33. });
  35. function copyToClipboard(element) {
  36. var copyText = document.getElementById(element);
  37. copyText.select();
  38. document.execCommand("copy");
  40. }
  42. function download() {
  43. var url = document.getElementById('output4').src.replace(/^data:audio\/[^;]+/, 'data:audio/mpeg');
  44. var link = document.createElement('a');
  45. link.href = url;
  46. link.download = 'audio.mp3';
  47. document.body.appendChild(link);
  48. link.click();
  49. document.body.removeChild(link);
  50. //window.open(url);
  51. }
  53. function toimage() {
  54. var string = document.getElementById('input3').value;
  55. var image = "data:image/png;base64," + string;
  56. document.getElementById('output3').src = image;
  57. document.getElementById('download').disabled = false;
  58. }
  60. function toaudio() {
  61. var string = document.getElementById('input4').value;
  62. var audio = "data:audio/mpeg;base64," + string;
  63. document.getElementById('output4').src = audio;
  64. document.getElementById('download').disabled = false;
  65. document.getElementById('audio').load();
  66. }
  68. function totext() {
  69. var Base64 = { _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=", encode: function(e) { var t = ""; var n, r, i, s, o, u, a; var f = 0;
  70. e = Base64._utf8_encode(e); while (f < e.length) { n = e.charCodeAt(f++);
  71. r = e.charCodeAt(f++);
  72. i = e.charCodeAt(f++);
  73. s = n >> 2;
  74. o = (n & 3) << 4 | r >> 4;
  75. u = (r & 15) << 2 | i >> 6;
  76. a = i & 63; if (isNaN(r)) { u = a = 64 } else if (isNaN(i)) { a = 64 } t = t + this._keyStr.charAt(s) + this._keyStr.charAt(o) + this._keyStr.charAt(u) + this._keyStr.charAt(a) } return t }, decode: function(e) { var t = ""; var n, r, i; var s, o, u, a; var f = 0;
  77. e = e.replace(/\\+\\+[++^A-Za-z0-9+/=]/g, ""); while (f < e.length) { s = this._keyStr.indexOf(e.charAt(f++));
  78. o = this._keyStr.indexOf(e.charAt(f++));
  79. u = this._keyStr.indexOf(e.charAt(f++));
  80. a = this._keyStr.indexOf(e.charAt(f++));
  81. n = s << 2 | o >> 4;
  82. r = (o & 15) << 4 | u >> 2;
  83. i = (u & 3) << 6 | a;
  84. t = t + String.fromCharCode(n); if (u != 64) { t = t + String.fromCharCode(r) } if (a != 64) { t = t + String.fromCharCode(i) } } t = Base64._utf8_decode(t); return t }, _utf8_encode: function(e) { e = e.replace(/\r\n/g, "\n"); var t = ""; for (var n = 0; n < e.length; n++) { var r = e.charCodeAt(n); if (r < 128) { t += String.fromCharCode(r) } else if (r > 127 && r < 2048) { t += String.fromCharCode(r >> 6 | 192);
  85. t += String.fromCharCode(r & 63 | 128) } else { t += String.fromCharCode(r >> 12 | 224);
  86. t += String.fromCharCode(r >> 6 & 63 | 128);
  87. t += String.fromCharCode(r & 63 | 128) } } return t }, _utf8_decode: function(e) { var t = ""; var n = 0; var r = c1 = c2 = 0; while (n < e.length) { r = e.charCodeAt(n); if (r < 128) { t += String.fromCharCode(r);
  88. n++ } else if (r > 191 && r < 224) { c2 = e.charCodeAt(n + 1);
  89. t += String.fromCharCode((r & 31) << 6 | c2 & 63);
  90. n += 2 } else { c2 = e.charCodeAt(n + 1);
  91. c3 = e.charCodeAt(n + 2);
  92. t += String.fromCharCode((r & 15) << 12 | (c2 & 63) << 6 | c3 & 63);
  93. n += 3 } } return t } }
  94. // Define the string
  95. var string = document.getElementById('input4').value;
  97. // Encode the String
  98. var decodedString = Base64.decode(string);
  99. document.getElementById('output4').value = decodedString;
  100. }
  102. function tobase64() {
  103. var Base64 = { _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=", encode: function(e) { var t = ""; var n, r, i, s, o, u, a; var f = 0;
  104. e = Base64._utf8_encode(e); while (f < e.length) { n = e.charCodeAt(f++);
  105. r = e.charCodeAt(f++);
  106. i = e.charCodeAt(f++);
  107. s = n >> 2;
  108. o = (n & 3) << 4 | r >> 4;
  109. u = (r & 15) << 2 | i >> 6;
  110. a = i & 63; if (isNaN(r)) { u = a = 64 } else if (isNaN(i)) { a = 64 } t = t + this._keyStr.charAt(s) + this._keyStr.charAt(o) + this._keyStr.charAt(u) + this._keyStr.charAt(a) } return t }, decode: function(e) { var t = ""; var n, r, i; var s, o, u, a; var f = 0;
  111. e = e.replace(/\\+\\+[++^A-Za-z0-9+/=]/g, ""); while (f < e.length) { s = this._keyStr.indexOf(e.charAt(f++));
  112. o = this._keyStr.indexOf(e.charAt(f++));
  113. u = this._keyStr.indexOf(e.charAt(f++));
  114. a = this._keyStr.indexOf(e.charAt(f++));
  115. n = s << 2 | o >> 4;
  116. r = (o & 15) << 4 | u >> 2;
  117. i = (u & 3) << 6 | a;
  118. t = t + String.fromCharCode(n); if (u != 64) { t = t + String.fromCharCode(r) } if (a != 64) { t = t + String.fromCharCode(i) } } t = Base64._utf8_decode(t); return t }, _utf8_encode: function(e) { e = e.replace(/\r\n/g, "\n"); var t = ""; for (var n = 0; n < e.length; n++) { var r = e.charCodeAt(n); if (r < 128) { t += String.fromCharCode(r) } else if (r > 127 && r < 2048) { t += String.fromCharCode(r >> 6 | 192);
  119. t += String.fromCharCode(r & 63 | 128) } else { t += String.fromCharCode(r >> 12 | 224);
  120. t += String.fromCharCode(r >> 6 & 63 | 128);
  121. t += String.fromCharCode(r & 63 | 128) } } return t }, _utf8_decode: function(e) { var t = ""; var n = 0; var r = c1 = c2 = 0; while (n < e.length) { r = e.charCodeAt(n); if (r < 128) { t += String.fromCharCode(r);
  122. n++ } else if (r > 191 && r < 224) { c2 = e.charCodeAt(n + 1);
  123. t += String.fromCharCode((r & 31) << 6 | c2 & 63);
  124. n += 2 } else { c2 = e.charCodeAt(n + 1);
  125. c3 = e.charCodeAt(n + 2);
  126. t += String.fromCharCode((r & 15) << 12 | (c2 & 63) << 6 | c3 & 63);
  127. n += 3 } } return t } }
  129. // Define the string
  130. var string = document.getElementById('input2').value;
  132. // Encode the String
  133. var encodedString = Base64.encode(string);
  134. document.getElementById('output2').value = encodedString;
  135. }
  136. </script>
  137. <style>
  138. </style>
  139. <script>
  140. function handleFileSelect(evt) {
  141. document.getElementById("loading").style.display = "";
  142. var files = evt.target.files; // FileList object
  144. // Loop through the FileList and render image files as thumbnails.
  145. for (var i = 0, f; f = files[i]; i++) {
  146. // Only process image files.
  147. if (!f.type.match('image.*')) {
  148. continue;
  149. }
  151. var reader = new FileReader();
  153. // Closure to capture the file information.
  154. reader.onload = (function(theFile) {
  155. return function(e) {
  156. // Render thumbnail.
  157. document.getElementById('imageb64').src = e.target.result;
  158. document.getElementById("output3").value = "url('" + e.target.result + "')";
  159. document.getElementById("output2").value = e.target.result;
  160. document.getElementById("output1").value = e.target.result.split(',')[1];
  161. imageB64 = e.target.result;
  162. document.getElementById("loading").style.display = "none";
  163. };
  164. })(f);
  166. // Read in the image file as a data URL.
  167. reader.readAsDataURL(f);
  168. }
  169. }
  171. //document.getElementById('files').addEventListener('change', handleFileSelect, false);
  172. </script>
  173. {% endblock %}