I am capturing audio data via JavaScript and intend to send it as a base64 encoded String. Before I even send it, I'm just testing to see if I can reconstruct it and play it, and I'm not having much luck.
In the console, the blob looks like this:
How can I retrieve the initial audioBlob object from the base64 encoded data produced by reader.readAsDataURL(audioBlob) so that I can play it in its correct form?
mediaRecorder.addEventListener("dataavailable", function(event) {
audioChunks.push(event.data);
var audioBlob = new Blob(audioChunks);
// PLAYBACK WORKS HERE!
var audioUrl = URL.createObjectURL(audioBlob);
var audio = new Audio(audioUrl);
audio.play();
var reader = new FileReader();
reader.onload = function(event){
var audioData = event.target.result;
// extracting and decoding just the bas64 data, attempting to reconstruct audioBlob
var base64 = audioData.substr(audioData.lastIndexOf(',') + 1);
var decoded = atob(base64);
var reconstructedAudioBlob = new Blob([decoded], {type: "audio/webm;codecs=opus"});
// PLAYBACK FAILS HERE!
var reconstructedAudioUrl = URL.createObjectURL(reconstructedAudioBlob);
var reconstructedAudio = new Audio(reconstructedAudioUrl);
reconstructedAudio.play();
};
reader.readAsDataURL(audioBlob);
});
This results in a console error: Uncaught (in promise) DOMException
The data for event.target.result (if you manage to decode it and play it, enjoy!) is as follows:
data:application/octet-stream;base64,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
You're on the right track. I would create a function that converts the URI to pure binary by removing the base64 headers, and then setting that as the audio source. Using your data, this should do the trick:
function convertURIToBinary(dataURI) {
let BASE64_MARKER = ';base64,';
let base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
let base64 = dataURI.substring(base64Index);
let raw = window.atob(base64);
let rawLength = raw.length;
let arr = new Uint8Array(new ArrayBuffer(rawLength));
for (let i = 0; i < rawLength; i++) {
arr[i] = raw.charCodeAt(i);
}
return arr;
}
let binary = convertURIToBinary(data);
let blob = new Blob([binary], {
type: 'audio/ogg'
});
let blobUrl = URL.createObjectURL(blob);
$("#source").attr("src", blobUrl);
$("#audio")[0].load();
$("#audio")[0].oncanplaythrough = $("#audio")[0].play();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<audio id="audio" controls>
<source id="source" src="" type="audio/ogg" />
</audio>
<script>
let data = "data:application/octet-stream;base64,GkXfo59ChoEBQveBAULygQRC84EIQoKEd2VibUKHgQRChYECGFOAZwH/////////FUmpZpkq17GDD0JATYCGQ2hyb21lV0GGQ2hyb21lFlSua7+uvdeBAXPFhyclHzqvN7GDgQKGhkFfT1BVU2Oik09wdXNIZWFkAQEAAIC7AAAAAADhjbWERzuAAJ+BAWJkgSAfQ7Z1Af/////////ngQCjQYaBAACA+4OzXnuBgl3yyb73GghmlCLmSdXgQI06MTtujZRqPyATqeUwfvNvGcyG294bqH2N0pn9suUh0Isrnb+78cMVsv3mrXfgvINYLCWNse+9ZdGNrhK7p+ueu++U0fuF9PT1U1C3EJ9vGtZdrExDWxkSdBqe2bVXeRN4UmR/PwuoGqKhZyOrqv4dAiLQWOb57aehbFKajj0G1OJCohFYWMurToiKnWuyC9KnMug1XaIhWBwy0/xYspbtXi5Z1KmTaxUdk6UFCSjZ3lxZzuUZc/O+llp74d4Fygx8HBfXDACq2QuEwAIR+rOm3o70e6i8D7h4dr+Vk1B3e8sN5ne8aPNZzjR0hKdKkPz9hW8GMPll52vyNATvHlrp+h9oK6LiY3R6NcS7ymyf9leiFca4ODU1JNkLqkRkU0OfZV/RFr5GXnv6VWt3H8daXb6EvJthit13hE0rWmV5jqUQnhGpHJkzOF0oHENZgn9137y+Ncn9Ip8vJ9ixM/EJARaU9kVEgAX+QwGjQYOBADuA+wNQq5l3a6QOWw1TF8RnsJg5eo8aEzKN1x95c4EvryMVl4VtdcNuFxNF/UTnxApLOQjn0j7tvdy2XnCCZjeiT2v2dPxW1ISZ7OBMv1g4r1e/KWdUSNyBXrs/rbCMhUNUFezU8U6Xj9/Y9O9HmuIIrEA7P40CEu2DD3mIH4dtRndWWyXjyRQufwIRMOvty8+baOZgW5em4qsdrHzwI0IlPwycsCszdMGdh3AauwQdTBwEax/cAS9taohVo/JN2Mu3FBtooDUsQSOpF51U3dNFARL5fpywwCbr4anI5uXFCKANSCh2sGIrL6T7uRxeK8UVf+SXhY1RaQNP+Y21VuNkz1AYPChqII5wBU7xwB8YxglwYYa+h6cTj2al/DleEzeI7bvMhG1SHUGOlpaQet+lkVW7YCIIaINabFmjAz/u9JFTAbhza4xh6K54pPoNxbYhoWNDYgleQxPuD8iqAq5G87vZwMsCE8n6uuj6eVnwN7xbb+tCsmN3J6YpJ0DZrRGjQYOBAHeA+wNbcJ9WdRw6Xo4VPb+HT3lAR2b9+5aK66rSS8ahg8tt5S/twbq8ImtCGzAQ4eBoDlqn0mReaiiDlM1hPBA95SSwmHcKUWbIh1nSn4FWa1WUf3GhxV0LRdKBz3zHvK1eSnCb6MnaxZkhN2e5ntS7S9mmYIghcsTVCUdvAS8B5L2kUBNqDt+zaNK1O2hJzB5hJ5JpYUbEtXC52srg4E4P85hVUjN1Mc5reFXslUfGTXDGeUmb5qNPucJQiVnAoNIp/SiivTlJbSMALZv8f5UK7drVY3kMZvQUs6sQ9TImURAjk81+yKTTBJaOfnQKjAmql4AT8UZ+Sj9xuklC+91+GVllnu7J6PGyRPOJ6SQwkKp4KMX8vsKpnXi6ji6mEuFHzgsEcsdLvCxEms+CkF6mVUNdZYgXglG2hf2JE5qVL4Xlr0ZymUyXxVgRUA+lRCmDGmmXOZ1XN7eMRv/wlOIbDlfWfcxf7a2OW80h3CuAYZX2UtR0yKr+TV8ms8thOmGjQduBALOA+4PedXj+185c8bPkPGXVEYoCleExkv7A31cNnfl445nO+3of2LJ1KC5osD4bH7Jm8wdbnQ2wF/9/Y4QHWdFbAmonRMxbxUdirNkJ+1vAKfwhGyg5rrTt2Guky7F55eBhFzt9rKU5L2JyF/YKuIjor6lz4PlAaRoxPRUQAqDF9lvfxVAEqhdTqxW9gkPM1C+Ge0t8D8cYrc5HF+SM23WPL5bCdE5R7M0nhEHLbDrVatAwwbPxO04JwtConYwcAvpGctfNzvmqf617j1tDwWXzX78LxiDfFkvATNzouhWayXuUNVKIdDNf1GNntxaCsrLITUYqHtG3Q86i98knY0OVIxC908Frd6OExWGxSUh80w9x+fdDA/QgXNhJJXcAWFOWKoe9w29yQf3N7uVFltCvKXbKHks/gKhbaVf94in2Lqf6u44aBr0vntExoqFE52Lmwg8KQKgdiFFA6I9WoJKYzvmgvcrm5AngSnorQwdcMeDqPfIkT9n6AMLIfinB56QwYvN5LbE9w66o5GEjAEyOonZw89WSQDlnzCw7judFiTyWK+ezGuWKeOS6iCYCFas6D1il64X0M4b7nQgAQSygU5f9F1jAgvqX0Gi5gLlAi4IOtPK+jUpJo0GJgQDwgPuDg4JACDyxlQK56Kepe4/1puEVgn2M7CdgzW2gGhFh7dNSo/Dmn0pHm3qgobt4/BTjyaJb/GCYEyFUiln6jIakBhKlq5svTFrfVtXQPjLBipzisMMRzZ9bTIrMmoTP7BUQnAfoL4wW3Ktq+ehi9eC6VaeE+vzA2sytlts5gUgDa10WlhV1zVL3iYSuUB1X527crWxEPcwNKzHFsbh2mnmq+rycklEScR6b3lIiQZdV/tObs4+tD8PeSd35ygGzFeLel3KTGITn4jKi4OmQwyL3YYRZ2sw10yJ/RDTc3vtZluwS9FtfwFOerSzwWJW9Wv+MEdvzKIUFyDmNe4JPKR1DTp9r8AO8Ig1BXR2gAcBSqrYfH1jgGXA1e9Z7IY4/s07eGxRFr/H2pJEtMAPKD+aNI9GM+s+mxRobplc4/cNOVlg98mum3IrwuDMem6RqeHvyMs1AvzPmQVQ11mb2USDB/jBuqBqu0p4ASbELtwfD+W+YK7h3TfBwMdBGHr7cAeK15Ap0o0FigQErgPuDeHIchH7CxSnDm2VT2kPVbtMs5NVd6a0yJmYP/nQGQawL5VNfmPpdTp+RFjtxxUvuiksoft2a9Me7arh90+l/mtj+WcRxU/uL8XzSypp9eUcfk6+EN07ODKx3g4CU4zKbOfmddsbLRiEkNxodQ+WYguAkrToRg0mqVThTfcUBGjmgi34FCFNkjysavfGNXRt10ZcQQGr4VOcaPvQ+J0HWM45q6k/BFV828Wswjrc11lqiR6IfNlPPwTkfDrlEbQ55/DXW6nJXqTyRtH8Bwyd7xdr6gsPKudLUfVsngMkTWOY5TY6gjzZgtXV/x/wRTHOycyQtAjJN+FtXmc0zRvJnu/lA3eaUwWZNM/ghTlR0Jg+LwVJZNKcW/GBPgWg0IrKrbtdu5m+7OS8pNfVbv+qSrXDm4sCr3wnS1a6uB+GSOmfqCHTrVjLWPUiuAsuohSAfoAA1v6kSUnYhscWKo0G4gQFngPuDl7V5yx9PlhUlKnkZj7Etu3h3pm3v0KsiKnIlj5Rakt+dsbOFQzr2au+QLtJnuIe9HGV8x77wZaJ9L5DGCA/e+g1GBdVY8Q2YA7bi1W2kdchLPJk+cbyLrAZsM8tSznxkycPwfuZPXD34PUkHBcjhnacoNh5zb3aM7eEbcJ2P8vbq5MsUoSrlG8hF53dmtyEwVSJMeBL+mr9DcBJaIlAZH9IFX2tx3y4rsxzbPftEZP7Z/EoYs+if7/1buigu4Wjxb5bHarfHvtFfd3m4/j8ejovNEagVpasfZ/JoPz+fkbPB34bv/TcyrKoisIbGOERh/xqFNfd9e5N2pwqVtJO6jYpuZsJRsb584EX3l7jMJ6ivQ6cW42U6WdaLe5Kl7Ve2dKEXYwbMGy7+X3v01FiKhclulSnQiowbhNoYL4fNMMMFh/QnBd7rczI/nEjTfl6hWQdsmDXLDGh+l5BAbhOVTqOOrrIK6b+SvGmcuDUQkdZp1TM73eZfnrfnSzYIYFqyUlpWezT8qb42o0LE33hLf0TaXXxotLAA+ReeIjHTD/t9VZ4ZINZgJQxXxblaaZiGdqejQTWBAaOA+4NlZFK+6hZnBS+OTGIrLeTfCLC4gr2k2CqZBLBtzDVqvsmRiqlf7vdRfBJ3KgI2cGs4W9aLKit7bW1zS+qh2v8Ju2g60mQkGv8qGttgfvMJL9K6RM7t9V/jrn08E7m7TIr9GmqqQ213PtL6UbX2NCSnMR8pO4bUdOSlcQzxjVovzdKirLB+L2VAGHWre2v0AMC3nsL7k0eRYRH/X7t+QK/c/tJB2fPZ2agDMiA9DYEqo3Oj1vR/NN3zSuDhUyms2GWWeMt1sgK3cGxiTFMMbBArCZuvCHufAN2BGERT+Xd3mno2FtfVGmQQdsP40PpDfZxJi2Xan6tyhoL5SZCrtHllM8vdqo8adAf2AlA3txL6OaEdnpMkxUy7TIIIHqB9P8tjGlBDJtMKcTZ5EAtoJ9ujQXOBAd+A+4Ntf1JeTmNIAfxvm9kYVdKW3W0uGZOt5WbxvbggS/VmIg677yD2d9xleGreqyzKeUL40+GDzoMzzHKO1rmnJgkGtc7Q0EircqMrU1IAfx04VVF8DA6rcrPc4I5vapIEpK9qLs4DMaoYfVoBCIS+UP8jxIJuIgZ80vU1Bc2ne+rpiN2nLl5xMKFIFdab2nLOOne7DpMU+4f0gPtkrUUFsP4CHKep4aGlECVu+5k7cJryJq5716km7BFBgn2RmaOGIjDaXNwZA+cogZQKHh59bQ74/BtTwnU1WOmKz2m6lbN7/3Ju0LzpjtiSrLCCTdXqQW9CaFrhaWHl+yWeiXew8or/7ZmQqo/K7IshYYrRqT7hc3sie7ufirypUjkuCdJKRDeI+gXmVZ4IH7JoFyyW7txR+yKR95DEfvmhA8q1IZMkIY+ICTp7xIswBG+4Lb1AceEsLPIcd6pnPx7P0PcRlPa8kqHKqdE6XFH5iCK1G6NBroECG4D7g3+sPQGepo4Pg3MjtZRGPtWApuwBLhBHHrDdi4A5+dPuUNTr8DY/C+M2WdOHgIqZFxjLNtRDer+jLh57Z/OhbK/k3qIRqZwx+YHDRLeTh+Kz02jGWA5JlhW9Rp/L2kCS+ehIdmAlJSYtJy7n3DjQH7XsBks3+VD3EGzSBatlBGugWn5TKRGNFcIdJASVReaN4SzlJ1XRgBopTA8sC90mmsRUsyNXtdr/Boyr4jD66rfkKsClvz8QvMYGEKJJGh8i/5OJHnDxt5SpI7aAMhPc2MtIenGb1+opgvbVvZYWlczFkoGDPRQ5fdu1459Bz9/GFg6hUZvaYEY0ebI1+4NEf/dl6LXL7kCtYS1G/ovwtSTP1DD8waFbD/bujGTaITFaAPxcvB+HXsDEDlMmLbuaRW9uPj1jvWpbniPgCFYFfImkFrJBduWYPuwSdezZ97yGEig/X4RL01x++Z7pJjYF7kTc/IDPpSAkjQLuLZAsvTRKM+1aoNv8/9WIjzz1Quf8ScJdfxwN/nHQfDu/rR2nTjnmS8LC0mmdmnBh4q2psCrpkSuVUWUGMjWjQZSBAleA+4OGhULVCFqWuZmtP37on06rXWFl4z9Nol/yfME3CcxWS4zPfwT9XASqyWcSEcGCDzdJpEZuZGaOH5N+bVIktN2GclGVFwbAYtRmfOKO4to7HJ42/UkcvcmYHMSUywe2DVXMSObaRrQxINvasclwPd5GgUPXhXoEuWH8mxaQP+qCQkV8lx7hi1GjIdnMkr/txrAj3JzXJ4SKyyFhFVV98M6hUE1ErkqC8OHwsZ7kEretx8ofSwFkMvfZV01fNqdO7zI2sDVptskyXOpXXSFQ3DE9y0enAH//uoCSDBybbY9g+gtCu9piz1LhlMcjXeI2n0vAOs61xWXKSXmtHsPZ67yRMfx5LNXPDQ+3UEUFDROTMY0qOJFAI5sr07bMsCHdXSaCFPDmN8dBBHu8h2MMI0s5nhvlVo/E1d8dRFsCkX14uae++2E+6QVWSswvHq9mbTqGUXeRzVW3Ll2lnqY6Tq/QaxvFS9VBTI/4CBuu/V1MrCk8R/Ax6uXSRG1Sp4UfB/3LXOC7s05PsPG+buKOcaNBeYECk4D7g317Uo/6bVbALD0Htp3O1moJU0FQ4wMWeh+COux3gB0g+L1RtPEItzqAiMWHAMpzTh2gvDN6C7tuUV32tiEz3L8rPlXM18PutnvR7+v0NEqIfwikVw62hRVbJee6Vns3PfEopeODO/oifV3N3snLqgemKFrIawcCVPKJYl5+4FtBE2z9rHG3NMndmknHc+iAMYQTuZaWHXGVxN08/4VUX5SZmFlUUDLpDgedRRKj7Gyv+81ipAk4LAxh5WsBWl4eOywQJlTuv+rATXBPmPxKfzjyluzMyHpNyMLdhEQkaWQuZl90wEy782GGW90j2Xz5hSIWYIbRdOkImGM9o52DOB6FQmaJET4QxHQfHAsuuDN+CbplFMBOmSfQPnW7yumVpbKQEaEVSjcGks4dF1l0pwVqlvT/QkE8JtlCFt4c+Ak0Ffq2P+2VTzb8FFR3wZIJTaZYBLzVlQ4CLdJeo077r3L3LhceM1PlT6iQwSzWb9UVdoe4o0FygQLPgPuDeng9PRBrvGT5tBvK59lajHhX9R4sPwNPpg0xtOuT7bwy0sVgXSS4mZHUHYRLyCSqc4NMJNI4P+bfMCAKAjVtuNy87680HNsAT4f5lw2UGlNB+NTXgdJQiNgOZZhNvGOZipQACJe3RKGfZBB4+1oOfUXmIBnI9YcUHJoj8BjAMTWhLt+HUgx69KjQbhKtWMfE5ogUI1JEf2Ub+CUJUgKv5tqihbeWXGS61p5QLki9R+ra/jX6WoxU2VHyuhVjvU7pHLlEF+NFHsAZT2S+tK415OdcyDHC3YFp3agQTq5NFX2gd2CsjJrc8VxZogxaaSK4E4P/2ELGWpwJYo+o8jUzul64CcM6hI+bCTO4P3kLSKMGDg/eL7UQBceHDEI9koBRmIfvBJO2ZBwWKupWpEmy9GxiZiZrswvB0/duXXS/1d8wuSnIkDTH7x/xGPkZmoAI7gOw+0L7+Ql3ZKczQqrSTZFl+tRiZxpK53q7WKNBc4EDC4D7g3d1PgGyonpvCu0eMvb11qzRLwZTr9OYL0KL6QyxlBVBDcZpmuZq9Retjo1lvKco1tlX+rVw0JB4LAdPfDrleEAqxmQEGqdiiQCM/TCZkUywSX4vz04m+1URE861ZtoqC5yPN0wan4Uz4GBDYD4/MmOfmT9op84m6Rs8RQdUuMb79DUD5EIEjzBxDrkE/MHRwNsqdqF+ik+9bpol/WCvts5Njp6JV9VNP/G1k2tUkjQP+szP3OVrKV5D6TAE748AlaLWjlPBfkZM6qWuXiuZg2sy/EXa4Wny6ppvgWeB6+kfYM9H2L0KMI2TiBNrsZiFijCzr6nScCP/L7xVHghrMVEEXowgiyejIQOXTzrkqkL9LMNX1HBFNELbND+QMhvZV/qxmTE8rd5kERZJYaNMJe9MqeexhKBdNlu4I1yPUN1wtrc1zVytfA/PItHJ7WJrb+LzmKzg7CI6qlgXwINrXSIDO0gqRX0HeTlhDGEko0GDgQNHgPsDWt3l3/R7l1KjRWdOxe7WNrt4aqAwjsx3njhHvCq5KAXdlTZ4kfBmLnpggpoiJ6S9K+xagXEAl0+zBwyK9b9CvJHfBvDJ6aDU1xB82CH1Jcz5kVxcybczdg9k8a8uSbtIT60FsAUBBmDRamxVBOjVgpCFYxX3Loidfk70arEgy0LceWePjiNCV+92PdCp3A1jgJHOJE5FBuGz9f5rT8lZfcWOseaund6nHDEP6xuN/Z/SJAAAqdv8CEv61wJuXazqmWrM+vhtnUMpeYRsaSIRTK2w7BEbw1L/eNc0XuYJdyJtNhDdBy0TZwdrSQmAJXfuWxKyByFCdNAyqQHPU4wToy2xbGgTOqyMB84cfD684K0jnUzzMF0VDZz5bOO40XvYZlbMGa+kB+w143tjw9ej2e3RkIiqB31vDWpVKRcygx6OUHgPYdqfIbCTYdWl3zUvNrusRSbuJAUGWir1rP+f09AFrSr6KTvAhlTO2Xgv8mGExv9QcZe495LefFtDo0GDgQODgPsDhu8p+qJSkORAKU3HO8VDKmkEKugRy99KPdF01q4D7+ZX907zdgQwkgQKYePEk4SGz5rTRmnwB9zI+8GfVpQNRkHcluXBFq5tyb7JRMK5P22Whh4TQChnb0ABjbpO9rTG8d/I0Yt/PfQ2N0y0QgtMrF/+poZ6A6pmxbcKbzbrs0OfSQDpxsmChqmtjQKzYD/Ak1JwnrM4D5PFdMWkD+GugApSYURAahzBPvlXsowbCzm0OWrZF9fN5wepQCyJyXX368WfcMeixV27IvoY/zYcsfiEXrpXgwCWPFsJZnTNjpIKDfo+68WELt89hCkVCqJz518FwQv3+WuCcoqqfeLwSm58FGp5/aeoSGq8cNF3oT9Q861N50JNl59n+iodct2qWENsTLR6laV+gJ6/BsLEB2vYpnOn0C8paTsuybHV2YCKCr95m6GSctUGvQ2cmKGAmyHTspovXtbx0KOBxL3mkzDCmI/p6xGbC/QWxL9JECPEIMcDVy8rDLetraRlo0GDgQO/gPsDGE2BYDgwJFlMaa/rTN84DzNjZpEIxYFsAvydKxZjVucmZ7tkQ2Do8J8u3fgxisbXhC7DOqD8LNyPstW81v/ksNFu+D7z2twhpAYrLsG7mv+FJXhuTkroq/hOnLL24XJkBKB6gk2+J9T41ZNoljuoTIOL9/HIkF/JEm3Ju/cl7D9tifLIyC5pt70lUhDQ+FisqzVlk2Huhif0a/HMQMMjNvSaS/86o8pOF0Ia9cAYQRPv9FNPOQrN1I/81fciOT0SehJoQ71sHrpePCWTs/UTzWf338J4ol/tYE1FzAQFo19GjulQvE7+QeiZPhQZ0AEcAcioS6A1yIWYWWKzDDhTH2z67yWC+arF1tzbaJfIhvT4yUus7ewETomWG7QxSEgiDq3dHsISD0y6HvPnx7pfQpuQhdoKC+osaXEF5VOnFqoIup6c5IyyajqOGm9G/CxqrsIdf35y/NASpajz32kzXYxmPiAfWIlLH9CzhuJ4UZ56ojOFy8iYTURdoFBJo0GDgQP7gPsDUq50gHfBcDSrVIrJzQ/P2BM9olJiKlnt2RvRkx0tNe0quB+b6/zy2Ho2Ijl92ys5qPivegxgJkB6bWjHkImXF47LBLFQaVarDzmVR2gn4Qo9g0/Y54qw6L+rXZocEpbidtnNrUwG4YRAm9plTPo2SyaMhep4fA8xlnXZU8YRFFqr2RCFiBQ++7NetZ6AJOvhFfnXrj4OR56Hg8PwFgGFP4cxnT5ANO/XemR820e5eIlVGN3oMAcWWbUAtweI/jhCqwGUTU+q2aiLaoO4pCKSE3aN+DCZ/U4BKFXB3kGbpCTMs16VZVIaqEj3NzkDPEtAuADuysF3wKpMbOK3fW5TRM+OBB1/QJuiZLpfjfrkH/Y7PlGyAeYcm12Q90cIbvvte1c9986oyxdTCUzb+q6JQeDYsXREIj0SJ8DcUE0hmXD6OE8ayL1+2hq/hYWnV4jRWdja2MrDKJXttI9tjfK1bp5WleQMcW3f1yMTkXRfMUGE+oVGARWVqTLxJLnno0GDgQQ3gPsDbr0je2EqmCPICFy98ayjDBtxt/Ghf6VtSNx2zPfD+iNCrTFXHJMbQ3PXiwrt/E7Xk9uNthi2NAM3I1XKWK8gUlYc8Wlne6Avmiom3VuKrGwsDln/JmthawB6CCeD4UjmSGJO46szkwgvyvRIYgN/0hqu1phKTygQHYZ3N/wKjTzpeKMvEktixxRMsj8RiYznCCMCLs3JgDxOaXWIqyl0i73/IiLhldiNsfdSptYpjmH9+juiAW2upfgLugHznaoKYiLWP1gBK4UKGjFG5/Jc2K0LL0hiOvtsTi/Sq6nyY64DoLV+6rvfeHRYRPGSBpUbTB8DH6ANE2RlTHGfyz9bZqvpxHutnSkQG5hwfgnNvuY4rZ/zk5Byp7Zf3Bty12nQdHY63Jho1PoFu4MDTTqo6tnQZUM819xbt2Hue5jbGMVWt7/uOO1fp9rwkSuECLnslpEUN9vjeV083x6nKYpxe4Dl6K6yGSCI9PooEzP34VLk50OgrIpESiXFFR+io0IGgQRzgPuD3KJxRzeT1tX8A9IIMwUomEeLg+pJ+xlBwZ5R3vhod8q/CYSMvAPjjjoy84tZMNm0nuo+AjrfHAxKUoyGkM71hue9OxHwai1Mif4yf2tpzy7L8OmSrkoAAXiRReSsGvGJKk+4s7jeyf3LyLSkmyseVRwt8QwMKIQTham1V7Hskt+fKQLH87S1amlxBrRGV26uDMP3EeNbj2CmW1XTotpGJGLo+5yDehRBPtwWqnfC/6CMnwwQQFpH8ErQN+blyAf+m6I/4oNc2ndwlPDiPtKmKxU7R2Zx2wz1mH4pBPoycVtRteCOH7uNxEgLaf/uSp4pVIP/rpt45/vHLFvyodBAJyZv4E8u8S2vDJwB5hBG+IPoNowADNXLoFz52DaL3kYRM+QBdspBFqd5pbz3Cq9DW0qjIHOC2ULqvEx8he29NO2+Dh1D2pejK5ntirU9Jw7h8Nj5HXWkwLL3uFzWFTMhHsXD1MbSn6GDaVy01nEutHz040Og2WiTcBEXCaMNcfzRVL9AA6zCJ9/KYKpVFGNUT8CbmjZC88jIriZTV5Wwio0/Dl/f0Ujpq7WaUNQ3eawlgGm2VbY1Sqt7bk+obq42gnBIq2/iG4Kh3A2z3b89ZjVSlZRoeuEqtcnj7fUV0fcP3DwQnIEBM/bUCLgFKUy6P6ewlmK3Ig2N+KQjG7iOKSo=";
</script>
Related
I am trying to implement a download button for Internet Explorer users that will let them download a png file being displayed on a page.
The image is provided as a Data URL and displays normally on the page.
However, when the image is downloaded on Internet Explorer using the following code, only the upper half of the image gets downloaded.
I know the problem does not come from dataURLtoBlob() because reading the blob as a Data Url returns exactly the same original data.
Can anyone help me understand what's going on here? Thanks a lot for the help.
downloadButton.onclick = function () {
if (window.navigator.msSaveOrOpenBlob) {
var filename = "image.png";
var data = $('#qrCode').attr("href");
var blob = dataURLtoBlob(data);
console.log(data);
let reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function() {
console.log(reader.result);
};
window.navigator.msSaveBlob(blob, filename);
}
}
function dataURLtoBlob(dataUrl) {
var arr = dataUrl.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var byteString = atob(arr[1]);
var arrayBuffer = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(arrayBuffer);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], { type: mime });
}
I managed to find a workaround for this issue by using an intermediate canvas.
var ieCanvas = document.getElementById("ieCanvas");
var ctx = ieCanvas.getContext("2d");
var img = document.getElementById("qrCodeImg");
ctx.drawImage(img, 0, 0);
var filename = "download.png";
window.navigator.msSaveBlob(ieCanvas.msToBlob(), filename);
To summarise:
QR Code PNG -> Blob -> msSaveBlob = Half of the image
QR Code PNG -> Canvas -> Blob -> msSaveBlob = Full image
I'm trying to pass a PDF file from the server and display it inside the browser, but the output comes out corrupted.
var blob = atob(data.Package);
console.log(blob);
var file = new Blob([blob], { type: "application/pdf" });
const fileURL = URL.createObjectURL(file);
window.open(fileURL);
Console log outputs something that appears to be correct PDF (just the beginning of output):
I'm saving a copy of the PDF on the server before transfer to make sure it is not corrupt and it works.
URL constructed with URL.createObjectURL(file) seems to be short:
blob:http://localhost:61631/ad749684-2992-4311-8b17-f382a7c687be
server side code:
Object doc = Convert.ToBase64String(_Document.DocumentStream.ToArray());
JObject response = new JObject(new JProperty("Package", JObject.FromObject(doc)));
return new AspResponse<Object>(response);
It looks like the issue is because you need to convert the PDF data into an actual byte array, then pass that into the Blob constructor. Try this:
function convertToByteArray(input) {
var sliceSize = 512;
var bytes = [];
for (var offset = 0; offset < input.length; offset += sliceSize) {
var slice = input.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
bytes.push(byteArray);
}
return bytes;
}
var blob = atob(data.Package);
console.log(blob);
var file = new Blob(convertToByteArray(blob), { type: "application/pdf" });
const fileURL = URL.createObjectURL(file);
window.open(fileURL);
This solution worked for me, basically generating the pdf as a base64 string in the backend and rendering the content in an anchor tag for downloading the pdf file.
https://kainikhil.medium.com/nodejs-how-to-generate-and-properly-serve-pdf-6835737d118e
I'm using a webservice to get a base64 string and I need to show that document to the user as a PDF.
var charactersArray = atob(base64String);
var byteNumbers = new ArrayBuffer(charactersArray.length);
for (var i = 0; i < charactersArray.length; i++) {
byteNumbers[i] = charactersArray.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
var file = new File([byteArray], "file.pdf", {
type: "application/pdf",
});
I'm then using this "file" to create a url with
var url = URL.createObjectURL(file);
I'm opening this url in a button with the ng-click directive, but I'm getting loading the PDF.
You need to write the character codes to the byteArray rather than the ArrayBuffer
var charactersArray = atob(base64String);
var len = charactersArray.length;
var byteNumbers = new ArrayBuffer(len);
var byteArray = new Uint8Array(byteNumbers);
for (var i = 0; i < len; i++) {
byteArray[i] = charactersArray.charCodeAt(i);
}
var file = new File([byteArray], "file.pdf", {
type: "application/pdf",
});
I recently work on a project like this and had the same issue. I used the base64-arraybuffer NPM library to convert a base64 string to a byte array.
It's a JS library so it needs to be imported like this after it's installed:
import * as buffer from 'base64-arraybuffer';
The object URL is created like this:
var byteArray = buffer.decode(base64String);
var file = new Blob([byteArray], {type: 'application/pdf'});
var pdfUrl = URL.createObjectURL(file);
I hope this helps!
I want to decode an bytearray to audiobuffer and play my wav file in browser using JS.
Here the code i am using but while clicking on play button i am getting an exception i.e. "Unable to decode audio Data".
{
if (!window.AudioContext){
if (!window.webkitAudioContext){
alert("Your browser does not support any AudioContext and cannot play back this audio.");
return;
}
}
var context = new AudioContext();
var arr = me.queueStore.getAt(0).data.ByteAudio;
var arrayBuffer = new ArrayBuffer(arr.length);
var bufferView = new Uint8Array(arrayBuffer);
for (i = 0; i < arr.length; i++) {
bufferView[i] = arr[i];
}
context.decodeAudioData(bufferView, function (buffer) {
var source = context.createBufferSource(); // creates a sound source
source.buffer = buffer; // tell the source which sound to play
source.connect(context.destination);
source.start(0);
});
}
Got the answer , here the solution for this : Use 64bit string to play media files instead converting to audio buffer :
me.fileString = "data:audio/wav;base64," + data.tonebyteArray;
var audio = new Audio(fileString);
audio.play();
I'm using flash to capture audio, encode it to mp3, then send it to javascript as ByteArray.
Now I want the javascript to save it as MP3 on my computer (not flash saves it to my computer). I am using Blob and then getDataURL, but the file isn't playing when saved. I used to do the same exact method to save WAV files and it worked perfectly fine.
Here's the JS code:
var getDataFromSWF = function (bytes) {
var myBlob = new Blob([bytes], { type: "audio/mpeg3" });
var url = (window.URL || window.webkitURL).createObjectURL(myBlob);
var link = window.document.createElement('a');
link.href = url;
// $("label").text(url);
link.download = 'output.mp3';
var click = document.createEvent("Event");
click.initEvent("click", true, true);
link.dispatchEvent(click);
// console.log(bytes);
}
I'm pretty much sure that the byteArray is fine because if I let the SWF save the file it works OK too. But I want to know what's wrong with the JS code. (note: i'm new to BLOB)
Try this to get the Blob
function base64toBlob(base64Data, contentType) {
var sliceSize = 1024;
var byteCharacters = atob(base64Data);
var bytesLength = byteCharacters.length;
var slicesCount = Math.ceil(bytesLength / sliceSize);
var byteArrays = new Array(slicesCount);
for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
var begin = sliceIndex * sliceSize;
var end = Math.min(begin + sliceSize, bytesLength);
var bytes = new Array(end - begin);
for (var offset = begin, i = 0 ; offset < end; ++i, ++offset) {
bytes[i] = byteCharacters[offset].charCodeAt(0);
}
byteArrays[sliceIndex] = new Uint8Array(bytes);
}
return new Blob(byteArrays, { type: contentType });
}