Javascript 智能带保存：如何阻止HTML5 mp3音频文件不必要地加载，同时显示总长度持续时间？

给出了一个简单干净的HTML5音频播放器。要使时间持续有效，此代码中必须省略

preload=“none”

，这违背了使用迷你音频播放器的全部目的

我想做的是：等待并不要加载mp3文件（保存大量兆字节的数据，否则会浪费数据），除非用户点击播放！然后，也只有在mp3加载和播放时，才会显示持续时间信息。如何做到这一点

换句话说：只要没有人点击播放，就不应从服务器加载数据，持续时间仅为00:00。谢谢

/*  BAD: Loads mp3 file, even of nobody clicks play!
   GOOD: Shows duration time correctly. */
<audio src="http://labs.qnimate.com/files/mp3.mp3" type="audio/mpeg"></audio>

/*坏：加载mp3文件，即使没有人点击播放！
好：正确显示持续时间*/


为清晰起见，将不同的状态进行了总结：

•网页加载，但10兆字节的mp3尚未加载。持续时间显示为“00:00”

•如果用户单击播放，则会加载、播放mp3，并且持续时间会显示音频长度时间
为了仅检索长度，您应该预加载元数据（当然首先要确保相关文件上有元数据）。但这将只加载长度详细信息，而不加载实际文件

<audio src="http://labs.qnimate.com/files/mp3.mp3"  preload="metadata" type="audio/mpeg"></audio>

：

预载

此枚举属性旨在向浏览器提供提示
关于作者认为会带来最佳用户体验的内容。信息技术
可能具有以下值之一：无：表示音频
不应预加载元数据：表示只有音频元数据
（例如长度）已提取auto：表示整个音频文件
可以下载，即使用户不希望使用它；这个
空字符串：自动值的同义词。如果未设置，则为其默认值
是由浏览器定义的（即每个浏览器可能有自己的默认值）。
规范建议将其设置为元数据。

希望这有助于
a idea->Make div并将其放入javascript
单击
处理程序。当有人点击它时，使用
newaudio（）
加载音频文件。因此，在这之后，您可以在内存中保存对变量的赋值。查看更多详细信息：您是否尝试在onclick/play事件侦听器函数中使用
myAudio.duration
？@Sam这就是您想要的吗@Sam如果您想更新“剩余时间”的持续时间，那么这是否也符合您的需要？但不能100%确定这是否是你想要的。@NewToJS，太棒了！我可以确认你的两个jsfiddle解决了我的难题！页面加载时不会从文件中加载任何内容，除非单击“播放”，然后发送HTTP请求，加载文件并显示持续时间。现在请将您的JSFIDLE链接迁移到下面的答案（并在此处删除您的所有评论），以便我可以投票并接受您的答案@山姆很公平。。我还尝试了一个包含元数据的文件。。结果压力大了一段时间！（然后被放弃了！。但是根据文档，这应该是可行的。。你应该把它作为一个bug归档！）（更新的评论）感谢和upvote@Rachel Gallen对这个谜题的新的和原创的方法（一起避免javascript）。然而，在实践中，当我将
preload=“metadata”
添加到任何带有元数据的标准mp3时，我的FireFox v54 64位在Windows10 64位上确实加载了整个mp3文件（当然持续时间也有效），而它应该只在用户单击“播放”后加载该文件。所有不点击播放的人现在都会消耗浪费的乐团。。。（对你的评论作出回应）的确，它看起来像一个bug。但是HTML5音频仍然是我从许多人那里听到的幼稚的声音。@Sam，是的。。我们来了！同样的结果在我身边！
<audio src="http://labs.qnimate.com/files/mp3.mp3"  preload="metadata" type="audio/mpeg"></audio>