Ando a tentar fazer visualização de som na web. Alguém tem experiência neste assunto? Consegui fazer uma cena mas ficou muito lento a carregar musicas à volta de 5MB, com o XMLhttprequest. Em vez disso queria tentar usar elementos audio em buffering. Como é que se liga o audio ao analyser?
Web Audio Api
- Autor do tópico snoopy21
- Data Início
Estive a tentar e aínda não consigo ligar o analyser. De momento dá-me erro na função draw()
Aqui está o código:
$(document).ready(function() {
canvasCtx.lineTo(canvas.width, canvas.height/2);
canvasCtx.stroke();};
draw();
Aqui está o código:
$(document).ready(function() {
var audio = new Audio('5minutes.mp3');
var source = blip.node('audioBufferSource');
var analyser = blip.node('analyser');
var canvas = document.querySelector('canvas');
var canvasCtx = canvas.getContext('2d');
var audioCtx = blip.getContext;
var source = blip.node('audioBufferSource');
var analyser = blip.node('analyser');
var canvas = document.querySelector('canvas');
var canvasCtx = canvas.getContext('2d');
var audioCtx = blip.getContext;
source.connect(analyser);
var bufferLength = analyser.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength);
var bufferLength = analyser.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength);
function draw() {
WIDTH = 512;
HEIGTH = 256;
drawVisual = requestAnimationFrame(draw);
analyser.getByteTimeDomainData(dataArray);
canvasCtx.fillStyle = 'rgb(200, 200, 200)';
canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
canvasCtx.lineWidth = 2;
canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
canvasCtx.beginPath();
var sliceWidth = WIDTH * 1.0 / bufferLength;
var x = 0;
for(var i = 0; i < bufferLength; i++) {
HEIGTH = 256;
drawVisual = requestAnimationFrame(draw);
analyser.getByteTimeDomainData(dataArray);
canvasCtx.fillStyle = 'rgb(200, 200, 200)';
canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
canvasCtx.lineWidth = 2;
canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
canvasCtx.beginPath();
var sliceWidth = WIDTH * 1.0 / bufferLength;
var x = 0;
for(var i = 0; i < bufferLength; i++) {
var v = dataArray / 128.0;
var y = v * HEIGHT/2;
var y = v * HEIGHT/2;
if(i === 0) {
canvasCtx.moveTo(x, y);
} else {canvasCtx.lineTo(x, y);
}x += sliceWidth;
}canvasCtx.lineTo(canvas.width, canvas.height/2);
canvasCtx.stroke();
draw();
$('#play').on('click', function () {
$('#stop').on('click', function () {
});audio.play();
});$('#stop').on('click', function () {
audio.stop();
});
bymyslf
Power Member
Confesso que nunca usei a Web Audio API, mas estava precisamente a ver a documentação do AnalyserNode na MDN, e o exemplo que lá tem, a fim de tentar ajudar. O que interessa é que já conseguiste o pretendido! 
De facto a MDN, em termos de documentação e tutoriais, é muito boa.
De facto a MDN, em termos de documentação e tutoriais, é muito boa.