Audio does not come up in the browser after build p5js into github

Hi there…
I did a sketch in processing and worked very well. Then i finally translate to p5js and uploaded to github.
In the very end, the sound do not come up in the browsers.

Here is the Processing code (now a bit better); and the p5js;

import processing.sound.*;
SoundFile soundfile;
PImage et;
PImage capa;
PImage img; //here
PImage txt;
PGraphics pg;
boolean overButton = false;
boolean backwards=false;
int timeLapse=400;
int timeTrack;


void setup() {
  size(600, 600);
 

  soundfile = new SoundFile(this, "fabX.mp3");
  // Play the file in a loop
  soundfile.loop();
  /*
  img = createImage(100, 100,0);   // here
   for (int i = 0; i < img.pixels.length; i++) {  // here
   float a = map(i, 0, img.pixels.length, 255, 0); //here
   img.pixels[i] = color(0, 153, 204); //here
   }
   */

  pg = createGraphics(400, 400);
  txt = loadImage("TextoTecFXpng.png");
  et = loadImage("etFXpng.png");  // Load the image into the program
  et.resize(258, 458);
   //capa = loadImage("esfera1600.jpg");
}



void draw() {
  background(0);  // total canva black


  // rect flahing/blinking

  int m = millis();
  fill(m % 200);              // velocity of flashs ** not working good ** maybe my computer..
  rect(25, 25, 555, 555, 30);
  
  image(et, 130, 125 );
  image(txt, 50, 40);
//image(capa,0, 0);
  noFill();
  stroke(255);
  ellipse(mouseX, mouseY, 160, 160);


  //pg.beginDraw();
  //pg.background(0);
  // pg.fill(255,255,255, 100);
  // pg.noStroke();
  pg.ellipse(mouseX-120, mouseY-160, 160, 160);
  // pg.endDraw();

  // Draw the offscreen buffer to the screen with image()
  //image(pg, 220, 160);


  // image(img, mouseX-img.width/2, mouseY-img.height/2); // here
  //button link to web page

  if (overButton == true) {
    noStroke();
    fill(74, 245, 243, 70);
  } else {
    noStroke();
    noFill();
  }

  circle(260, 230, 30);
}
void mousePressed() {
  if (overButton) {
    link("https://www.youtube.com/playlist?list=PLLfjXK0h5ZJK01y34_ouFkU5wpFW5HyE7");
  }
}
void mouseMoved() {
  checkButtons();
}

void mouseDragged() {
  checkButtons();
}


void checkButtons() {
  if (mouseX > 200 && mouseX < 500 && mouseY > 200 && mouseY <300) {
    overButton = true;
  } else {
    overButton = false;
  }
}

here the p5js;


let  et;
let img; //here
let  txt;
let overButton = false;
let backwards=false;
var timeLapse=400;
let timeTrack;
let i;
let song;

let button;

function preload() {
  txt = loadImage('TextoTecFXpng.png');
  et = loadImage('etFXpng.png');  
  et.resize(258, 458);
  song =  loadSound("fabX.mp3");
 
}

function setup() {
 createCanvas(windowWidth, windowHeight);
  
    song.play();
   song.loop();
 

    // create the button
    myButton = createButton("hit me");// create button, give it some text


    x = width / 2 - myButton.width / 2;
    y = height / 2 - myButton.height / 2;
    // position the button
    myButton.position(270, 230, 100);

    // what is the callback for the button?
    myButton.mousePressed(link);

  //rect flash
  img = createImage(200, 200);  // here
  for (int [i] = 0; i < img.pixels.length; i++) {  
   var a = map(i, 0, img.pixels.length, 255, 0); //here
    img.pixels[i] = color(98, 204); //here
  }
    song.play();
   song.loop();
  song. setVolume(0.5)
  //images


}


function draw() {
  background(0);  // total canva black
  

  // rect flahing/blinking

  let m = millis();
  fill(m % 150);              
  rect(25, 25, 555, 555, 30);

  image(et, 130, 125 );
  image(txt, 50, 40);


  image(img, mouseX-img.width/3, mouseY-img.height/3); // here
  

  //button link to web page
   
  circle(290, 230, 30)
}
function link() {
  {
    window.open('https://www.youtube.com/playlist?list=PLLfjXK0h5ZJK01y34_ouFkU5wpFW5HyE7');
  }
}



function checkButtons() {
  if (mouseX > 200 && mouseX < 300 && mouseY > 200 && mouseY <300) {
    overButton = true;
  } else {
    overButton = false;
  }
}

and this is the github adress;
https://vrtxart.github.io/9/

https://github.com/VrtXArt/9.git

getAudioContext()

hi @GoToLoop !

i did try, not working, maybe because i dont known what suposed to wirte on is green in your code, like (FOLDER + IMG_NAME) : I have 3 or 4 of them. and (FOLDER+SONG_NAME). about the FPS should i write like 30? and the (CENTER), SUSPEND_STATE.

Thanks for your time

My example code was just for you to check how to use getAudioContext().

I’m using string constants at the top of the file so it’s easier to rename them in 1 place.

Obviously if you need to load more assets, you’re better off defining arrays for them.

1 Like

Cool, @GoToLoop , i am learnig what is assests and others like Jonson* , i am coming studing a lot…
Will do what you told me and give u a feedback…
tks once more.

this is what i got till now. I was tryng at first to do a circle cutout de first image and the back.
But i see that i need to understand somethings first. Like in the sketch code Processing Java, this below works fine. The big circle, the cursor change when hit the spot, open the 2 links in 2 pages and have a “go back” to the 1# page (my work). (ah, those 2 books are the ones i am studing).
BUT, the p5js I had to do lots of changes, normal, ok… the sound plays ok, fine. And here the button lost its place, everywhere in the prievew you click, leads you to other page (dont open of course) and for now is it… need to learn to up load a sound file, and spot the “button” where i want it. a proper spot.
I capture the the screen in video, took the video to p5js and eaven this way the sound do not comes up. I tryed .mpp4, wav, lcv… (and the p5js only accept upload videos max 5mb…)
When i download from p5js and up load to github do not work any way.
Here are the codes.

Processing:

//import stringsound;
//SoundFile soundfile;

let vid;

var link;
let mySound;

var et;
var opacity = 0;
var img; //here
var txt;
var trc;
let overButton = false;

var myboolean = (backwards = false);
let timeLapse = 400;
let timeTrack;

function setup() {
  createCanvas(600, 600);

  var audio = new Audio("fabFX.mp3");

  audio.play();
  //soundfile = new SoundFile(this, "fabFX.mp3");
  //soundfile.loop();

  //capa = loadImage("esfera1600.jpg");

  //rect move
  /*
  img = createImage(100, 100, ARGB);  // here
   for (int i = 0; i < img.pixels.length; i++) {  // here
   float a = map(i, 0, img.pixels.length, 255, 0); //here
   img.pixels[i] = color(255, 204); //here
   }
   */

  //images
  trc = loadImage("Trance3.png");
  txt = loadImage("TextoTecFXpng.png");
  et = loadImage("etFXpng.png"); // Load the image into the program
  et.resize(258, 458);

  vid = createVideo(
    ["assets/small.mp4", "assets/small.ogv", "assets/small.webm"],
    vidLoad
  );

  vid.size(100, 100);
}

// This function is called when the video loads
function vidLoad() {
  vid.loop();
  vid.volume(0);
}

function draw() {
  background(0); // total canva black

  /*
======= this i do not remember what is for so  leaving here for now=====
  // float playbackSpeed = map(mouseX, 0, width, 0.25, 4.0);
  //soundfile.rate(playbackSpeed);

  // Map mouseY from 0.2 to 1.0 for amplitude
  // float amplitude = map(mouseY, 0, width, 0.2, 1.0);
  // soundfile.amp(amplitude);

  // Map mouseY from -1.0 to 1.0 for left to right panning
  // float panning = map(mouseY, 0, height, -1.0, 1.0);
  //  soundfile.pan(panning);
========================================
*/

  // rect flahing/blinking

  let m = millis();
  fill(m % 200); // velocity of flashs ** not working good ** maybe my computer..
  rect(25, 25, 555, 555, 30);
  //image(et, 130, 125 );
  // image(txt, 50, 40);

  //rgb
  tint(20, 17, 247, 100); // Alpha to 102 without changing the tint
  image(et, 140, 125);
  tint(255, 0, 0, 80); // Tint to yellow, alpha to 153
  image(et, 120, 125);

  //opacity
  if (opacity < 255) {
    // When less than the maximum,
    opacity += 0.5; // increase opacity
  }
  tint(255, opacity);
  image(et, 130, 125);
  image(txt, 50, 40);
  image(trc, 85, 130);

  noFill();
  stroke(255);

  ellipse(mouseX, mouseY - 55, 200, 200);

  //button link to web page

  if (overButton == true) {
    var m4 = millis();
    fill(m4 % 150);
    circle(290, 250, 30);
    cursor(CROSS);
  } else {
    noStroke();
    noFill();
    cursor(HAND);
  }
}

//circle(260, 230, 30);

function mousePressed() {
  /*if (overButton) {
    link("https://libgen.is/book/index.php?md5=9EF8030F1EB1E5BA8862B5D16C48DDF8");
    link("https://libgen.is/search.php?&req=Java+The+Complete+Reference+&phrase=1&view=simple&column=def&sort=year&sortmode=DESC");

  }
  */
  window.location.replace(
    "https://libgen.is/book/index.php?md5=9EF8030F1EB1E5BA8862B5D16C48DDF8"
  );
  location.href =
    "https://libgen.is/book/index.php?md5=2913AE29A03A85BC162ADBCA2AB4E1A0";
}

function mouseMoved() {
  checkButtons();
}

function mouseDragged() {
  checkButtons();
}

function checkButtons() {
  if (mouseX > 200 && mouseX - 40 < 300 && mouseY + 35 > 200 && mouseY < 300) {
    overButton = true;
  } else {
    overButton = false;
  }
}

p5js:

//import stringsound;
//SoundFile soundfile;

let vid;

var link;
let mySound;

var et;
var opacity = 0;
var img; //here
var txt;
var trc;
let overButton = false;

var myboolean = (backwards = false);
let timeLapse = 400;
let timeTrack;

function setup() {
  createCanvas(600, 600);

  var audio = new Audio("fabFX.mp3");

  audio.play();
  //soundfile = new SoundFile(this, "fabFX.mp3");
  //soundfile.loop();

  //capa = loadImage("esfera1600.jpg");

  //rect move
  /*
  img = createImage(100, 100, ARGB);  // here
   for (int i = 0; i < img.pixels.length; i++) {  // here
   float a = map(i, 0, img.pixels.length, 255, 0); //here
   img.pixels[i] = color(255, 204); //here
   }
   */

  //images
  trc = loadImage("Trance3.png");
  txt = loadImage("TextoTecFXpng.png");
  et = loadImage("etFXpng.png"); // Load the image into the program
  et.resize(258, 458);

  vid = createVideo(
    ["assets/small.mp4", "assets/small.ogv", "assets/small.webm"],
    vidLoad
  );

  vid.size(100, 100);
}

// This function is called when the video loads
function vidLoad() {
  vid.loop();
  vid.volume(0);
}

function draw() {
  background(0); // total canva black

  /*
======= this i do not remember what is for so  leaving here for now=====
  // float playbackSpeed = map(mouseX, 0, width, 0.25, 4.0);
  //soundfile.rate(playbackSpeed);

  // Map mouseY from 0.2 to 1.0 for amplitude
  // float amplitude = map(mouseY, 0, width, 0.2, 1.0);
  // soundfile.amp(amplitude);

  // Map mouseY from -1.0 to 1.0 for left to right panning
  // float panning = map(mouseY, 0, height, -1.0, 1.0);
  //  soundfile.pan(panning);
========================================
*/

  // rect flahing/blinking

  let m = millis();
  fill(m % 200); // velocity of flashs ** not working good ** maybe my computer..
  rect(25, 25, 555, 555, 30);
  //image(et, 130, 125 );
  // image(txt, 50, 40);

  //rgb
  tint(20, 17, 247, 100); // Alpha to 102 without changing the tint
  image(et, 140, 125);
  tint(255, 0, 0, 80); // Tint to yellow, alpha to 153
  image(et, 120, 125);

  //opacity
  if (opacity < 255) {
    // When less than the maximum,
    opacity += 0.5; // increase opacity
  }
  tint(255, opacity);
  image(et, 130, 125);
  image(txt, 50, 40);
  image(trc, 85, 130);

  noFill();
  stroke(255);

  ellipse(mouseX, mouseY - 55, 200, 200);

  //button link to web page

  if (overButton == true) {
    var m4 = millis();
    fill(m4 % 150);
    circle(290, 250, 30);
    cursor(CROSS);
  } else {
    noStroke();
    noFill();
    cursor(HAND);
  }
}

//circle(260, 230, 30);

function mousePressed() {
  /*if (overButton) {
    link("https://libgen.is/book/index.php?md5=9EF8030F1EB1E5BA8862B5D16C48DDF8");
    link("https://libgen.is/search.php?&req=Java+The+Complete+Reference+&phrase=1&view=simple&column=def&sort=year&sortmode=DESC");

  }
  */
  window.location.replace(
    "https://libgen.is/book/index.php?md5=9EF8030F1EB1E5BA8862B5D16C48DDF8"
  );
  location.href =
    "https://libgen.is/book/index.php?md5=2913AE29A03A85BC162ADBCA2AB4E1A0";
}

function mouseMoved() {
  checkButtons();
}

function mouseDragged() {
  checkButtons();
}

function checkButtons() {
  if (mouseX > 200 && mouseX - 40 < 300 && mouseY + 35 > 200 && mouseY < 300) {
    overButton = true;
  } else {
    overButton = false;
  }
}

git site …(is not exactly the same as above, thats what i got till now.

https://vrtxart.github.io/et2somhtml/

https://github.com/VrtXArt

Thanks Mr.

Still need help…!