p5. js и p5.sound. js не работают с другой машиной - PullRequest
Новая
       8

p5. js и p5.sound. js не работают с другой машиной

2 голосов
/ 28 февраля 2020

Я только что сделал один внешний HTML проект, который принимает аудио от пользователя, используя p5.js и p5.sound.js. Все отлично работает с моим HTML кодом. но когда я интегрировал этот код HTML с моим DJANGO сервером. он отлично работает только на одном компьютере (localhost:8000/). Но когда я пытаюсь получить доступ к приложению django и запустить его с другой машины (например, 192.168.0.43:8000), оно вызывает следующее ошибка в консоли браузера.

`enter image description here

`

в наброске есть следующий код. 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');
    });

  });

Следующий файл импортировано в index. html

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

Примечание: Пожалуйста, избегайте (если вы этого не знаете) {% static 'js*.js' %} , Это синтаксический код django jinja, и он работает нормально.

Пожалуйста, помогите мне решить эту проблему. спасибо

...