用户保存 HTML5 音频时如何控制文件名？

Question

在我的博客上，可以收听广播频道，可以是现场直播，也可以是按时间表收听频道存档中的先前广播。

我希望访问者能够使用其独特的节目名称保存这些较旧的广播。当访问者单击给定的时间戳时，适当的或适当参数化的 URL 将加载到 HTML5 音频对象的源中。

有两种 URL 格式，第一种仅适用于当天：http://example.com/20190707080000/20190707090000/channel1.mp3
在这种情况下，我可以利用以下 hack：而不是最新的 URL，我将以下 URL 加载到音频播放器中：http://example.com/20190707080000/20190707090000/channel1.mp3/Title_of_the_programme.mp3

在这种情况下，访问者将能够通过给定的文件名保存收听的节目：“Title_of_the_programme.mp3”。

其他日子的其他 URL 与当天不同，因为这些节目已经存档，可能采用较低的比特率和/或格式： http: //example.com/2019/07/06/channe11。 mp4?start=28800&end=32400 “start”和“end”参数适用于一天中给定的第二秒，即实际程序开始和结束的时间。

在第二种情况下，上述黑客不再起作用，因此我无法将类似的 URL 加载到 HTML5 音频播放器中： http://example.com/2019/07/06/channel1.mp4 ?start=28800&end =32400/节目标题.mp4

不幸的是，它不起作用，当我单击 HTML5 音频播放器的“另存为”按钮时，文件名始终是“channel1.mp4”，这是次优的。

在这两种情况下，针对 GET 请求都会立即提供完整的程序。

由于浏览器的同源策略，HTML“A”元素的“download”属性、“a[download]”或 HTML5“audio”元素的相同属性也不起作用：无线电的域是当然与我的博客域不同。

由于同源策略，使用 Ajax 调用 (XMLhttprequest) 将生成的媒体文件提取到浏览器 blob 中也不起作用。无线电服务器当然不会为这些 Ajax 调用提供适当的标头字段：“Access-Control-Allow-Origin: *”。

广播节目 URL 的响应标头不包含“content-disposition”标头字段，因此文件名必须由 URL 本身确定。

Answer 1

无意中我找到了解决方案，就是简单的“title”属性：

<audio id="track" controls="controls" autoplay="autoplay" title="The_title_of_te_programme.mp4">
  <source id="mp3source"  src=" http://example.com/2019/07/06/channel1.mp4?start=28800&end=32400/Title_of_the_programme.mp4" type="audio/mpeg">
</source></audio>

也许对其他人也有用。更新：标题属性方法适用于 Chromium。[download] 方法似乎在 Opera 中有效（至少在我的 Opera 45 版本中）：

<a href="http://example.com/20190707080000/20190707090000/channel1.mp3" download="Title_of_the_programme.mp3">

Firefox 仍然需要解决。