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

0 html audio google-chrome azure

使用 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?

evi*_*obu 6

以下是不同之处:

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
Run Code Online (Sandbox Code Playgroud)

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

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

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


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

您要么必须x-ms-version使用 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
...
Run Code Online (Sandbox Code Playgroud)

? 没有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
Run Code Online (Sandbox Code Playgroud)

或者您需要在容器级别设置默认 API 版本,例如AzureBlobUtilityhttps : //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
Run Code Online (Sandbox Code Playgroud)

或者,使用 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);
Run Code Online (Sandbox Code Playgroud)

现在在任何浏览器中享受这个,寻找! 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
Run Code Online (Sandbox Code Playgroud)