无需重新下载即可克隆音频源 [英] Cloning audio source without having to download it again
问题描述
我正在使用 javascript 在浏览器中创建钢琴.为了让我同时多次播放相同的键,而不是仅仅播放音频对象,我克隆它并播放克隆,否则我必须等待音频完成或重新启动它,我不这样做'不想.
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.
我做过这样的事情:
var audioSrc = new Audio('path/');
window.onkeypress = function(event) {
var currentAudioSrc = audioSrc.cloneNode();
currentAudioSrc.play();
}
问题是,我正在检查 chrome 的检查器,发现每次克隆对象时,浏览器都会再次下载它
The problem is, I was checking chrome's inspector, and I noticed that every time I clone the object, the browser download it again
我查了一些想要实现类似事情的人,发现他们中的大多数人都遇到了和我一样的问题,他们重新下载了文件.我发现可以同时多次播放相同音频源的唯一示例是 SoundJs http://www.createjs.com/SoundJS
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?
推荐答案
使用 webAudioAPI 你可以做这样的事情:
With the webAudioAPI you could do something like that :
- 通过 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"/>
这篇关于无需重新下载即可克隆音频源的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!