无需再次下载即可克隆音频源

Question

我正在使用 javascript 在浏览器中创建钢琴。 为了让我同时多次播放相同的键，而不是仅仅播放音频对象，我克隆它并播放克隆，否则我必须等待音频完成或重新启动它，我不这样做'不想。

我做过这样的事情：

var audioSrc = new Audio('path/');
window.onkeypress = function(event) {
    var currentAudioSrc = audioSrc.cloneNode();
    currentAudioSrc.play();
}

问题是，我正在检查 chrome 的检查器，我注意到每次克隆对象时，浏览器都会再次下载它

我查了一些想实现类似事情的人，发现他们中的大多数人都有和我一样的问题，他们重新下载了文件。 我发现可以同时多次播放相同音频源的唯一示例是 SoundJs http://www.createjs.com/SoundJS

我尝试检查源可以但无法弄清楚它是如何完成的。 任何的想法？

---

Answer 1

使用 webAudioAPI 你可以做这样的事情：

• 通过 XMLHttpRequest 下载一次文件。
• 将响应附加到缓冲区
• 创建一个新的 bufferSource 并在每次调用时播放
• 如果不支持 webAudioAPI (IE)，则回退到您的第一个实现

 window.AudioContext = window.AudioContext||window.webkitAudioContext; if(!window.AudioContext) yourFirstImplementation(); else{ var buffer, ctx = new AudioContext(), gainNode = ctx.createGain(); gainNode.connect(ctx.destination); var vol = document.querySelector('input'); vol.value = gainNode.gain.value; vol.addEventListener('change', function(){ gainNode.gain.value = this.value; }, false); function createBuffer(){ ctx.decodeAudioData(this.response, function(b) { buffer = b; }, function(e){console.warn(e)}); var button = document.querySelector('button'); button.addEventListener('click', function(){playSound(buffer)}); button.className = 'ready'; } var file = 'https://dl.dropboxusercontent.com/s/agepbh2agnduknz/camera.mp3', xhr = new XMLHttpRequest(); xhr.onload = createBuffer; xhr.open('GET', file, true); xhr.responseType = 'arraybuffer'; xhr.send(); function playSound(buf){ var source = ctx.createBufferSource(); source.buffer = buf; source.connect(gainNode); source.onended = function(){if(this.stop)this.stop(); if(this.disconnect)this.disconnect();} source.start(0); } } function yourFirstImplementation(){ alert('webAudioAPI is not supported by your browser'); }

 button{opacity: .2;} button.ready{opacity: 1};

 <button>play</button> <input type="range" max="5" step=".01" title="volume"/>

Answer 2

cloneNode有一个布尔参数：

var dupNode = node.cloneNode(deep);
/*
  node
    The node to be cloned.
  dupNode
    The new node that will be a clone of node
  deep(Optional)
     true if the children of the node should also be cloned, or false to clone only the specified node.
*/

另请注意MDN ：

Deep 是一个可选参数。 如果省略，该方法就好像 deep 的值为 true，默认使用深度克隆作为默认行为。 要创建浅克隆，必须将 deep 设置为 false。

此行为已在最新规范中更改，如果省略，该方法将表现为 deep 的值为 false。 尽管它仍然是可选的，但您应该始终为向后和向前兼容性提供深层参数

所以，尝试使用deep = false来防止下载资源：

var audioSrc = new Audio('path/');
window.onkeypress = function(event) {
    var currentAudioSrc = audioSrc.cloneNode(false);
    currentAudioSrc.play();
}

Answer 3

手动加载它并将二进制数据的Blob URL分配给src ：

<audio id="audioEl" data-src="audio.mp3"></audio>

var xhr = new XMLHttpRequest();
xhr.open('GET', audioEl.dataset.src);
xhr.responseType = 'blob';
xhr.onload = () => {
    audioEl.src = URL.createObjectURL(xhr.response);
};
xhr.send();

这样，当您克隆它时，只会克隆对内存中二进制数据的引用。