0

I have a simple HTML5 audio player, and its src set to an mp3 URL. The url isn't a streaming one, but it returns a file with a given content-length header field.

<audio id="track" controls="controls" autoplay="autoplay">
  <source id="mp3source"  src="https://example.com/20180823001012/20180823040001/channel1.mp3" type='audio/mpeg; codecs="mp3"' >
Your browser does not support the audio element.
</audio>

I would like to place the incoming audio data into a browser blob, and then provide it to the user as a downloadable browser blob URL.

I want to achieve this to provide the downloadable file in a different filename than the default (channel1.mp3 here).

See my previous question on this problem How can I control the filename when HTML5 audio is saved by the user?

I can achieve to set the filename in Opera (with a[download] attribute of an anchor link) and in Chromium too by the "title" attribute of the HTML5 audio element.

Maybe I can do the same in Firefox too, by using a browser blob.

Konstantin
  • 2,983
  • 3
  • 33
  • 55
  • 1
    Use the [`download`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes) attribute on an `` tag: `Download` You don't even need to create a blob. – Patrick Roberts Jul 08 '19 at 00:54
  • @PatrickRoberts Yes, this approach works in Opera browser, but not in Chromium and Firefox, because of the "same origin" policy: the download link will be on a page with a different domain, than the example.com. – Konstantin Jul 08 '19 at 00:57
  • 1
    That should probably be mentioned in your question, since that's an important detail necessary to answer the question. But in that case, yes you'll need to fetch the audio using CORS headers, then the Blob URLs should work with the `download` attribute. – Patrick Roberts Jul 08 '19 at 01:11
  • And the example.com domain don't provide those CORS headers, so this can't be done. CORS proxy also not possible, because of large data size. – Konstantin Jul 08 '19 at 01:17
  • 1
    Well then it's not possible purely client-side, and for good reason as this also makes it difficult for attackers to prompt clients to download random resources across origin boundaries. – Patrick Roberts Jul 08 '19 at 01:18
  • Strange, because audio data from microphone can be recorded to a blob. There are many sample codes for that. – Konstantin Jul 08 '19 at 01:21
  • A microphone is a local device, not a remote resource from a different origin. – Patrick Roberts Jul 08 '19 at 01:25
  • 1
    Interesting... I tried to apply the logic from [this answer](https://stackoverflow.com/questions/53548182/can-i-set-the-filename-of-a-pdf-object-displayed-in-chrome/53593453#53593453) to a media file, I thought it worked until I realize browser don't hit the ServiceWorker when they do "Save As" and thus only save the 404 error page... [Here is my test code](https://plnkr.co/edit/MjjayogiUD1ePluZXWPT?p=preview) for the ones that want to play with it. – Kaiido Jul 08 '19 at 11:01
  • is using PHP an option? If possible, try to proxy the content (using `getFileContents` or even `filePassThru`) to avoid CORS issue. – VC.One Jul 09 '19 at 08:15
  • Unfortunately not, I can't use any server for that. Only client side, inside the very limited web browser... – Konstantin Jul 09 '19 at 15:08

0 Answers0