如何创建新的缓冲区以恢复Web Audio API中的播放?
问题描述:
的Web Audio FAQ说:如何创建新的缓冲区以恢复Web Audio API中的播放?
才能再次播放底层缓冲区,你应该创建一个新的AudioBufferSourceNode。
我真的可以用这个例子,因为我找不到任何地方。
我想在这个“else/if”的末尾加上一个命令来创建一个新的缓冲区。
这里是我的代码:
$('#container_button').click(function() {
if (musicPaused == true) {
musicPaused = false;
document.getElementById("button").className = "play-button-down";
document.getElementById("triangle").className = "triangle-class-down";
document.getElementById("lighter_triangle").className = "lighter-triangle-class-down";
document.getElementById("darker_triangle").className = "darker-triangle-class-down";
sourceBuffer.start(context.currentTime);
} else if (musicPaused == false) {
document.getElementById("button").className = "play-button-up";
document.getElementById("triangle").className = "triangle-class-up";
document.getElementById("lighter_triangle").className = "lighter-triangle-class-up";
document.getElementById("darker_triangle").className = "darker-triangle-class-up";
musicPaused = true;
sourceBuffer.disconnect(analyser);
}
});
而这里的整个页面直播:
http://www.musicrevolutiondev.com/WebAudioAPI/Prototype_v12.html
答
我能得到这个工作。我需要使用在新的缓冲区中的“decodeAudioData()”方法,使“缓冲器”可以定义为:
/* Global variables */
var context = new (window.AudioContext || window.webkitAudioContext)();
var analyser = context.createAnalyser();
var sourceBuffer = context.createBufferSource();
var musicPaused = true;
/* Initialize audio*/
var setAudio = function (buffer) {
sourceBuffer.buffer = buffer;
sourceBuffer.connect(analyser);
analyser.connect(context.destination);
};
/*Load and set audio*/
function loadAudio() {
var request = new XMLHttpRequest();
request.open('GET', 'http://www.musicrevolutiondev.com/streamapp/music/Lynne_Publishing_00124511_Sunny_Autumn.mp3', true);
request.responseType = 'arraybuffer';
request.onload = function() {
var undecodedAudio = request.response;
context.decodeAudioData(undecodedAudio, function (buffer) {
setAudio(buffer);
});
};
request.send();
};
/*Load and set audio on page load*/
window.onload = loadAudio();
/* Equalizer */
var canvas = document.querySelector('.visualizer');
var canvasCtx = canvas.getContext("2d");
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var drawVisual;
analyser.fftSize = 256;
var bufferLength = analyser.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength);
canvasCtx.clearRect(0, 0, canvasWidth, canvasHeight);
function draw() {
drawVisual = requestAnimationFrame(draw);
analyser.getByteFrequencyData(dataArray);
canvasCtx.fillStyle = 'rgb(0, 0, 0)';
canvasCtx.fillRect(0, 0, canvasWidth, canvasHeight);
var barWidth = (canvasWidth/bufferLength) * 2.5;
var barHeight;
var x = 0;
for(var i = 0; i < bufferLength; i++) {
barHeight = dataArray[i]/2;
canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
canvasCtx.fillRect(x,canvasHeight-barHeight/2,barWidth,barHeight);
x += barWidth + 1;
}
};
draw();
/* When play button is clicked */
$('#container_button').click(function() {
if (musicPaused == true) {
musicPaused = false;
document.getElementById("button").className = "play-button-down";
document.getElementById("triangle").className = "triangle-class-down";
document.getElementById("lighter_triangle").className = "lighter-triangle-class-down";
document.getElementById("darker_triangle").className = "darker-triangle-class-down";
sourceBuffer.start(context.currentTime);
} else if (musicPaused == false) {
document.getElementById("button").className = "play-button-up";
document.getElementById("triangle").className = "triangle-class-up";
document.getElementById("lighter_triangle").className = "lighter-triangle-class-up";
document.getElementById("darker_triangle").className = "darker-triangle-class-up";
musicPaused = true;
sourceBuffer.disconnect(analyser);
sourceBuffer.stop(0);
sourceBuffer = null;
sourceBuffer = context.createBufferSource();
loadAudio();
}
});
可以使用设置playbackRate 0停止1开始? – gman