P5 panning with sliders and play video with button

p5.js Libraries
1

Hi! I’m trying to create a website with p5 that plays a video back and then also uses a slider to pan a song that is simultaneously playing. I followed example code from the p5 website, however for some reason, my button doesn’t start the video when clicked and my slider is not panning the audio. Can anyone help me figure this out?

SKETCH:

let cnv;
let video;
let videoReady = false;
let playButton;
let song;
let sliderPan;

function modelLoaded() {
  console.log("Model Loaded");
  videoReady = true;
}

function songLoaded() {
  song.play();
}

//setup code
function setup() {
  const w = 640;
  const h = 480;

  video = createVideo(['randomvid.mp4', 'randomvid.ogv', 'randomvid.webm']);
  video.parent('video');
  video.size(w, h);
  
  playButton = document.getElementById('play-button');
  playButton.addEventListener('click', playPressed);

  song = loadSound('dhol_main_loop.mp3', songLoaded);
  sliderPan = createSlider(-1, 1, 0, 0.01);
}

function draw() {
  if (!videoReady) {
    textSize(32);
    fill('#222');
    textAlign(CENTER, CENTER);
    text('loading...', 320, 240);
    return;
  }

  background(150);
  song.pan(sliderPan.value());
}


function mousePressed() {
  video.play();
}

function toggleVideo() {
  if (!video.isLooping()) {
    video.loop();
    playButton.innerText = "Stop Video";
  } else {
    video.stop();
    playButton.innerText = "Play Video";
  }
}

function playPressed() {
  toggleVideo();
}

INDEX:

<!DOCTYPE html>
<html>
  <head>
    <title>Sample Website</title>
    <script src="ml5.min.js" type="text/javascript"></script>
    <script src="p5.min.js"></script>
    <script src="p5.dom.min.js"></script>
    <script src="p5.sound.min.js"></script>
   
    <link 
      rel="stylesheet" 
      type="text/css" 
      href="style.css" />
    <link 
      rel="preconnect" 
      href="https://fonts.gstatic.com"  >
    <link 
      href="https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap" 
      rel="stylesheet"  >
    <link 
      rel="stylesheet" 
      href="style.css" />

    <meta charset="utf-8" />
  </head>

  <body>
    <header id="masthead">
      <h1>Sample Website</h1>
    </header>

    <main id="video">
    </main>

    <footer id="bottom-toolbar">
        <div id="audio-controls">
          <button id="play-button" aria-label="Play">Play Video</button>
        </div>
      </div>
    </footer>

    <script src="sketch.js"></script>
  </body>
</html>

CSS:

html,
body {
	font-family: 'Nunito Sans', sans-serif;
	color: #444444;
	background-color:#e1f3f8;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

body {
	display: flex;
	flex-direction: column;
	/* align-items: stretch; */
	height: 100%;
	width: 100%;
}

/* Masthead */
#masthead {
	text-align: center;
	background-color:#e1f3f8;
}

/* Video */
#video {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: transparent;
}

/* Bottom toolbar */
#bottom-toolbar {
	display: flex;
	align-items: center;
	height: 120px;
	background-color:#e1f3f8;
	padding: 10px;
}

#audio-controls {
	flex: 1;
	text-align: center;
}

#slider {
	width: 100%; /* Full-width */
	height: 25px; /* Specified height */
	background: #d3d3d3; /* Grey background */
	outline: none; /* Remove outline */
	opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
	position: fixed;
	left: 0px;
	top: 0px;
}

button {
	background-color:white;
	color: #444444;
	padding: 8px;
	border: 1px solid #444444;
	border-radius: 8px;
	position: relative;
	left: 40px;
}

#play-button {
	width: 150px;
}

span.redtext {
    color: red;
}

span.bluetext {
	color: blue;
}
2

Hi @karenmani ,

Welcome to the forum! :wink:

Your code is a bit difficult to test since we don’t have access to the videos, sounds and we need to setup the libraries…

Can you maybe upload it to the online editor? https://editor.p5js.org/

From what I see, you have :

  • A button with an id play-button

  • You are adding an event to the click user action :

    playButton = document.getElementById('play-button');
playButton.addEventListener('click', playPressed);

  • The playPressed() function does the following :

    function toggleVideo() {
  if (!video.isLooping()) {
    video.loop();
    playButton.innerText = "Stop Video";
  } else {
    video.stop();
    playButton.innerText = "Play Video";
  }
}

  • the video.loop() method plays the video when it’s not looping otherwise it’s stopping it

Should work right? Are you seeing your video? Can you open the web console (F12) and paste any errors in the console?

3

Hi! Thanks for the quick reply! My video was too big to upload to the p5 editor but I put it on github if you can take a look at it there and see if you can help me with the panning slider and play button!
https://github.com/karenmani/websitetester.git

In my code, I set the mousePressed function to play the video in order to make sure it would play in general but I want the Play button to start the video and the slider to pan audio on the song file I put in there

4

Thanks!

If you take a look at the console when you press your button, you have this :

Uncaught TypeError: video.isLooping is not a function
    togglePlay http://0.0.0.0:8000/sketch.js:54
    playPressed http://0.0.0.0:8000/sketch.js:64

It’s because the video variable holds a HTML5 video DOM object, not the p5 DOM video object (which is returned by the createVideo method) like in this example :

https://p5js.org/examples/dom-video.html

but it seems that the isLooping only exist for sounds :

You should use the play() and stop() methods of the p5.MediaElement :

https://p5js.org/reference/#/p5.MediaElement

5

THANK YOU! That fixed the issue!!! Do you think you could take one more look at the github and just help me with figuring out how to pan the song that automatically plays when you open my code using the slide? I updated my code so the slider sits under the canvas but I’m not sure if my code is incorrect or what. Just pushed my latest version to Github. And please let me know if you’re having problems with the p5 library because it was working a second ago and now my audio content isn’t loading!

1 Like
6

Ok, I saw the issue :

in your draw() function, you are doing :

if (!videoReady) {
  textSize(32);
  fill('#222');
  textAlign(CENTER, CENTER);
  text('loading...', 320, 240);
  return;
}

but the videoReady variable is always False (you are setting it to true in the modelLoaded() function but it’s never called)

So it’s returning and therefore not getting the slider value and panning your sound!

7

Oh I see that now! Thanks for helping me figure it out! It’s all working perfectly now :slight_smile:

1 Like