Audio Tag Not Working Correctly When Playing An Mp3 Stored As Azure Blob In Chrome

We are getting a strange behavior when using Chrome to play an mp3 file stored as a blob in Azure. All other browsers seem to play the track correctly but Chrome does not allow the

Solution 1:

Here's what's different:

The Azure Blob Storage endpoint does not return Accept-Ranges: Bytes to your browser - that's why you can't seek.

Now if you look closer at the response coming from Azure Storage you'll notice a x-ms-version header with a value that looks ancient:

HTTP/1.1200OKContent-Length:13686118Content-Type:audio/mp3...x-ms-version:2009-09-19

Both old and new storage accounts default to the same API version so they don't break backwards compatibility with code out there.

Here's the version history on storage API versions: 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.

Here's how to talk Azure Storage into sending you Accept-Ranges: bytes

You either have to pass in x-ms-version header with a post-August-2011 API version (which by default returns that header),

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
...

↑ No 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: 13686118Content-Type: audio/mp3
...
Accept-Ranges: bytes

or you need to set the default API version at the container level, with something like 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

Or, use the Storage SDK to set the default API version at storage account level:

// From http://geekswithblogs.net/EltonStoneman/archive/2014/10/09/configure-azure-storage-to-return-proper-response-headers-for-blob.aspxvar 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);

Now enjoy this in any browser, with seeking! https://baboonstorage1.blob.core.windows.net/public/test.mp3

$curl-I-shttps://baboonstorage1.blob.core.windows.net/public/test.mp3HTTP/1.1200OKContent-Length:13686118Content-Type:audio/mpeg...Accept-Ranges:bytes...x-ms-version:2015-12-11