html - 在 chrome 中播放存储为 azure blob 的 mp3 时，音频标签无法正常工作

Question

当使用 Chrome 播放在 Azure 中以 blob 形式存储的 mp3 文件时，我们遇到了奇怪的行为。所有其他浏览器似乎都能正确播放轨道，但 Chrome 不允许用户跳到轨道的其他部分。

为了演示这一点，请在 Chrome 中打开以下两个网址 - 它们都是同一轨道。第一个可以让您跳到其他部分，第二个则不能。

http://scantopdf.eu/downloads/music/igygtrack.mp3

http://igygprodstore.blob.core.windows.net/igyg-site-blobs1/10b1122f-eb43-44fd-aa48-919d8b6955c1.mp3

这是 Chrome 问题还是 Azure 存储问题？是否有任何 HTML5 代码可以正确播放 blob？

Answer 1

以下是不同之处:

Azure Blob 存储端点不返回 Accept-Ranges: Bytes到您的浏览器 - 这就是您无法搜索的原因。

现在，如果您仔细查看来自 Azure 存储的响应，您会注意到一个 x-ms-version header ，其值看起来很古老:

HTTP/1.1 200 OK
Content-Length: 13686118
Content-Type: audio/mp3
...
x-ms-version: 2009-09-19

新旧存储帐户默认使用相同的 API 版本，因此它们不会破坏与现有代码的向后兼容性。

以下是存储 API 版本的版本历史记录:
https://msdn.microsoft.com/en-us/library/azure/dd894041.aspx

We highly recommend using version 2011-08-18 version and later for scenarios that require quoted ETag values or valid Accept-Ranges response headers, since browsers and other streaming clients require these for efficient download and retries.

以下是如何让 Azure 存储向您发送 Accept-Ranges: bytes

您必须传入 x-ms-version header 以及 2011 年 8 月后的 API 版本 -

$ curl -I -s http://igygprodstore.blob.core.windows.net/igyg-site-blobs1/10b1122f-eb43-44fd-aa48-919d8b6955c1.mp3

HTTP/1.1 200 OK
Content-Length: 13686118
Content-Type: audio/mp3
...

↑ 注意没有 Accept-Ranges header !

$ curl -I -s -H "x-ms-version: 2015-12-11"  http://igygprodstore.blob.core.windows.net/igyg-site-blobs1/10b1122f-eb43-44fd-aa48-919d8b6955c1.mp3

HTTP/1.1 200 OK
Content-Length: 13686118
Content-Type: audio/mp3
...
Accept-Ranges: bytes

或者您需要在容器级别设置默认 API 版本，例如 AzureBlobUtility:https://github.com/Plasma/AzureBlobUtility

C:\AzureBlobUtility\bin\Release>BlobUtility.exe -k fH00xxxxxxxxxx7w== -a baboonstorage1 -c public --setDefaultServiceVersion 2015-12-11
[2016-09-20 01:59:45] INFO  Program - Updating API Version from  to 2015-12-11
[2016-09-20 01:59:45] INFO  Program - Updated Ok

或者，使用存储 SDK 在存储帐户级别设置默认 API 版本:

// From http://geekswithblogs.net/EltonStoneman/archive/2014/10/09/configure-azure-storage-to-return-proper-response-headers-for-blob.aspx

var connectionString = "DefaultEndpointsProtocol=https;AccountName={accountName};AccountKey={accountKey}";
var storageAccount = CloudStorageAccount.Parse(connectionString);
var blobClient = storageAccount.CreateCloudBlobClient();
var props = blobClient.GetServiceProperties();
props.DefaultServiceVersion = "2015-12-11";
blobClient.SetServiceProperties(props);

使用 curl 确保您的更改生效 -

$ curl -I -s https://baboonstorage1.blob.core.windows.net/public/test.mp3

HTTP/1.1 200 OK
Content-Length: 13686118
Content-Type: audio/mpeg
...
Accept-Ranges: bytes
...
x-ms-version: 2015-12-11