Member Avatar for monstercameron

this code makes a slideshow(a very long fast slide show, video), it plays audio and can adjust its frame size.
i have 4 streams(4 diferent groups of jpegs from 4-50kB @720x480), and can switch between them.
audio is nearly automatically in sync and both it and the "video loops".
using chrome task manager i can see bandwidth usage (albeit form local disk) @ 900 KBs. 30 jpegs per second (at lowest quality) 30*5=150KBS + audio (mp3 700kb @ 128kbps)? maybe its loading more than what is needed?

a few useless variables and i dont know how to use functions.

i want also to:
stop the audio
image overlay for the video (with a play button with event onhover)
interactive progress bar for audio(so the images could sync with the audio)
slow down or speed up video and audio
easy way to implement rollover images(for buttons)
proper fulscreen
independent element resizing(like browser text field)
caching and prefetching frames
have multiple audio support(like i have with my bandwidth button)

**note i dont have any html s/w been using notepad/gedit!
**note files can be found here

// JavaScript Document
var stream = 1;
var streamval = 1;
var c = 1;
var current_c = c;
var state = 0 ;
var frame = " " + "(" + c + ")" + ".jpeg"; 
var Frate = 1;
var frame_rate = 45;
var max_frame = 1265;
var screen_onclick = 0;
var resol_button = 0;
var hd = 0;
var expand = 855;
var vga_width = 640;
var expand_rate = 0;
var current_resolution = 480;
var screenW = window.innerWidth;
var screenH = window.innerHeight;
var fullscreen = 0;
var frame_button = 0;

//var screenW = screen.Width;
//var screenH = screen.Height;

/* Preloading images */
var image1 = new Image();
image1.src = "1 (1).jpeg";

/* preload audio */
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'sk8rman.mp3');
audioElement.load();


function play_aud()
	{
		if (state == 1 )
		audioElement.play();
		if (state == 2 )
		audioElement.pause();
		}
		
function new_image()
	{
		
		}

function disp_img(w)
   {
	  if (state == 1 )		
			{ 
			if (c == max_frame)
				 {
				 c = 1;
			 	}
			var img_src = streamval + " " + "(" + c + ")" + ".jpeg";
			document.ani.src = img_src;
			c++;
			if (screen_onclick = 1)
				{
					state == 2;
				}
			audioElement.play();
			}
		
			if (resol_button == 1)
				{
					document.ani.width = expand;
					document.ani.height = 480;
						if (document.ani.width = current_resolution)
							{
								if (current_resolution < expand)
									{
									current_resolution = current_resolution + expand_rate
									}
								if (current_resolution < 700 )
									{
										expand_rate = 40
									}
								if (current_resolution > 830 )
									{
									expand_rate = 2
									}
							}
			}
		
		if (resol_button == 2)
			{
				document.ani.width = vga_width;
				document.ani.height = 480;
				if (document.ani.width = expand)
						{
							if (current_resolution > vga_width)
								{
									current_resolution = current_resolution - expand_rate
									}
							if (current_resolution > 660 )
								{
									expand_rate = 40
									}
							if (current_resolution < 660 )
								{
									expand_rate = 2
									}
							}
			}
					
		if (state == 2 )
			{
				c == current_c;
				audioElement.pause();
			}
			
	  	if (state == 3 )
			{
				c = 1;
				audioElement.stop();
			}
			
	  	if (state == 4 )
			{
				if (c > 0)
					{
						c--;
					}
			}
		if (screen_onclick = 1)
			state == 1;

		if (fullscreen == 1)
			{
				document.ani.width = screenW;
 				document.ani.height = screenH;
			}
			
		if (fullscreen == 2)
			{
				document.ani.width = current_resolution;
 				document.ani.height = 480;
			}
		
		if (frame_button == 1)
			++frame_button;

		if (frame_button == 2)
			--frame_button;
		
		if (streamval > 4)
			streamval = 1;

		if  (streamval < 1)
			 streamval = 4;
		
		//document.write("<br>'frame_rate'</br>");
   }


t = setInterval("disp_img(c)", frame_rate);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" language="javascript" src="ani.jpg.js" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>animated jpeg</title>
</head>

<body>
animated jpeg </p>
<a href="frames.xml">view xml</a> | <a href="ani.jpg.js">javascript</a></p>
<a onclick="state = 1" >
<img src="1 (1).jpeg" width="current_resolution" height="480" alt="animated jpeg" name="ani" />
</a>
<audio src="sk8rman.mp3" id="audio">haha your browser doesnt support htmlaudio</audio>
</p>
<button name="resolution" type="button" onclick="resol_button = 1" >16:9</button>
<button name="resolution" type="button" onclick="resol_button = 2" >4:3</button>
<button name="goback" type="button" onclick="state = 4" >go back</button>
<button name="play" type="button" onclick="state = 1" >play</button>
<button name="pause" type="button" onclick="state = 2" >pause</button>
<button name="stop" type="button" onclick="state = 3" >stop</button>
<button name="fps   up" type="button" onclick="Frate = frame_rate++" >fps +</button>
<button name="fps down" type="button" onclick="Frate = frame_rate--" >fps -</button>
<button name="Fullscreen+" type="button" onclick="fullscreen = 1"> fullscreen+</button>
<button name="Fullscreen-" type="button" onclick="fullscreen = 2"> fullscreen-</button>
<button name="hi" type="button" onclick="stream = streamval++">low bandwidth</button>
<button name="lo" type="button" onclick="stream = streamval--">hi bandwidth</button>
</body>
</html>
Edited by monstercameron because: n/a
  • 3 Contributors
  • 5 Replies
  • 354 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by monstercameron

Dani AI

Generated

Quick practical summary for : the script mostly works but shows a few common issues that cause bad sync, wasted I/O and confusing state. The main problems are incorrect use of assignment vs comparison in conditionals, calling audio.play() inside the frame loop (restarts or taxes the decoder), relying on audio.stop() (not part of the HTMLAudio API), using string-based setInterval, and brittle DOM access/inline handlers. Fixing those gives immediate stability; higher‑level changes improve performance.

Recommended, ordered steps to make it robust and syncable:

  • Replace inline handlers and global state with a small player object and event listeners.
  • Drive image advances from the audio’s time (audio.currentTime) rather than trying to step both independently.
  • Use a cache with a sliding prefetch window (preload N frames around the current frame) and free older frames.
  • Use requestAnimationFrame or an audio-driven timeupdate handler instead of setInterval("...").
  • Stop calling play repeatedly; call audio.play() once on resume, audio.pause() to pause, and set audio.currentTime = 0 to stop.

Minimal pattern to sync frames to audio (adapt filenames to the existing set):

const fps = 30;
const cache = {};
const canvas = document.getElementById('player');
const ctx = canvas.getContext('2d');

audio.addEventListener('timeupdate', () => {
  const frame = Math.floor(audio.currentTime * fps);
  draw(frame);
});

function preload(n) {
  if (cache[n]) return;
  const img = new Image();
  img.src = `frames/frame_${String(n).padStart(4,'0')}.jpg`;
  cache[n] = img;
}

function draw(n) {
  preload(n);
  const img = cache[n];
  if (img && img.complete) ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
}

Performance notes and UI tips: do not preload thousands of frames at once—use a sliding window. For production and much lower bandwidth/cpu use, convert the sequence+audio into a single MP4/WebM (example ffmpeg command below) and use the native video element. Use the Fullscreen API for true fullscreen, an absolutely‑positioned overlay for play/hover buttons, and a progress bar that sets audio.currentTime for seeking.

ffmpeg example to produce one file:

ffmpeg -framerate 30 -i 'frame_%05d.jpg' -i audio.mp3 -c:v libx264 -crf 18 -pix_fmt yuv420p -c:a aac out.mp4

As noted, packaging frames into a proper video simplifies playback; and, as suggested, learning the JavaScript basics (event listeners, equality vs assignment, the audio API) will make further improvements easier.

Recommended Answers

All 5 Replies

Member Avatar for monstercameron

what i also want to do is have javascript parse an xml file with all the image files

Member Avatar for fobos

Did you write this or copy it. If you copied it, then you need to learn javascript and stop asking people what you want. We are here to fix problems that people have on there codes, not code that people copied and have no idea how it works. Sorry for being rude.

Member Avatar for Airshow

Did you write this or copy it. If you copied it, then you need to learn javascript and stop asking people what you want. We are here to fix problems that people have on there codes, not code that people copied and have no idea how it works. Sorry for being rude.

Yup, big corporations have paid me handsomely for developing applications like that.

(I'm not advertising, just trying to indicate the potential magnitude of the work ahead)

Airshow

Edited by Airshow because: n/a
Member Avatar for monstercameron

i got the code for the animation, then modified it for a volume of images, then i added all the other code myself. i just started college and will be doing prog langs but at teh moment i am self thought. so stop giving me crap and leave a positive/useful comment

Edited by monstercameron because: n/a
Member Avatar for monstercameron

Did you write this or copy it. If you copied it, then you need to learn javascript and stop asking people what you want. We are here to fix problems that people have on there codes, not code that people copied and have no idea how it works. Sorry for being rude.

i am not asking you to code teh program for me, it works barely. all im asking is for tips to make my code better.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.