Get wave file from azure blob storage memory stream

Question

I want to download a wav file from a blob storage container.I have the url to stream it on my angular app but I need to resample it.From the blob storage I get the byte array which looks like this:

"Bytes":"UklGRqS3AQBXQVZFZm10IBAAAAABAAEAoA8AAEAfAAACABAAZGF0YYC3AQDg92H4xPzwAHf+RP9HAB4ATwFjAZgBoAEtASMBMQGGAR........"

I tried to create a blob file from that but I get an empty .wav file

var blob = new Blob([bytes], { type: "audio/x-wav" });

saveAs(blob, "file.wav");

How can I get the .wav file format (https://en.wikipedia.org/wiki/WAV#RIFF) so that i can resample it and download it?

Aaron Chen Aaron Chen · Accepted Answer · 2017-04-12T05:55:54

Looks like you are using FileSaver.js. Here is my full sample code which downloads an image file from the Azure blob storage with Angularjs 1.x and FileSaver.js. And it worked well, you can take it as reference.

index.html

<!doctype html>
<html ng-app="project">

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://cdn.rawgit.com/eligrey/Blob.js/0cef2746414269b16834878a8abc52eb9d53e6bd/Blob.js"></script>
    <script src="https://cdn.rawgit.com/eligrey/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js"></script>
    <script>
        angular.module('project', [])

        .controller('ProjectController', function($http) {
            var project = this;
            project.yourName = "There";

            project.download = function() {
                var blobURL = "https://<my-storage-accout>.blob.core.windows.net/myimages/image.jpg";
                $http.get("blobURL", {
                    responseType: "arraybuffer"
                }).
                then(function(res) {
                    console.log("Read blob with " + res.data.byteLength + " bytes in a variable of type '" + typeof(res.data) + "'");

                    var blob = new Blob([res.data], {
                        type: "image/jpeg"
                    });
                    var filename = 'image.jpg';
                    saveAs(blob, filename);

                }, function(data, status) {
                    console.log("Request failed with status: " + status);
                });
            }
        })
    </script>
</head>

<body>
    <div ng-controller="ProjectController as pro">

        <h1>Hello {{pro.yourName}}!</h1>
        <button type="button" ng-click="pro.download()">download</button>
    </div>
</body>

</html>

Get wave file from azure blob storage memory stream

1 Answers