从 azure blob 存储内存流中获取波形文件答案

【问题标题】：Get wave file from azure blob storage memory stream从 azure blob 存储内存流中获取波形文件
【发布时间】：2017-09-06 12:34:14
【问题描述】：

我想从 blob 存储容器下载一个 wav 文件。我有 url 可以在我的 angular 应用程序上流式传输它，但我需要重新采样它。从 blob 存储中我得到如下所示的字节数组：

“字节”：“UklGRqS3AQBXQVZFZm10IBAAAAABAAEAoA8AAEAfAAACABAAZGF0YYC3AQDg92H4xPzwAHf+RP9HAB4ATwFjAZgBoAEtASMBMQGGAR........”

我试图从中创建一个 blob 文件，但我得到一个空的 .wav 文件

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

saveAs(blob, "file.wav");

如何获取 .wav 文件格式 (https://en.wikipedia.org/wiki/WAV#RIFF) 以便重新采样并下载？

【问题讨论】：

标签： angularjs azure-blob-storage wav

【解决方案1】：

看起来您正在使用FileSaver.js。这是我的完整示例代码，它使用 Angularjs 1.x 和 FileSaver.js 从 Azure blob 存储下载图像文件。而且效果不错，可以参考一下。

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>

【讨论】：