克隆音频信号源，而无需重新下载 [英] Cloning audio source without having to download it again

问题描述

我在浏览器中使用JavaScript创建钢琴。为了让我的是同一个键多次同时播放，而不是只播放音频的对象，我克隆它，玩克隆，否则我将不得不等待音频完成或重新启动它，这我不不想。

我做了这样的事情：

  VAR audioSrc =新的音频（路径/'）;
window.onkey preSS =函数（事件）{
    变种currentAudioSrc = audioSrc.cloneNode（）;
    currentAudioSrc.play（）;
}
 

问题是，我检查铬的检验，而且我注意到，每一次我克隆对象时，浏览器重新下载

我查了一些人谁想要实现类似的东西，发现他们大多有我这样做，他们重新下载该文件同样的问题。唯一的例子，我发现可以多次播放同一音源同时是SoundJs http://www.createjs.com/ SoundJS

我试过检查来源可能，但无法弄清楚它是怎么做。任何想法？

---

解决方案

随着webAudioAPI你可以做这样的事情：

• 下载一次通过XMLHtt prequest文件。


• 追加响应缓冲


• 创建一个新的bufferSource并发挥它在每次调用


• 退回到您的首次实施，如果不支持webAudioAPI（IE）

\r

\r

window.AudioContext = window.AudioContext || window.webkitAudioContext;\r
如果（！window.AudioContext）\r
  yourFirstImplementation（）;\r
其他{\r
VAR缓冲，\r
CTX =新AudioContext（）\r
gainNode = ctx.createGain（）;\r
gainNode.connect（ctx.destination）;\r
VAR体积= document.querySelector（'输入'）;\r
vol.value = gainNode.gain.value;\r
vol.addEventListener（'变'，函数（）{\r
    gainNode.gain.value = THIS.VALUE;\r
  }，FALSE）;\r
\r
功能createBuffer（）{\r
  ctx.de codeAudioData（this.response，功能（B）{\r
    缓冲= B;\r
    }，功能（E）{console.warn（五）}）;\r
  VAR键= document.querySelector（'按钮'）;\r
  button.addEventListener（'点击'，功能（）{playSound（缓冲）}）;\r
  button.className ='准备好';\r
  }\r
\r
var文件='https://dl.dropboxusercontent.com/s/agepbh2agnduknz/camera.mp3'，\r
XHR =新XMLHtt prequest（）;\r
xhr.onload = createBuffer;\r
xhr.open（GET，文件，真正的）;\r
xhr.responseType ='arraybuffer';\r
xhr.send（）;\r
\r
功能playSound（BUF）{\r
  无功源= ctx.createBufferSource（）;\r
  source.buffer = BUF;\r
  source.connect（gainNode）;\r
  source.onended =功能（）{如果（this.stop）this.stop（）;如果（this.disconnect）this.disconnect（）;}\r
  source.start（0）;\r
  }\r
}\r
\r
功能yourFirstImplementation（）{\r
  警报（'webAudioAPI的浏览器不支持'）;\r
  }

\r

按钮{不透明：0.2;}\r
button.ready {不透明度：1};

\r

＆LT;按钮和GT;玩＆LT; /按钮＆GT;\r
＆LT;输入类型=范围最大=10步=标题=卷/＆GT01。

\r

\r

\r

I'm creating a piano in the browser using javascript. In order for me to play the same key multiple times simultaneously, instead of just playing the Audio object, I clone it and play the clone, otherwise I'd have to wait for the audio to finish or to restart it, which I don't want.

I've done something like this:

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

The problem is, I was checking chrome's inspector, and I noticed that every time I clone the object, the browser download it again

I checked some people who wanted to achieve similar things, and noticed that most of them have the same problem that I do, they redownload the file. The only example I found that can play the same audio source multiple times simultaneously is SoundJs http://www.createjs.com/SoundJS

I tried checking the source could but couldn't figure out how it was done. Any idea?

---

解决方案

With the webAudioAPI you could do something like that :

• Download once the file via XMLHttpRequest.
• Append the response to a buffer
• Create a new bufferSource and play it on each call
• Fallback to your first implementation if webAudioAPI is not supported (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"/>

这篇关于克隆音频信号源，而无需重新下载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！