1

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";
    }
  }
}

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.