JavaScript - On Key Down Play Sound And Change Image

Hello geniuses.

I really need your help and didn't know who else to turn to.

Using JavaScript, I require a code that allows me to play .wav sound files randomly and automatically on page start-up, I also need them to loop as they are drum beats.

The plan: to load my web page and hear a random drum beat that loops continuously.

I need it to be compatible with most, if not all Internet browsers (Chrome, Internet Explorer, Firefox and Opera are crucial) and to state what sound file is playing on the page (allowing me to identify the looping drum beat/sound file), and if possible to provide a link to the actual sound file for download.

I've tried endlessly trying to find code to build upon but have failed miserably, I would appreciate any code submissions as it would help me out massively.
It's a lot to ask I know, but it would be so very appreciated.
My knowledge with JavaScript is sadly minimal.

I've also got a quick question, how would I prevent Google Chrome from putting a pause after each sound loop? Of course, being drum beats; I require it to loop in sync and it appears only Google Chrome puts a 1 second period after each play.

Please help, I am so stuck.
Anyway guys, thanks for reading!

Hi Everyone

I don't have a clue what i'm doing with this and don't expect someone to just give me the code if it is actually possible (although it would be nice).

I've created a site and in the admin area the page will update and tell me if there is a new message from a user, I have this page automatically refreshing every 5 minutes and wondered if it's possible to play a sound file if the term "unread" appears anywhere on the page?

Thanks for any help you can provide.

I am running a ticker using javascript to update a gridview and I need to figure out how to run a sound alert when there is a new message; my javascript code file is below:
Code:

function Check()
{
  // Call the static page method.
  PageMethods.GetLatestHeadlineTick(OnSucceeded, OnFailed);
}

function OnSucceeded(result, userContext, methodName)
{
  // Parse the web method's result and the embedded
  //  hidden value to integers for comparison.
  var LatestTick = parseInt(result);
  var LatestDisplayTick = parseInt($get('LatestDisplayTick').value); 

  // If the web method's return value is larger than 
  //  the embedded latest display tick, refresh the panel.
  if (LatestTick > LatestDisplayTick)
    __doPostBack('up1', '')
if (LatestTick > LatestDisplayTick)
    document.title = "New message!";
// Else, check again in five seconds.
else
    setTimeout("Check()", 500);
}

// Stub to make the page method call happy.
function OnFailed(error, userContext, methodName) {}

function pageLoad()
{
  // On initial load and partial postbacks, 
  //  check for newer articles in five seconds.
  setTimeout("Check()", 500);
}

i have an ajax/comet chat setup and working and i added the following line to it to play a sound when a new message is received... however every time it plays the sound, it unfocuses the textbox that the user is typing a new chat msg in....

Code:

$('soundbox').innerHTML="<embed src='WAVE_358.wav' hidden=true autostart=true loop=false>";

Hi all,
On my website I've got a simple animated .gif I want to play each time someone clicks a link on the menu bar. The problem is that while the image changes successfully, the webpage changes too quickly so the animated.gif won't play.

I'm assuming this has something to do with setTimeout though I'm too much of a noob at Java to get this right.

Here is one of the buttons:

Code:

<a href="facts.html" onmouseover='facts.src="images/thefactsbutton2.jpg"' onmouseout='facts.src="images/thefactsbutton.jpg"' onclick='top.src="images/chimneytopsm.jpg"'> <img name="facts" src="images/thefactsbutton.jpg" /> </a>

Hi

I'm wanting to add a sound to an image when it is clicked. Basically when you click a picture of a mouse is squeaks.

Can someone help me with the code for this?

I think its Javascript which is a aboit scary for me ha!

I'm hoping its not to complicated and confusing for my brain!!

Cheers

C

What is the correct code to make a sound play every time you click a certain image? All the codes I've found online aren't working, or I'm not inputting something correctly..

I have an on/off image piece of code: (probably out of date!)

Code:

<!--
var NN3 = false;
image1= new Image();
image1.src = "photo1.gif";
image1on = new Image();
image1on.src = "photo2.gif";
function on3(name)   {
        document[name].src = eval(name + "on.src");
}
function off3(name)  {
        document[name].src = eval(name + ".src");
}
NN3 = true;

function on(name)  {
        if (NN3) on3(name);
}
function off(name)  {
        if (NN3) off3(name);
}
// -->

My problem is that I am trying to add sound to the clicking and mousing out of the image. Without sound, it works (and works exactly the way I want it to) like this;

Code:

<a href="javascript:myVoid()" onmousedown="on('image1');" onmouseover="off('image1')">
<img src="photo1.gif" name="image1"></a>

Adding (flash)sound I can do this and it works OK too:

Code:

<a href="javascript:myVoid()" onmousedown="on('image1');mySoundObj1.TGotoAndPlay('/go','start'); return true;" onmouseout="off('image1');">
<img src="photo1.gif" name="image1"></a>

But what I want to occur is that a second "swish" sound happens onmouseout (in the red place below) but ONLY if the mousedown has already occurred:

Code:

<!--
...

function on(name)  {
        if (NN3) on3(name);
}
function off(name)  {

 [SWISH SOUND HERE] 

        if (NN3) off3(name);
}
// -->

I hope this doesn't read complicated. I know it's really a simple toggle with an if, but I've tried dozens of things to no avail.

I have to replicate this many hundreds of times in a website...and I have to stick with flashsound (which I like anyway).

Any help would be appreciated.

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.

http://www.***.com/5.html

i cant get a caption specific to each image to display under the arrows when the image changes. it is especially hard for me because i have to edit the javascript which confuses the **** out of me. it seemed so simple....

thanks for any help

ps i cant start an id with a digit? it doesnt seem to cause any problems...why is it stated that this cannot or shouldnot be done?

Code:

function greet() 
{
  var hour = (new Date()).getHours();
  var when = (hour > 17) ? "evening" : ( (hour > 11) ? "afternoon" : "morning" );
  document.write('<img src="' + when + '.png" alt="Good ' + when + '">\n');}

This script puts up a png which gives a greeting depending on the time of day. I want instead to put the greeting as text.
It's a bit ostentacious as it is..
I would appreciate any pointers. Site is here.

Thank you.

Hi there,

I have found some script to auto change an image on my website, but i would like to do this in 2 other places using completely new pictures. for ease i have set up 3 cells in a table and would like them to appear in each cell. Can any body help altering my code to allow this. The code i have so far is

Code:

<html lang="en"> 
<head> 

<script type="text/javascript"> 
var c=0 
var s 
function photoGallery() 
{ 
if (c%4==0){ 

document.getElementById('photo-gallery').src = "boots.jpg"; 
} 
if (c%4==1){ 

document.getElementById('photo-gallery').src = "adidas.jpg"; 
} 
if (c%4==2){ 

document.getElementById('photo-gallery').src = "play.jpg"; 
} 
if (c%4==3){ 
document.getElementById('photo-gallery').src = "argos.jpg"; 
} 

c=c+1 
s=setTimeout("photoGallery()",1000) 
} 
</script>

</head> 
<body onLoad="photoGallery()">
<table border="1">
<tr>
<td><img src="amazon.jpg" id="photo-gallery" width="420" height="260"></td>
<td>another image loop here</td>
<td>and another image loop here</td>
</tr>
</table>

</body> 
</html>

Thank you in advance

I am quite new to JavaScript code and have a challenge. I would like to add a mouseover script to several different images e.g. Manufacturer logos which would cause a background image to change accordingly. There are eight different logos which would refer to eight background images respectively. I have found several scripts which cause the image which has the mouseover to change but not any which cause a different image to change. Is this practical using JavaScript? Any help is greatly appreciated!

Here is my code for two tab images.

Code:

    <a href="#page-2"><img src="/images/but02.png" style="margin-top:8px; float:left;"></a>
    <a href="#page-1"><img src="/images/but01.png" style="margin-top:8px; float:left;"></a>

I need to have it so when tab '#page-2' is clicked it will change the image to '/images/but03.png' and when tab '#page-1' is clicked it will change the image to '/images/but04.png' ?

Its basically to show which tab is active, one image is lighter then the other.


Can anyone help ?

i am trying to use the most simple code i can to onmouseover of some text change 1 image. it will have multiple texts with different images for each one all displayed in one place.

it seems to work well for me in IE, but on firefox the mouseover doesn't work. and on a mac it doesn't work in safari or firefox.

any input is appreciated... here is the shortest version of the code i could put together.

Code:

<head>

<SCRIPT LANGUAGE="JAVASCRIPT">
<!--

function roll(img_name1, img_src1)
   {
   document[img_name1].src = img_src1;
   }

//-->
</SCRIPT>
</head>

<body>
<a href="2_17_10/index.html" onmouseover="roll('poster','2_17_10/IMG_7075b.jpg')">2-17-10</a>

<img src="2_16_10/IMG_7072.jpg" name="poster" width=500></img>



</body>
</html>