Tengo un programa basado en un ejemplo de MDN, que con algunos cambios, para adaptarlo a mis propósitos, intento además de usarlo como generador de señales mediante el nodo oscilador; con sus formas de onda –incluyendo luego la opción Custom o personalizada– ; captar sonido mediante el micrófono, para visualizar la señal en un canvas o lienzo y acceder al parlante, deseo incluir la posibilidad de acceder a un archivo de audio almacenado localmente, ejemplo: SD, al introducir la dirección del archivo en un input. Lo demás funciona, es en éste último caso donde me encuentro estancado, he buscado ejemplos y aún no logro que funcione. Realizo las pruebas en Chrome para android. El código es el siguiente:
let heading = document.querySelector('h1');
heading.textContent = 'CLICK ANYWHERE TO START'
document.body.addEventListener('click', init);
function init()
{
heading.textContent = 'ACTIVO!';
document.body.removeEventListener('click', init)
//Contexto de audio
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
//Tipo de entrada:
var voiceSelect = document.getElementById("entradas");
var source;
var stream;
/* Crear fuente de audio, usar archivo de audio */
var myAudio = new Audio('tono.mp3');
myAudio.type = 'audio/mp3';
//myAudio.autoplay = true; //de ser necesario
myAudio.preload = 'auto';
//myAudio.loop = true; //Sólo para si es necesario
//myAudio.addEventListener('canplaythrough', event => {alert('Cargado');});
//Crear los diferentes audio nodos
var archivoSource = audioCtx.createMediaElementSource(myAudio); // audioSourceNode [object MediaElementAudioSourceNode]
var oscillator = audioCtx.createOscillator();
var gainNode = audioCtx.createGain();
var gainNodeB = audioCtx.createGain();
var analyser = audioCtx.createAnalyser();
analyser.minDecibels = -90;
analyser.maxDecibels = -10;
analyser.smoothingTimeConstant = 0.85;
//Establecer contexto canvas para visualizar
var canvas = document.querySelector('.visualizer');
var canvasCtx = canvas.getContext("2d");
var intendedWidth = document.querySelector('.wrapper').clientWidth;
//Ancho de canvas;
canvas.setAttribute('width',intendedWidth);
//Tipo de vista on/off:
var visuAl = document.getElementById("visual");
//Bloque principal para hacer captura de audio
if (navigator.mediaDevices.getUserMedia)
{
navigator.mediaDevices.getUserMedia ({audio: true}) //Acceso al micrófono
.then(
function(stream)
{
source = audioCtx.createMediaStreamSource(stream); //Micrófono.
source.connect(gainNode);
oscillator.connect(gainNode);
gainNode.connect(analyser); //Visualizar micrófono principalmente o el oscilador.
archivoSource.connect(gainNodeB);
gainNodeB.connect(audioCtx.destination); //Para oscilador y opcionalmente micrófono.
visualize();
voiceChange();
})
.catch( function(err) { alert('The gUM error: ' + err);})
} //if
//Dibujo visual:
var drawVisual;
function visualize()
{
var visualSetting = visuAl.value;
if(visualSetting == "on")
{
analyser.fftSize = 2048;
var bufferLength = analyser.fftSize;
var dataArray = new Uint8Array(bufferLength);
canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
var draw = function()
{
drawVisual = requestAnimationFrame(draw);
analyser.getByteTimeDomainData(dataArray);
canvasCtx.fillStyle = 'rgb(200, 200, 200)'; //fondo
canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
canvasCtx.lineWidth = 2; //grueso de línea
canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; //color de línea
canvasCtx.beginPath();
var sliceWidth = canvas.width* 1.0 / bufferLength;
var x = 0;
for (var i = 0; i < bufferLength; i++)
{
var v = dataArray[i] / 128.0;
var y = v * canvas.height/2;
if(i === 0)
{
canvasCtx.moveTo(x, y);
} else {canvasCtx.lineTo(x, y);}
x += sliceWidth;
} //for
canvasCtx.lineTo(canvas.width, canvas.height/2);
canvasCtx.stroke();
}; //draw
draw();
} //if ... === "on"
else if(visualSetting == "off")
{
canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
canvasCtx.fillStyle = "black";
canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
} //else
}
//Cambio de tipo de entrada
function voiceChange()
{
var voiceSetting = voiceSelect.value;
if(voiceSetting == "osciladorVer") //Oscilador (Ver)
{alert('osc ver');
oscillator.type = 'triangle';
oscillator.frequency.setValueAtTime(12, audioCtx.currentTime); //Hz
oscillator.disconnect(0);
source.disconnect(0);
analyser.disconnect(0);
oscillator.connect(gainNode);
gainNode.connect(analyser);
oscillator.start();
}
if(voiceSetting == "oscEscuchar") //Oscilador (Escuchar)
{alert('osc Esc');
oscillator.type = 'triangle';
//Frecuencia en 12Hz para ver mejor la forma de onda
oscillator.frequency.setValueAtTime(12, audioCtx.currentTime); //Hz
oscillator.disconnect(0);
source.disconnect(0);
analyser.disconnect(0);
oscillator.connect(gainNodeB);
oscillator.start();
}
if(voiceSetting == "osciladorVE") //Oscilador (ver y escuchar)
{alert('osc VE');
oscillator.type = 'triangle';
oscillator.frequency.setValueAtTime(12, audioCtx.currentTime);
oscillator.disconnect(0);
source.disconnect(0);
analyser.disconnect(0);
oscillator.connect(gainNode);
gainNode.connect(analyser);
analyser.connect(gainNodeB);
oscillator.start();
}
if(voiceSetting == "mic") //Micrófono (ver)
{alert('mic');
oscillator.disconnect(0);
analyser.disconnect(0);
source.connect(gainNode);
gainNode.connect(analyser);
}
if(voiceSetting == "archivo") //Archivo (ver y escuchar)
{
oscillator.disconnect(0);
analyser.disconnect(0);
source.disconnect(0);
archivoSource.disconnect(0);
archivoSource.connect(gainNode);
gainNode.connect(analyser);
analyser.connect(gainNodeB);
myAudio.play();
}
if(voiceSetting == "off")
{
oscillator.disconnect(0);
source.disconnect(0);
}
} //vchange
// grab the mute button to use below
var mute = document.querySelector('.mute');
// event listeners to change visualize and voice settings
visuAl.onchange = function() {
window.cancelAnimationFrame(drawVisual);
visualize();
};
voiceSelect.onchange = function() {
voiceChange();
};
mute.onclick = voiceMute;
function voiceMute() {
if(mute.id === "") {
gainNode.gain.value = 0;
mute.id = "activated";
mute.innerHTML = "Unmute";
} else {
gainNode.gain.value = 1;
mute.id = "";
mute.innerHTML = "Mute";
}
}
}