p5.js 和 p5.sound.js 不适用于不同的机器

Question

我刚刚做了一个前端 HTML 项目，它使用 p5.js 和 p5.sound.js 从用户那里获取音频。
我的 HTML 代码一切正常。但是当我将 HTML 代码与我的 DJANGO 后端集成时。它仅适用于同一台计算机（localhost:8000/）。但是当我尝试从不同的机器（比如 192.168.0.43:8000）访问和运行 django 应用程序时，它会引发在浏览器控制台中出现错误。

`

there are following code in sketch.js

let mic, fft, level1, state, soundFile, recorder;
let can1;
var timer = null;

/** first setup the microphone **/
function setup() {
    state = 0;
    window.onbeforeunload = null;
    can1 = createCanvas(400, 400);
    can1.parent('canvas-area');
    noFill();
    mic = new p5.AudioIn();
    mic.start(); //start mic
    fft = new p5.FFT();
    fft.setInput(mic);
}

/** when mic on draw the circle on canvas **/
function draw() {
    background(245, 247, 250);
    let spectrum = fft.analyze();
    // strokeWeight(2);
    stroke(61, 191, 232);
    beginShape();
    if (state == 1) {
        for (i = 0; i < spectrum.length; i++) {
            vertex(i, map(spectrum[i], 0, 255, height, 0));
        }
    } else if ($('#record').text() == 'Resume') {
        textSize(32);
        text("Resume Recordering", 40, 180)
    } else {
        textSize(32);
        text("Click To Start Meeting", 40, 180)
    }
    endShape();
}



/** run following code when documnet is ready **/
$(document).ready(function(){

    /** do get request for check server response **/
    CheckServerResponse();

    /**  Start Meeting button and Resume button **/
    $('#record').click(function(){

        if (state === 0 && mic.enabled){
            getAudioContext().resume()
            recorder = new p5.SoundRecorder();
            recorder.setInput(mic);
            soundFile = new p5.SoundFile();
            recorder.record(soundFile);
            console.log("play")
            $(this).text('Pause')
            $('#stop').removeAttr('hidden');
            state=1;
            request_counter=0;
            response_counter=0;
            response_text=[];
            timer=setTimeout(sendajexrequest,60000)
        }else{
            /** Pause button send the data in server **/
            recorder.stop(); 
            AjaxRequest();
            state=0;
            console.log("pause")
            $(this).text('Resume');

            if(timer)
            {
              clearTimeout(timer); //cancel the previous timer.
              timer = null;
            }
        }
    });

    /** Stop button send the data in server **/
    $("#stop").click(function(){

      if(state==1 && $("#record").text()=='Pause'){
        recorder.stop(); 
        console.log("after Stop")
        AjaxRequest()
        $('#record').prop('disabled','false');
      }
      $(this).attr('hidden','true');
      $('#record').html('Start Meeting')
      state=0;
      if(timer)
      {
        clearTimeout(timer); //cancel the previous timer.
        timer = null;
      }
      $('#loader-audio').removeAttr('hidden');
      $('#canvas-area').hide();
      $('#record').prop('disabled','true');
    });

  });

Following file imported in index.html

    <script src="{% static 'js/p5.js' %}"></script>
    <script src="{% static 'js/p5.sound.js' %}"></script>
    <script src="{% static 'js/sketch.js' %}"></script>

Note: Please avoid (if you don't know this) {% static 'js*.js' %}. It's django jinja syntax code and it works fine.

请帮我解决这个问题。
谢谢

Answer 1

问题是您域上的 p5.sound AudioIn most likely requires a localhost or https connection (especially in Chrome and Firefox). You can solve this by running an http-proxy to forward an https address to your localhost server. Check out ngrok if you want it to be accessible remotely/online, or check out nodejs' http-proxy if you want to run it offline within local network. Once your app is online, just be sure to host it on an https server. Most web-hosts let you activate free Let's Encrypt 个证书。

p5.js 和 p5.sound.js 不适用于不同的机器

p5.js and p5.sound.js does not work with different machine

javascript

django

jquery

html5-audio

p5.js