i just made one front-end HTML project which take audio from user using p5.js
and p5.sound.js
.
Everything working fine with my HTML code. but when i integrated that HTML code with my DJANGO
back-end. it works fine with only same computer(localhost:8000/
). But when i try to access and run django app from different machine(like 192.168.0.43:8000
) it raise
following error in browser console.
`
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.
Please help me to fix this issue.
thanks
Issue is that 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 certificates on your domain.