用户保存HTML5音频时，如何控制文件名? [英] How can I control the filename when HTML5 audio is saved by the user?

问题描述

在我的博客上，可以通过时间表收听广播频道的实时广播或以前的广播，可以收听广播频道.

On my blog a radio channel can be listened, either the live broadcast, or the previous broadcasts from the archive of the channel by a timetable.

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

I would like to achieve that visitors would be able to save these older broadcasts with their distinctive programme name. When visitors click on the given timestamp, the appropriate or appropriately parameterized URL is loaded into a HTML5 audio object's source.

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

There are two kinds of URL formats, the first one, only for the current day: http://example.com/20190707080000/20190707090000/channel1.mp3
In this case I can exploit the following hack: instead of the latest URL, I load the following URL into the audio player: http://example.com/20190707080000/20190707090000/channel1.mp3/Title_of_the_programme.mp3

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

In this case the visitor will be able to save the listened program by the given filename: "Title_of_the_programme.mp3".

前几天的其他URL与当天的URL不同，因为这些程序已经被归档，可能采用较低的比特率和/或格式:

The other URLs, for the other days, than the current day, are different, as those programmes were already archived, maybe in a lower bitrate and/or format: http://example.com/2019/07/06/channe11.mp4?start=28800&end=32400 "start" and "end" parameters are for the given second of the day, when the actual programme starts and ends.

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

In this second case the aforementioned hack doesn't work any more, so I can't load a similar URL into the HTML5 audio player: http://example.com/2019/07/06/channel1.mp4?start=28800&end=32400/Title_of_the_programme.mp4

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

Unfortunately it doesn't work, when I click on the save as button of the HTML5 audio player, the filename will always be "channel1.mp4", which is suboptimal.

在这两种情况下，完整的程序都可以同时处理GET请求.

In both cases the full programme is served at once for a GET request.

由于浏览器的原始政策相同，HTML的"A"元素的下载"属性，"a [download]"或HTML5的音频"元素的相同属性也不起作用:广播当然不同于我的博客域.

The "download" attribute, "a[download]" for the HTML "A" element or the same attribute for the HTML5 "audio" element also doesn't work, due to the browser's same origin policy: the domain of the radio is of course different than my blog domain.

由于具有相同的原始策略，因此无法通过Ajax调用(XMLhttprequest)将结果媒体文件提取到浏览器blob中.当然，广播服务器不会为这些Ajax调用提供适当的头字段:"Access-Control-Allow-Origin:*".

Fetching the resulting media file with an Ajax call (XMLhttprequest) into a browser blob also doesn't work, due to the same origin policy. The server of the radio of course doesn't provide the appropriate header field for these Ajax calls: "Access-Control-Allow-Origin: *".

无线电节目URL的响应标头不包含"content-disposition"标头字段，因此文件名必须由URL本身确定.

The response headers of the radio programme URLs doesn't contain a "content-disposition" header field, so the filename must be determined by the URL itself.

推荐答案

我偶然发现了解决方案，它只是"title"属性:

Accidentally I have found the solution, which is simply the "title" attribute:

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

Maybe useful for others too. Update: Title attribute method works in Chromium. And a[download] method seems to be working in Opera (at least in that version I have, Opera 45.):

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

Firefox仍需要解决.

Firefox still need to be resolved.

这篇关于用户保存HTML5音频时，如何控制文件名?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！