在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存储问题？是否有正确播放blob的HTML5代码？

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

  

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

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

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

e.g。

$ 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

Here's我刚建立的二进制文件。然而，良好的做法要求不要信任陌生人的二进制文件，自己构建它们。

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

或者，使用Storage 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