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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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