Download Web音频API下载编码音频
我正在尝试解码一个音频文件，应用一个效果，然后再次将其编码为.WAV格式，以便用户可以将该文件保存回他们的计算机 当我按下“播放”按钮时，声音会正常播放，但不会弹出下载框，供用户下载编码文件Download Web音频API下载编码音频,download,save,export,web-audio-api,Download,Save,Export,Web Audio Api,我正在尝试解码一个音频文件，应用一个效果，然后再次将其编码为.WAV格式，以便用户可以将该文件保存回他们的计算机 当我按下“播放”按钮时，声音会正常播放，但不会弹出下载框，供用户下载编码文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>offlineAudioContext example</title> <
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>offlineAudioContext example</title>
<script src="recorder.js"></script>
</head>
<body>
<button class="play">Play</button>
<script>
// define online and offline audio context
var audioCtx = new AudioContext();
var offlineCtx = new OfflineAudioContext(2,44100*10,44100);
// define variables
var myScript = document.querySelector('script');
var play = document.querySelector('.play');
var stop = document.querySelector('.stop');
// decodeAudioData to decode audio then create buffer
function getData() {
request = new XMLHttpRequest();
request.open('GET', 'kick.mp3', true);
request.responseType = 'arraybuffer';
request.onload = function() {
var audioData = request.response;
audioCtx.decodeAudioData(audioData, function(buffer) {
var source = offlineCtx.createBufferSource();
source.buffer = buffer;
source.connect(offlineCtx.destination);
source.start();
//source.loop = true;
offlineCtx.startRendering().then(function(renderedBuffer) {
console.log('Rendering completed successfully');
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var song = audioCtx.createBufferSource();
song.buffer = renderedBuffer;
song.connect(audioCtx.destination);
play.onclick = function() {
song.start(0);
sendWaveToPost(renderedBuffer);
}
function sendWaveToPost(buffer) {
var worker = new Worker('recorderWorker.js');
// initialize the new worker
worker.postMessage({
command: 'init',
config: {
sampleRate: 44100
}
});
// callback for `exportWAV`
// send the channel data from our buffer to the worker
worker.postMessage({
command: 'record',
buffer: [
buffer.getChannelData(0),
buffer.getChannelData(1)
]
});
// ask the worker for a WAV
worker.postMessage({
command: 'exportWAV',
type: 'audio/wav'
});
worker.onmessage = function(e) {
Recorder.forceDownload(e.data, 'SomeFileName.wav');
};
}
}).catch(function(err) {
console.log('Rendering failed: ' + err);
// Note: The promise should reject when startRendering is called a second time on an OfflineAudioContext
});
});
}
request.send();
}
// Run getData to start the process off
getData();
</script>
</body>
</html>
offlineAudioContext示例
玩
//定义联机和脱机音频上下文
var audioCtx=新的AudioContext（）；
var offlineCtx=新的OfflineAudioContext（244100*1044100）；
//定义变量
var myScript=document.querySelector（'script'）；
var play=document.querySelector（'.play'）；
var stop=document.querySelector（'.stop'）；
//解码音频数据以解码音频，然后创建缓冲区
函数getData（）{
请求=新的XMLHttpRequest（）；
request.open（'GET'，'kick.mp3'，true）；
request.responseType='arraybuffer'；
request.onload=函数（）{
var audioData=请求。响应；
audioCtx.decodeAudioData（音频数据，功能（缓冲区）{
var source=offlineCtx.createBufferSource（）；
source.buffer=缓冲区；
source.connect（离线ctx.destination）；
source.start（）；
//source.loop=true；
offlineCtx.startRendering（）.then（函数（renderedBuffer）{
console.log（“渲染成功完成”）；
var audioCtx=new（window.AudioContext | | window.webkitadiocontext）（）；
var song=audioCtx.createBufferSource（）；
song.buffer=renderedBuffer；
song.connect（audioCtx.destination）；
play.onclick=函数（）{
歌曲开始（0）；
sendWaveToPost（渲染缓冲区）；
}
函数sendWaveToPost（缓冲区）{
var-worker=new-worker（'recorderWorker.js'）；
//初始化新工作进程
worker.postMessage({
命令：“init”，
配置：{
取样器：44100
}
});
//“exportWAV”的回调`
//将通道数据从缓冲区发送到工作区
worker.postMessage({
命令：“记录”，
缓冲区：[
buffer.getChannelData（0），
buffer.getChannelData（1）
]
});
//向工人索要WAV
worker.postMessage({
命令：“exportWAV”，
键入：“音频/wav”
});
worker.onmessage=函数（e）{
Recorder.forceDownload（例如，data，'SomeFileName.wav'）；
};
}
}).catch（函数（err）{
console.log（'呈现失败：'+错误）；
//注意：当在OfflineAudioContext上第二次调用startRendering时，承诺应被拒绝
});
});
}
request.send（）；
}
//运行getData以启动进程
getData（）；