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

Question

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

为了演示这一点，请在 Chrome 中打开以下两个 url - 它们都是相同的轨道。第一个可以让你跳到其他部分，第二个不会。

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 标头，其值看起来很古老：

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

对于需要引用的 ETag 值或有效的 Accept-Ranges 响应标头的场景，我们强烈建议使用 2011-08-18 版本及更高版本，因为浏览器和其他流媒体客户端需要这些以进行高效下载和重试。

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

您要么必须传入带有 2011 年 8 月后 API 版本的 x-ms-version 标头（默认情况下返回该标头），

例如

$ 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 标头！

$ 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);

现在在任何浏览器中享受这个，寻找！ https://baboonstorage1.blob.core.windows.net/public/test.mp3

$ 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