JavaScript - Help With Function To Play Audio

Hi everyone,

I'm an animator just beginning to learn the unity game engine. In other words, I know almost no JavaScript and would like to learn the basics in parallel with working on my project. I would ultimately like to create a scene in which I can use the spectrum of a sound track to drive certain properties of objects in the scene. I started off by following this spectrumAnalyser tutorial which I then expanded for 21 cubes. This was working pretty well, but the higher frequencies looked like they needed much more of the spectrum than the lower. I asked a coder colleague (more proficient in c# than js) for his help in expanding the code to analyse the full spectrum. He showed me a really nice way to assign various parts of the spectrum to each cube in the scene using a fibonacci sequence to gradualy assign more and more of the spectrum to the cubes that were to be driven by those frequencies. So as you can see I commented out some chunks of now redundant code (its a bit of an unfinished mess but I've left them in so you can kind of see what i was trying to do). However this new technique now doesn't actually drive the cubes anymore and my friend doesn't understand why. Maybe somthing to do with the AudioListener.GetSpectrumData? I was wondering if any of you guys could point me in the right direction. This is what we have now:

-----------------------------

#pragma strict

function Start () {

}

function Update () {
//var Audio : AudioListener;
//var spectrum : float [] = Audio.GetOutputData;
//AudioListener.GetSpectrumData(1024,0,FFTWindow.Hamming);
var spectrum : float[] = AudioListener.GetSpectrumData(1024,0,FFTWindow.Hamming);

var cubeList : float [];

cubeList[0] = spectrum[1];
cubeList[1] = spectrum[2];
cubeList[2] = spectrum[3];

var index : int = 3;
var fibonacci : int = 1;
var fibonacciIncrease : int = 1;
for(var i : int = 3; i < 21;++i)
{
cubeList[i] = 0;
var maxIndex : int = index + fibonacci;
while (index < maxIndex)
{
cubeList[i] = cubeList[i] + spectrum[index];
++index;
}
fibonacci = fibonacci + fibonacciIncrease;
fibonacciIncrease++;
}

/*
var c6 : float = spectrum[7] + spectrum[8] + spectrum[9] + spectrum[10];
var c7 : float = spectrum[11] + spectrum[12] + spectrum[13] + spectrum[14] + spectrum[15] + spectrum[16] + spectrum[17];
var c8 : float = spectrum[18] + spectrum[19] + spectrum[20] + spectrum[21] + spectrum[22] + spectrum[23] + spectrum[24] + spectrum[25] + spectrum[26] + spectrum[27] + spectrum[28];
var c9 : float = spectrum[29] + spectrum[30] + spectrum[31] + spectrum[32] + spectrum[33] + spectrum[34] + spectrum[35] + spectrum[36] + spectrum[37] + spectrum[38] + spectrum[39] + spectrum[40] + spectrum[41] + spectrum[42] + spectrum[43] + spectrum[44];
var c10 : float = spectrum[66] + spectrum[67] + spectrum[68] + spectrum[69] + spectrum[70] + spectrum[71] + spectrum[72] + spectrum[73] + spectrum[74] + spectrum[75] + spectrum[76] + spectrum[77] + spectrum[78] + spectrum[79] + spectrum[80] + spectrum[81] + spectrum[82] + spectrum[83] + spectrum[84] + spectrum[85] + spectrum[86] + spectrum[87];
var c11 : float = spectrum[18] + spectrum[19];
var c12 : float = spectrum[20] + spectrum[21] + spectrum[22];
var c13 : float = spectrum[23] + spectrum[24] + spectrum[25];
var c14 : float = spectrum[26] + spectrum[27] + spectrum[28];
var c15 : float = spectrum[29] + spectrum[30] + spectrum[31];
var c16 : float = spectrum[32] + spectrum[33] + spectrum[34];
var c17 : float = spectrum[35] + spectrum[36] + spectrum[37] + spectrum[38] + spectrum[39] + spectrum[40];
var c18 : float = spectrum[35] + spectrum[36] + spectrum[37] + spectrum[38] + spectrum[39] + spectrum[40];
var c19 : float = spectrum[35] + spectrum[36] + spectrum[37] + spectrum[38] + spectrum[39] + spectrum[40];
var c20 : float = spectrum[35] + spectrum[36] + spectrum[37] + spectrum[38] + spectrum[39] + spectrum[40];
var c21 : float = spectrum[1000] + spectrum[1001] + spectrum[1002] + spectrum[1003] + spectrum[1004] + spectrum[1005] + spectrum[1006] + spectrum[1007] + spectrum[1008] + spectrum[1009] + spectrum[1010] + spectrum[1011];*/

var cubes : GameObject[] = GameObject.FindGameObjectsWithTag("CubeTag");

for(var k = 0; k < cubes.length; k++) {
switch (cubes[k].name) {
case 'c1': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c2': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c3': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c4': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c5': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c6': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c7': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c8': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c9': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c10': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c11': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c12': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c13': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c14': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c15': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c16': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c17': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c18': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c19': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c20': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c21': cubes[k].transform.localScale.y = cubeList[k]*10; break;

}
}
}


------------------------------


Many thanks for any help you can give, i'm off to learn some basics!

Hey guys, i havent got any code and im not asking for any! just wondering if anyone knows some good tutorials on vectors and how i can use them to store audio files! thanks in advance!

Hi, I worked on this website : http://www.kesslercareers.com/index.html and cannot find out why it does not work in IE while it works in other browsers. The small video does not play while the sound does. As far as I can see it works fine in FF and Chrome. Anybody any idea?

Thanks

Purmar

Hello, I found the javascript for triggering audio on mouseOver (on the page link below) very helpful. Question is - how to stop the audio on mouseout?

http://www.javascriptkit.com/script/....shtml#current

So I have been converting videos to mp4 and it is working fine (I can download the file and play it in wmp without a hitch) but when I try to use the html5 video tag by itself or with video js (videojs.com) enabled, the video only plays audio. It doesn't play any video.

What could I possibly be doing wrong?

Video: http://www.xonicgames.com/user/uploads/videos/6360.mp4
JS: http://xonicgames.com/video/?i=6

Thanks

Hi there,

I am just writing to see if I can receive some help regarding an issue I'm having?

I have written this application: http://bit.ly/dOHwhp - It allows the user to make melodies and change the speed of playback. It uses HTML5 and JavaScript. What I'd really like to do is have the ability for the user to save the melody in some respect. At the moment, I am using a parse harsh method. I thought potentially the user could save the #... and then load it from the URL. I have a method of loading it from the URL but no current way of 'saving' it and loading the saved version, as such.

I have a feeling it would be far more advanced but, I would love to have a download feature like they have on this site: http://patternsketch.com/

Could anyone help out? This is my JavaScript file as it stands (although all files can be discovered in the source code of the page)

Code:

// ===== VARIABLES =====
var isPlaying = false;
var curNote = 0;
var curTempo = 100;

// ===== FUNCTIONS =====
// playTune: Play the next note!
function playTune() {
	if (isPlaying !== false) {
		var nextNote = 60000 / curTempo / 4;
		// Turn off all lights on the tracker's row
		$("#tracker li.track").removeClass("active");
		// Light up the tracker on the current track
		$("#tracker li.track.col_" + curNote).addClass("active");
		// Find each active note, play it
		var tmpAudio;
		$(".playBar[id^=control] li.track.active.col_" + curNote).each(function(i){
			tmpAudio = document.getElementById($(this).data('sound_id'));
			if (!tmpAudio.paused) {
				// Pause and reset it
				tmpAudio.pause();
				tmpAudio.currentTime = 0.0;
			}
			tmpAudio.play();
		});
		// Move the track forward
		curNote = (curNote + 1) % 16;
	} // if (isPlaying)
} // playTune

// Make a new hash
function buildHash() {
	// Start it
	var newhash = '';
	// For each track, check and add in a 0/1 as appropriate
	$(".playBar[id^=control] li.track").each(function(i){
		newhash += $(this).is('.active') ? '1' : '0';
	});
	// Separate it
	newhash += '|';
	// Now, toss in the note
	newhash += $('#temposlider').slider('value');
	// Check and see if we really need to update
	if (location.hash != '#' + newhash) location.hash = newhash;
} // buildHash

// Read in our hash
function parseHash() {
	if (location.hash.length > 0) {
		// Split it up, work it out, removing the actual hashmark
		var pieces = location.hash.substring(1).split('|');
		// Set the lights
		var lights = pieces[0];
		$(".playBar[id^=control] li.track").each(function(i){
			// Make sure we haven't exceeded
			if (i >= lights.length) return false;
			// Check our location, turn on class if need be
			if (lights.charAt(i) == '1') {
				$(this).addClass('active');
			}
		});
		// Set the tempo
		if (typeof pieces[1] !== 'undefined') {
			$('#temposlider').slider('value', parseInt(pieces[1]));
			$('#tempovalue').innerHTML = pieces[1];
			curTempo = parseInt(pieces[1]);
		}
	}
} // parseHash

// Clear it!
function clearAll() {
	$(".playBar[id^=control] li.active").removeClass('active');
}

// Run on DOM ready
$(document).ready(function(){
	// Process each of the audio items, creating a playlist sort of setup
	$("audio").each(function(i){
		// Make a self reference for ease of use in click events
		var self = this;

		// Make a sub-list for our control
		var $ul = $('<ul id="control_' + this.id + '" class="playBar">');
		$ul.append('<li class="header">' + this.title + '</li>');
		// Add 16 list items!
		for (j = 0; j < 16; j++) {
			var $li =
				$('<li class="track col_'+j+'">'+self.id+'</li>')
				.click(function(){
					$(this).toggleClass('active');
					buildHash();
				})
				.data('sound_id', self.id);
			$ul.append($li);
		} // for (i = 0; i < 16; i++)
		// Append it up
		$('<li>').append($ul).appendTo('#lights');
	});

	// Bind up a click for our button
	$("#soundstart").click(function(){
		if (isPlaying === false) {
			// Start the playing!
			curNote = 0;
			isPlaying = setInterval(playTune, 60000 / curTempo / 4);
			// Change our display
			this.innerHTML = "Stop";
		} else {
			clearInterval(isPlaying);
			isPlaying = false;
			$("#tracker li.track").removeClass("active");
			$("audio").each(function(){
				this.pause();
				this.currentTime = 0.0;
			});
			this.innerHTML = "Play";
		}
	});

	$('#clearall').click(clearAll);
	$('#reload').click(parseHash);

	// ===== Misc =====
	// Build or read the hash
	if (location.hash == '') {
		// I was building this at load - but now, no, just to be safe
		//buildHash();
	} else {
		parseHash();
	}

	// Show our value, now that we've built off of the hash
	$('#tempovalue').html(curTempo);
	// Make our tempo slider
	$('#temposlider').slider({
		'value': curTempo,
		'min': 30,
		'max': 170,
		'step': 2,
		'slide': function(e, ui) {
			curTempo = ui.value;
			$('#tempovalue').html(curTempo);
			if (isPlaying !== false) {
				clearInterval(isPlaying);
				isPlaying = setInterval(playTune, 60000 / curTempo / 4);
			}
		},
		'stop': function(e, ui) {
			buildHash();
		}
	});
});

How could I make it so that instead of seeing a embed object you would just see a input button that says play. I do not need my users to be able to pause them. I really didn't know where to start with the javascript but i do have the html5

Code:

<audio controls="controls">
  <source src="BlackHawkDown-MusicVideo-Frontline.wav" type="audio/wav" />
  <source src="BlackHawkDown-MusicVideo-Frontline.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>

THANKS!!!!

1. I previously made some pages in which had audio controls which worked when I actually ran them. However I have now moved these pages to another folder location but now they do not work, when I run the page the buttons appear as if they have already been clicked and appear "stuck", i've tried to manually change the URL location of the audio file my self and the button becomes "unstuck and I can press it but still I hear no audio. I would like to know if possible what is going on

The controller settings with url before I changed it-
<embed src="../Sounds/home_page_readout.wma" width="405" hidden="false" height="39" autoplay="false" controller="true"></embed>

2. Secondly I would like to know how to get different media formats to work on different browsers.

I can't seem to play MP3s with jPlayer, only OGG.
Any ideas? My custom code is below:

Code:

<script type="text/javascript">
//<![CDATA[
var audioPlaylist;
var Playlist;
jQuery(document).ready(function(){

    Playlist = function(instance, playlist, options) {
        var self = this;

        this.instance = instance; // String: To associate specific HTML with this playlist
        this.playlist = playlist; // Array of Objects: The playlist
        this.options = options; // Object: The jPlayer constructor options for this playlist

        this.current = 0;

        this.cssId = {
            jPlayer: "jquery_jplayer_",
            interface: "jp_interface_",
            playlist: "jp_playlist_"
        };
        this.cssSelector = {};

        jQuery.each(this.cssId, function(entity, id) {
            self.cssSelector[entity] = "#" + id + self.instance;
        });

        if(!this.options.cssSelectorAncestor) {
            this.options.cssSelectorAncestor = this.cssSelector.interface;
        }

        jQuery(this.cssSelector.jPlayer).jPlayer(this.options);

        jQuery(this.cssSelector.interface + " .jp-previous").click(function() {
            self.playlistPrev();
            jQuery(this).blur();
            return false;
        });

        jQuery(this.cssSelector.interface + " .jp-next").click(function() {
            self.playlistNext();
            jQuery(this).blur();
            return false;
        });
    };

    Playlist.prototype = {
        displayPlaylist: function() {
            var self = this;
            jQuery(this.cssSelector.playlist + " ul").empty();
            for (i=0; i < this.playlist.length; i++) {
                var listItem = (i === this.playlist.length-1) ? "<li class='jp-playlist-last'>" : "<li>";
                listItem += "<a href='#' id='" + this.cssId.playlist + this.instance + "_item_" + i +"' tabindex='1'>"+ this.playlist[i].name +"</a>";

                // Create links to free media
                if(this.playlist[i].free) {
                    var first = true;
                    listItem += "<div class='jp-free-media'>(";
                    jQuery.each(this.playlist[i], function(property,value) {
                        if(jQuery.jPlayer.prototype.format[property]) { // Check property is a media format.
                            if(first) {
                                first = false;
                            } else {
                                listItem += " | ";
                            }
                            listItem += "<a id='" + self.cssId.playlist + self.instance + "_item_" + i + "_" + property + "' href='" + value + "' tabindex='1'>" + property + "</a>";
                        }
                    });
                    listItem += ")</span>";
                }

                listItem += "</li>";

                // Associate playlist items with their media
                jQuery(this.cssSelector.playlist + " ul").append(listItem);
                jQuery(this.cssSelector.playlist + "_item_" + i).data("index", i).click(function() {
                    var index = jQuery(this).data("index");
                    if(self.current !== index) {
                        self.playlistChange(index);
                    } else {
                        jQuery(self.cssSelector.jPlayer).jPlayer("play");
                    }
                    $(this).blur();
                    return false;
                });

                // Disable free media links to force access via right click
                if(this.playlist[i].free) {
                    jQuery.each(this.playlist[i], function(property,value) {
                        if(jQuery.jPlayer.prototype.format[property]) { // Check property is a media format.
                            jQuery(self.cssSelector.playlist + "_item_" + i + "_" + property).data("index", i).click(function() {
                                var index = $(this).data("index");
                                jQuery(self.cssSelector.playlist + "_item_" + index).click();
                                jQuery(this).blur();
                                return false;
                            });
                        }
                    });
                }
            }
        },
        playlistInit: function(autoplay) {
            if(autoplay) {
                this.playlistChange(this.current);
            } else {
                this.playlistConfig(this.current);
            }
        },
        playlistConfig: function(index) {
            jQuery(this.cssSelector.playlist + "_item_" + this.current).removeClass("jp-playlist-current").parent().removeClass("jp-playlist-current");
            jQuery(this.cssSelector.playlist + "_item_" + index).addClass("jp-playlist-current").parent().addClass("jp-playlist-current");
            this.current = index;
            jQuery(this.cssSelector.jPlayer).jPlayer("setMedia", this.playlist[this.current]);
        },
        playlistChange: function(index) {
            this.playlistConfig(index);
            jQuery(this.cssSelector.jPlayer).jPlayer("play");
        },
        playlistNext: function() {
            var index = (this.current + 1 < this.playlist.length) ? this.current + 1 : 0;
            this.playlistChange(index);
        },
        playlistPrev: function() {
            var index = (this.current - 1 >= 0) ? this.current - 1 : this.playlist.length - 1;
            this.playlistChange(index);
        },
        supplied: "mp3",
        addMedia: function(media){
            this.playlist.push(media);
            this.playlistNext();
        }
    };

});

var last_el='';
jQuery('.track .wrap .play').click(function(){
    var cur_img = jQuery(this).css('backgroundImage');
    if(cur_img.substring(cur_img.length-10)=='play.png")'){
        if(last_el!=''){
            last_el.css('background-image','url("img/play.png")');
        }
        var el = jQuery(this);
        last_el = el;
        parent.frames[1].addSong(el.attr("title"),el.attr("mp3"),el.attr("ogg"));
        el.css('background-image','url("img/pause.png")');
    }else{
        parent.frames[1].pauseSong();
    }
});
jQuery('.jp-interface .jp-pause').click(function(){
    last_el.css('background-image','url("img/play.png")');
});
jQuery('body a').click(function(){
    var el = jQuery(this);
    var href = el.attr('href');
    if(href.substring(0,1)=='/'){
        parent.location.href = parent.location.href + href.substring(1,href.length);
    }    
});

//]]>
</script>

I have about 40 images on an educational website. When the user clicks each image, a different one second long mp3 should play without opening a new window. Is it possible to do this with javascript?

Thanks in advance.

I can't seem to play MP3s with jPlayer, only OGG.
Any ideas? My custom code is below:

Code:

<script type="text/javascript">
//<![CDATA[
var audioPlaylist;
var Playlist;
jQuery(document).ready(function(){

    Playlist = function(instance, playlist, options) {
        var self = this;

        this.instance = instance; // String: To associate specific HTML with this playlist
        this.playlist = playlist; // Array of Objects: The playlist
        this.options = options; // Object: The jPlayer constructor options for this playlist

        this.current = 0;

        this.cssId = {
            jPlayer: "jquery_jplayer_",
            interface: "jp_interface_",
            playlist: "jp_playlist_"
        };
        this.cssSelector = {};

        jQuery.each(this.cssId, function(entity, id) {
            self.cssSelector[entity] = "#" + id + self.instance;
        });

        if(!this.options.cssSelectorAncestor) {
            this.options.cssSelectorAncestor = this.cssSelector.interface;
        }

        jQuery(this.cssSelector.jPlayer).jPlayer(this.options);

        jQuery(this.cssSelector.interface + " .jp-previous").click(function() {
            self.playlistPrev();
            jQuery(this).blur();
            return false;
        });

        jQuery(this.cssSelector.interface + " .jp-next").click(function() {
            self.playlistNext();
            jQuery(this).blur();
            return false;
        });
    };

    Playlist.prototype = {
        displayPlaylist: function() {
            var self = this;
            jQuery(this.cssSelector.playlist + " ul").empty();
            for (i=0; i < this.playlist.length; i++) {
                var listItem = (i === this.playlist.length-1) ? "<li class='jp-playlist-last'>" : "<li>";
                listItem += "<a href='#' id='" + this.cssId.playlist + this.instance + "_item_" + i +"' tabindex='1'>"+ this.playlist[i].name +"</a>";

                // Create links to free media
                if(this.playlist[i].free) {
                    var first = true;
                    listItem += "<div class='jp-free-media'>(";
                    jQuery.each(this.playlist[i], function(property,value) {
                        if(jQuery.jPlayer.prototype.format[property]) { // Check property is a media format.
                            if(first) {
                                first = false;
                            } else {
                                listItem += " | ";
                            }
                            listItem += "<a id='" + self.cssId.playlist + self.instance + "_item_" + i + "_" + property + "' href='" + value + "' tabindex='1'>" + property + "</a>";
                        }
                    });
                    listItem += ")</span>";
                }

                listItem += "</li>";

                // Associate playlist items with their media
                jQuery(this.cssSelector.playlist + " ul").append(listItem);
                jQuery(this.cssSelector.playlist + "_item_" + i).data("index", i).click(function() {
                    var index = jQuery(this).data("index");
                    if(self.current !== index) {
                        self.playlistChange(index);
                    } else {
                        jQuery(self.cssSelector.jPlayer).jPlayer("play");
                    }
                    $(this).blur();
                    return false;
                });

                // Disable free media links to force access via right click
                if(this.playlist[i].free) {
                    jQuery.each(this.playlist[i], function(property,value) {
                        if(jQuery.jPlayer.prototype.format[property]) { // Check property is a media format.
                            jQuery(self.cssSelector.playlist + "_item_" + i + "_" + property).data("index", i).click(function() {
                                var index = $(this).data("index");
                                jQuery(self.cssSelector.playlist + "_item_" + index).click();
                                jQuery(this).blur();
                                return false;
                            });
                        }
                    });
                }
            }
        },
        playlistInit: function(autoplay) {
            if(autoplay) {
                this.playlistChange(this.current);
            } else {
                this.playlistConfig(this.current);
            }
        },
        playlistConfig: function(index) {
            jQuery(this.cssSelector.playlist + "_item_" + this.current).removeClass("jp-playlist-current").parent().removeClass("jp-playlist-current");
            jQuery(this.cssSelector.playlist + "_item_" + index).addClass("jp-playlist-current").parent().addClass("jp-playlist-current");
            this.current = index;
            jQuery(this.cssSelector.jPlayer).jPlayer("setMedia", this.playlist[this.current]);
        },
        playlistChange: function(index) {
            this.playlistConfig(index);
            jQuery(this.cssSelector.jPlayer).jPlayer("play");
        },
        playlistNext: function() {
            var index = (this.current + 1 < this.playlist.length) ? this.current + 1 : 0;
            this.playlistChange(index);
        },
        playlistPrev: function() {
            var index = (this.current - 1 >= 0) ? this.current - 1 : this.playlist.length - 1;
            this.playlistChange(index);
        },
        supplied: "mp3",
        addMedia: function(media){
            this.playlist.push(media);
            this.playlistNext();
        }
    };

});

var last_el='';
jQuery('.track .wrap .play').click(function(){
    var cur_img = jQuery(this).css('backgroundImage');
    if(cur_img.substring(cur_img.length-10)=='play.png")'){
        if(last_el!=''){
            last_el.css('background-image','url("img/play.png")');
        }
        var el = jQuery(this);
        last_el = el;
        parent.frames[1].addSong(el.attr("title"),el.attr("mp3"),el.attr("ogg"));
        el.css('background-image','url("img/pause.png")');
    }else{
        parent.frames[1].pauseSong();
    }
});
jQuery('.jp-interface .jp-pause').click(function(){
    last_el.css('background-image','url("img/play.png")');
});
jQuery('body a').click(function(){
    var el = jQuery(this);
    var href = el.attr('href');
    if(href.substring(0,1)=='/'){
        parent.location.href = parent.location.href + href.substring(1,href.length);
    }    
});

//]]>
</script>

Hi, I'm having a problem with 2 scripts in the same page. One's a rollover function and the other is for a dynamic image gallery. Either one separately works fine, but when together, the rollover is preventing the gallery from functioning. My javascript skills are limited. Any help is appreciated.

Page can be seen he test site

Code for page:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Script-Content-Type" content="text/javascript" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
	height: 100%;
	font-family: Arial, sans-serif;
	background: url(images/bg.gif) #FFF;
}
* {
	margin: 0;
	padding: 0;
}
#wrapper {
	width:950px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -30px;
	background:#fff;
	border-left:1px solid #036;
	border-right:1px solid #036;
}
#footer, #push {
	clear:both;
	width:950px;
	height: 30px;
	margin:0 auto;
	background:#036;
	font-size:11px;
	text-align:center;
	color:#FFF;
}
#push {
	background:none;
}
/*  Navigation  */
#nav ul, #nav li {
	display:inline;
	list-style-type:none;
}
#nav li {
	height:55px;
	width:119px;
	background:url(button.jpg);
	display:block;
}
#nav a {
	height:32px;
	width:119px;
	display:block;
	text-decoration:none;
	background:url(button.jpg);
}
#nav a:hover {
	background:url(button.jpg);
	background-position:0px 55px;
}
#nav span {
	display:block;
	padding-top:10px;
	color:#000;
	font-weight:bold;
	text-align:center;
}
/*  Picture Gallery  */
#right {
	width:400px;
	height:100%;
	position: absolute;
	top: 0px;
	left:500px;
}
#filler {
	background:url(fish9.jpg) top center no-repeat;
	border-bottom:1px solid #333;
	display:inline;
	width:400px;
	height:300px;
	text-align:center;
	position: absolute;
	top:0;
	left:0;
}
#thumbs {
	width:400px;
	position: absolute;
	top: 330px;
	left:0;
}
#thumbs ul {
	display:inline;
	list-style-type:none;
}
#thumbs ul li {
	width:92px;
	height:69px;
	float:left;
	display:inline;
	padding-left:6px;
	padding-bottom:6px;
}
#thumbs ul li a {
	text-decoration:none;
}
#thumbs a img {
	border: none;
}
#thumbs ul li.extrapixels {
	padding-left:7px;
}
#message {
	width:400px;
	float:left;
	height:70px;
	text-align:center;
	position: absolute;
	top: 300px;
	left:0;
	color:#333;
}
#bigDynPic {
	width:400px;
	height:300px;
	text-align:center;
	position: absolute;
	top: 0px;
	left:0;
}
#bigDynPic img {
	border-bottom:1px solid #333;
	display:block;
}
#bigDynPic p {
	font-family:Verdana, Sans-serif;
	font-weight:bold;
	font-size:80%;
	background:#fff;
	color:#333;
	margin:0;
	padding:2px 2px;
}
</style>
<script type="text/javascript">
<!--
 function dyngallery()
{
	var picId='bigDynPic';
	var loadingId='loadingmessage';
	var d=document.getElementById('thumbs');
	if(!d){return;}
	if(!document.getElementById(loadingId))
	{
		var lo=document.createElement('div');
		d.parentNode.insertBefore(lo,d);
		lo.id=loadingId;
		lo.style.display='none';
	}
	var piclinks=d.getElementsByTagName('a');
	for(var i=0;i<piclinks.length;i++)
	{
		piclinks[i].onclick=function()
		{
			document.getElementById(loadingId).style.display='block';
			var oldp=document.getElementById(picId);
			if(oldp)
			{
			 oldp.parentNode.removeChild(oldp);
			}
			var nc=document.createElement('div');
			d.parentNode.insertBefore(nc,d);
			nc.style.display='none';
			nc.id=picId;
			var newpic=document.createElement('img');
			newpic.src=this.href;
			newpic.alt=this.getElementsByTagName('img')[0].alt;
			newpic.title='Click to return to images';
			newpic.onload=function()
			{
				document.getElementById(loadingId).style.display='none';
			}
			newpic.onclick=function()
			{
			 this.parentNode.parentNode.removeChild(this.parentNode);
			}
			nc.appendChild(newpic);
			np=document.createElement('p');
			np.appendChild(document.createTextNode(this.getElementsByTagName('img')[0].alt))
			nc.appendChild(np);
			nc.style.display='block';
			return false;
		}
	}		
}
window.onload=function()
{
	if(document.getElementById && document.createTextNode)
	{
		document.body.onmouseover=function()
		{
			dyngallery();	
		}																		
	}
} 
// -->
</script>
<script type="text/javascript">
<!--
 	window.onload = initMenu;
function initMenu() {
	var e=document.getElementById('nav');
	var links=e.getElementsByTagName('A');
    for(i=0; i < links.length; i++) { 
        var thisLink = links[i];
        if(thisLink.parentNode.tagName == "LI"){
            setActivity(thisLink);
        }
    }
}
function setActivity(thisLink){
    thisLink.onmouseover = mouseOver;
    thisLink.onmouseout = mouseOut;	
}
function mouseOver() {
    this.parentNode.style.background = 'url(button.jpg) 0px 55px';
    return this;
}
function mouseOut() {
    this.parentNode.style.background = 'url(button.jpg)';
    return this;
} 
// -->
</script>
</head>
<body>
<div id="wrapper">
  <ul id="nav">
    <li><a href="index.html"><span>Home</span></a></li>
    <li><a href="index.html"><span>Page1</span></a></li>
    <li><a href="index.html"><span>Page2</span></a></li>
    <li><a href="index.html"><span>Page3</span></a></li>
    <li><a href="index.html"><span>Page4</span></a></li>
  </ul>
  <div id="right">
    <div id="filler"> </div>
    <div id="message">Click on thumbnail for larger picture</div>
    <div id="thumbs">
      <ul>
        <li class="extrapixels"><a href="fish1.jpg"><img src="tn_fish1.jpg" alt="Sample 1" /></a></li>
        <li><a href="fish2.jpg"><img src="tn_fish2.jpg" alt="Sample 2" /></a></li>
        <li><a href="fish3.jpg"><img src="tn_fish3.jpg" alt="Sample 3" /></a></li>
        <li><a href="fish4.jpg"><img src="tn_fish4.jpg" alt="Sample 4" /></a></li>
        <li class="extrapixels"><a href="fish5.jpg"><img src="tn_fish5.jpg" alt="Sample 5" /></a></li>
        <li><a href="fish6.jpg"><img src="tn_fish6.jpg" alt="Sample 6" /></a></li>
        <li><a href="fish7.jpg"><img src="tn_fish7.jpg" alt="Sample 7" /></a></li>
        <li><a href="fish8.jpg"><img src="tn_fish8.jpg" alt="Sample 8" /></a></li>
      </ul>
    </div>
  </div>
  <div id="push"></div>
</div>
<div id="footer">
  <p>&copy; 2009</p>
</div>
</body>
</html>

Scripts would normally be external, I just put them in the page for now for simplicity.

Thanks.

this site plays music when you are there.

how do they do it?

Hello Friends,
I have an <img> Tab to play a video(of type .wmv). The image tag is as follows:
<img border="0" dynsrc="Test1.wmv" start="fileopen" loop="1" width=1081 height=838>

Everything works fine, but now I need to play a video list (up to 5 videos). As soon as one video stops another video should start playing (at the same position automatically, without any user input) and as soon as the last video is stopped, it should start the first video again. So it will be like a loop.

How can I achieve the above requirement?

Thanks.

I have a self project I am exploring. I would like to play a simple sound file each time a function is run. The function runs every second, so, basically, I am just trying to get an audible click sound file to run every time the function runs. I do not know how to play a sound file thru javascript. Any ideas?

Here is the code file thus far...

Code:

<html>

<head>

   <title>Timer</title>
   <link href="timer.css" rel="stylesheet" type="text/css" />
   <embed src="click.wav" autostart=false hidden=true name="sound1" enablejavascript="true">
   <script type="text/javascript">
       var seconds = 0;
       var clockId;
       var running = false;

       function runClock() { 
           seconds++;
           document.timer.timerClock.value = seconds; 
       }

       function startClock() {
           if (!running) {
           clockId = setInterval('runClock()',1000);
           running = true;
           }
       }

       function stopClock() {
            if (running) {
           clearInterval(clockId); 
           running = false;   
           }       
       }
       
       function resetClock() {
           document.timer.timerClock.value = 0;
           seconds = 0;
       }
   </script>
</head>
<body>
<form id="timer" name="timer" action="">
<div id="header">  
   <p>
   <span>Timer<br />   
   </p>
</div>
<div id="intro">
   <p>Click to begin timer</p>
   <p id="buttons">
      <input onclick="startClock()" type="button" value="Begin Seconds Counter" />
      <br />
      <input name="timerClock" id="timerClock" value="0" />      
      <br />
      <input onclick="stopClock()" type="button" value="Stop Timer" />
      <br />
      <input onclick="resetClock()" type="button" value="Reset Timer" />
   </p>
</div>
</form>
</body>
</html>