克隆音频对象答案

【问题标题】：Clone Audio object克隆音频对象
【发布时间】：2013-07-04 04:15:35
【问题描述】：

我知道如何克隆对象，但我想知道如何克隆音频对象？我应该克隆它而不是克隆一个对象吗？

“说明”我的意思：

var audio = new Audio("file.mp3");
var audio2 = $.extend({}, audio); // Clones `audio`

这是正确的做法吗？

我问这个问题的原因是我希望能够同时多次播放相同的声音。

【问题讨论】：

var audio = new Audio("file.mp3");var audio2 = new Audio("file.mp3")
@Musa 对，但那慢吗？
我不知道，做一些基准测试看看。还有var audio2 = audio.cloneNode();
@MiJyn，如果你的意思是慢到不得不再次下载文件，不。浏览器将从缓存中加载它。
@Brad，好的，谢谢！这说明了很多

标签： javascript html audio

【解决方案1】：

我遇到了与最初提出的完全相同的困境。以下对我来说效果很好：

var audio2 = audio.cloneNode();

【讨论】：

似乎浏览器每次调用时都会发出一个新请求（针对同一个文件）。

【解决方案2】：

这个问题在 javascript 年代是古老的。我认为您的代码正在（曾经）再次下载音频，这就是您延迟的原因。如果您一次抓取音频文件并将其存储在一个 blob 中，您就可以将该 blob 用作新音频事件的源。

let fileBlob;
fetch("file.mp3")
    .then(function(response) {return response.blob()})
    .then(function(blob) {
        fileBlob=URL.createObjectURL(blob);
        new Audio(fileBlob); // forces a request for the blob
 });

 ...
 new Audio(fileBlob).play()  // fetches the audio file from the blob.

您还可以使用web audio api 做很多事情，但它的学习曲线稍微陡峭。

【讨论】：

我这样做了，但每次调用“New Audio()”时它仍然在网络日志中显示一个请求，虽然它显示传输的大小为“0 B”，但它确实报告了一个每次加载时间都不同，而不是您期望的即时加载时间（如果它真的“可用”）。