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

Question

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

我希望访问者能够使用其独特的节目名称来保存这些较旧的广播。当访问者点击给定的时间戳时，适当的或适当参数化的 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“开始”和“结束”参数用于一天中给定的第二秒，即实际程序开始和结束的时间。

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

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

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

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

由于同源策略，使用 Ajax 调用 (XMLhttprequest) 将生成的媒体文件提取到浏览器 blob 中也不起作用。 radio 的服务器当然不会为这些 Ajax 调用提供适当的 header 字段:“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。[下载] 方法似乎在 Opera 中有效(至少在我拥有的那个版本中，Opera 45。):

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

Firefox 还需要解决。