JavaScript - Sound File Played Onclick And Now Doesn't....???

Working on a simple JS/jQuery-driven game where the user clicks on a cup to see if it is a winner or not. If so, it plays a happy sound; if not, it plays a sad sound.

Everything is working great so far, except for the sound. The html is being set correctly when a cup is selected, but Firebug is telling me the sound files are undefined. Same when I enter the function: playSound("[filename].WAV") in the console.

Any help or advice is greatly appreciated.

Code:

var cupRaised = false;
var winningCup;

function determineWinner(raisedCup){
		if(raisedCup == winningCup){
			playSound("applause.WAV");	
		} else {
			playSound("sad-trombone.WAV");	
		}
}

function playSound(file){
		$('#sound_element').html("<embed src='file/"+file+"' hidden='true' autostart='true' loop='false' />");
}

function raiseCup(num){
	if(!cupRaised){
		var cur = "#cup" + num.toString();
		$(cur).animate({"top": "-=100px"}, "slow");
		cupRaised = true;
		determineWinner(num);
	}
}

I am trying to write a game in javascript that will play a tune when a certain score is reached. I can get music to play if i put the code behind a button but I would prefer to use an if statement in the header section. Any suggestions please???? Many thanks

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 created a Blackjack program. I have noticed that clicking on the vertical part of the 'D' on the "Deal" button doesn't always fire the onclick event. I use JS to change the div's style when clicking on it to give the appearance of a normal button. Here's the link:
http://www.myfsjournal.com/blackjack/index.php
username: test
password: test

Here's relevant code:

HTML:
Code:

<div id="dealButton" style="position:relative;float:left;width:100%;z-index:10;">
        <div id="deal" title="Deal" style="cursor:pointer;background:#CCC;padding:3px;width:75px;height:auto;border-top:1px solid;border-left:1px solid;border-bottom:3px solid;border-right:3px solid;" onclick="window.location = 'index.php?a=deal'" onmousedown="javascript:buttonDown('deal');" onmouseup="javascript:buttonUp('deal');" onmouseout="javascript:buttonUp('deal');">
            Deal
        </div>
</div>

And my JS code:
Code:

function buttonDown(id)
{
	document.getElementById(id).style.borderBottom = "1px solid";
	document.getElementById(id).style.borderRight = "1px solid";
	document.getElementById(id).style.borderTop = "3px solid";
	document.getElementById(id).style.borderLeft = "3px solid";
}

function buttonUp(id)
{
	document.getElementById(id).style.borderBottom = "3px solid";
	document.getElementById(id).style.borderRight = "3px solid";
	document.getElementById(id).style.borderTop = "1px solid";
	document.getElementById(id).style.borderLeft = "1px solid";
}

Please delete thread, I went with a JQuery-based solution instead.

I have looked at the various posts about setting onclick in IE and I cannot see any that exactly describe the problem I am having.

Firstly I am not trying to set onclick by calling setAttribute, which most of the posts describe. I am simply assigning a value to the onclick attribute of the element, which those posts seem to imply.

Specifically I am getting "Object doesn't support this action" on the following line:
Code:

	editButton.onclick	= editCitation;

editCitation is already a function, so I do not see why I should have to wrap it in an anonymous function wrapper to get IE to permit the assignment.

Hello all, I am new here and have a question about a AP Div I am using as a dropin. It drops in when the page loads and I would like it to only drop in if a visitor clicks a link I designate as the dropin link. Can someone please tell me how to accomplish this? I am pasting in the js file and I will also need to know how to set up the "a href" link to call the dropin! Thanks is advance for any help you may give!

Code:

// JavaScript Document

var ie=document.all
var dom=document.getElementById
var ns4=document.layers
var calunits=document.layers? "" : "px"

var bouncelimit=32 //(must be divisible by 8)
var direction="up"

function initbox(){
if (!dom&&!ie&&!ns4)
return
crossobj=(dom)?document.getElementById("dropin").style : ie? document.all.dropin : document.dropin
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
crossobj.top=scroll_top-250+calunits
crossobj.visibility=(dom||ie)? "visible" : "show"
dropstart=setInterval("dropin()",50)
}

function dropin(){
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
if (parseInt(crossobj.top)<100+scroll_top)
crossobj.top=parseInt(crossobj.top)+40+calunits
else{
clearInterval(dropstart)
bouncestart=setInterval("bouncein()",50)
}
}

function bouncein(){
crossobj.top=parseInt(crossobj.top)-bouncelimit+calunits
if (bouncelimit<0)
bouncelimit+=8
bouncelimit=bouncelimit*-1
if (bouncelimit==0){
clearInterval(bouncestart)
}
}

function dismissbox(){
if (window.bouncestart) clearInterval(bouncestart)
crossobj.visibility="hidden"
}

function truebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}


window.onload=window.setTimeout(initbox,5000);

Hi guys,

On the back of my image preview issue (which is now fixed) I am having another problem. I am trying to get a file upload that will allow you to preview the html page in a popup on the click of a button. Can this be done? I have the preview button that creates the popup but at the moment it only shows the name of the file that's to be uploaded. Code below

Code:

<html>
<head>
<title>File Uploading Form</title>
</head>
<body>
<h3>File Upload:</h3>
Select a file to upload: <br />
<form method='post' action='upload.php' enctype="multipart/form-data" class="pure-form">
<input type="file" name="files[]" multiple="multiple" id="files">
  <input type="button" value="Preview" onclick="displayHTML(this.form)">

      <input type='submit' value='Submit' class="pure-button pure-button-primary"/>  
</form>
</body>
</html>
<script>
function displayHTML(form) {
  var inf = form.files.value;
  win = window.open(", ", 'popup', 'toolbar = no, status = no');
  win.document.write("" + inf + "");
}
</script>

Reply With Quote




01-24-2015, 04:56 PM #2
jmrker View Profile View Forum Posts

Senior Coder Join Date Aug 2006 Location FL Posts 3,175 Thanks 39 Thanked 510 Times in 504 Posts

Can you use the right-click button on your mouse and "View Source",
or is this not what you are trying to do?





Reply With Quote

01-24-2015, 06:58 PM #3
Foster View Profile View Forum Posts

Regular Coder Join Date Nov 2011 Posts 268 Thanks 8 Thanked 4 Times in 4 Posts

Not what I'm trying to do. I want to be able to click the button and the file that is waiting to be opened should pop up in a new window.





Reply With Quote

01-24-2015, 09:51 PM #4
Old Pedant View Profile View Forum Posts

Supreme Master coder! Join Date Feb 2009 Posts 28,310 Thanks 82 Thanked 4,754 Times in 4,716 Posts

LOOK at your code!

Code:

<input type="file" name="   files[]   " ...rest doesn't matter... >
and
var inf = form.  files  .value;

Those are *NOT* the same name in JavaScript. Only in PHP would the be (sort of) the same (and not even quite so, there).

Anyway, I don't see how you can expect an HTML file that is not yet uploaded to look the same this way as it will coming from the server. ONLY if it is restricted as follows could you get the :
(a) only <img> tags that use COMPLETE URLs as their src= (that is, src="http://somesite.com/somepath/someimage.pn")
(b) only href's (in any kind of tag) that use COMPLETE urls.
(c) only <script> tags that use src= complete urls.
(d) probably other things I didn't think of

Any RELATIVE urls (e.g., <img src="/images/xxx.png"/>) will be relative TO THE CLIENT MACHINE, not to the server. And how that relative path works may vary from browser to browser.

Offhand, I'd say this is not a good idea. I think you should allow the upload and then preview the uploaded file in a popup window, yes, and give the user the opportunity to delete the just-uploaded file from the server.

Here is a .js file to hack ie6,but it doesn't work when i put it out of the .html file.It can woking only in the .html file.


It's fine in the .html file. Below:
Code:

<html>
<head>
<script type="text/javascript">
sfHover =function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
</head>
<body>
......
......
</body>
</html>

It's not working if external .js file.below:
Code:

<script type="text/javascript" src="suckerfish.js"></script>

note：I haven't added the <script type="text/javascript">...<script> code to the .js file.

any help will be good.

Hello all,

This is a follow up with a new question from a post I did last week. http://www.codingforums.com/showthre...098#post956098

I have an experimental website where I have music recordings. url removed When you open the site, each page uses a piano keyboard graphic to navigate between pages. If you click on a key that says "Jukebox" it will open a small window and continuously play tunes. The way the jukebox works basically is, when you click the jukebox key it calls an html file which contains the information needed to play the first song. When that song is finished it calls another html file with the information to play the second song and so on. Each html file contains an embedded Windows Media Player in it.

I would like to give visitors the option to use the QuickTime player. So I can have one key in the keyboard graphic that say “Jukebox – for Windows Media Players” and then another key in the graphic that would say “Jukebox – for QuickTime players”. I would like to use both keys to call the same html file. So, in the file I would like to:

1. Determine which key was pressed in the graphic. (how to send a parameter from the keyboard graphic file indicating which key was pressed)

2. With that parameter I would then like to invoke the appropriate player. (how to receive that parameter)


After the help I received last week I have my html in the keyboard graphic file set up as follows to call the first html file with the first song:

Code:

<AREA SHAPE="rect" HREF="#" onclick="window.open('ShirleyLee.html','jukebox',
'toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1
,resizable=0,copyhistory=0,left=0,top=0,screenX=0,screenY=0,width=410
,height=300');return false;"onMouseover="document.roll.src=F1
_Down.src"onMouseout="document.roll.src=KeysUp.src"COORDS="
233,344,335,384" NAME="roll"ALT="F1">

I think we would be talking about the use of forms but not sure how to incorporate along with an onclick event....

The reason for this post is just to get some high level discussion ideas so that I can take that and go research how to do it. I could ask specifics later.

Thanks!
Dan

I'm currently working on a project and I am doing a bunch of image switching.

I'm having a problem with the following...

I have seven medium image objects and one small one. One is at the top and the other 7 are below. When one of the 7 is clicked, it then becomes the one up top and the one up top then takes the place of the image clicked. This needs to be able to happen no matter which of the seven i click.

Also when you click one of the seven it runs a script to change 9 other images in the center of the page. this isnt too important because i have it working already.

What i have is, each of the seven images run their function that changes the 9 center images and then it runs another function.

What i need is for that function to determine which company for example(shaws, lowes, target) the top image belongs to and replace the image that was clicked with the top one. But i also need to replace the NAME="" and ONCLICK="function()" with the proper ones for the original company up top.

Please if you can understand what im trying to do let me know, if you need further clarification i can do so. i can draw a picture of what im trying to do or the layout if needed but i cant necessarily show anyone the project due to a non-disclosure.

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

hi there, im trying to get a sound effect to play when a slideshow runs.

the user selects the sound from a drop down menu on each image. The sound play when selected. But i need some way to pass it into the function that starts the slideshow.

I am using pixtastic library to add effects to the images, and jquery (with cycle plugin) to perform the slideshow. The sounds ive put in work when selected, but i need to write a function to play them when the slideshow runs (this is where im stuck!)

The library is soundmanager2

Here is the code

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>
<script  type="text/javascript" src="js/pixastic.core.js"></script>
<script  type="text/javascript" src="js/pixastic.jquery.js"></script>
<script type="text/javascript" src="js/actions/sepia.js"></script>
<script type="text/javascript" src="js/actions/flipv.js"></script>
<script type="text/javascript" src="js/actions/emboss.js"></script>
<script type="text/javascript" src="js/actions/blur.js"></script>
<script type="text/javascript" src="js/actions/solarize.js"></script>
<script type="text/javascript" src="js/actions/edges.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript" src="js/Soundmanager/script/soundmanager.js"></script>
<script>
function change_image(id, effect)
{
	Pixastic.process(document.getElementById(id),effect);
}
		function startShow()
	{
		//get the canvas elements on the page
		var canvases = document.getElementsByTagName("canvas");
		var viewpane = document.getElementById("slideshow");
		for(i=0;i<canvases.length;i++)
		{
			viewpane.appendChild(canvases[i]);
		}
		$('#slideshow').cycle({
			fx: 'all' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
		});

	}

</script> 
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" href="css/main.css" type="text/css" />
	<title>My Slideshow</title>
</head>
<body>
<div>
 <!-- soundManager appends "hidden" Flash to the first DIV on the page. -->
</div> 
	<div class="wrap">
		<h1 id="logo"><a href="javascript:location.reload(true)">My Slideshow!</a>	<br /></a></h1>
		<ul id="menu">
			Welcome to my slideshow, click view show to start<p>alternatively, click the headline to start again</p>
		
		</ul>
		<div id="text">
			<h2>Edit the images and start the show!</h2><p><h3>You can add more than one effect to each image!</h3>
      <div id = "slideshow">
<iNPUT TYPE=BUTTON OnClick="startShow()" VALUE="View The Show"> 

</div>
			</div>
<div id="leftcolumn">  
  <div id ="firstImage"> 
<img id="image1" src = "images/image1.jpg"></image>
	<form name="first_pic" id="first_pic">
  <select name="image1" onchange = "change_image(this.name,this.value);">
  <option value="blank">Edit the Image</option>
  <option value="sepia">Sepia</option>
  <option value="flipv">Flip Vertical</option>
  <option value="emboss">Emboss</option>
  <option value="solarize">Solarize</option>
  <option value="blur">Blur</option> 
  <option value="edges">Edged</option>
</select>
<select name="image1" onchange = "soundManager.play(this.value);">
  <option value="">Choose a sound</option>
  <option value="beep">Beep</option>
  <option value="gangsta">Gangsta</option>
  <option value="glass">Glass</option>
  <option value="page">Page turn</option>
</select>
</div>

</p>
 </div> 
 <div id="rightcolumn">

  <div id = "secondImage">
<img id="image2" src = "images/image2.jpg"></image>
	<form name="first_pic" id="first_pic">
  <select name="image2" onchange = "change_image(this.name,this.value);">
  <option value="blank">Edit the Image</option>
  <option value="sepia">Sepia</option>
  <option value="flipv">Flip Vertical</option>
  <option value="emboss">Emboss</option>
  <option value="solarize">Solarize</option>
  <option value="blur">Blur</option>
  <option value="edges">Edged</option>
</select>
<select name="image2" onchange = "soundManager.play(this.value);">
  <option value="">Choose a sound</option>
  <option value="beep">Beep</option>
  <option value="gangsta">Gangsta</option>
  <option value="glass">Glass</option>
  <option value="page">Page turn</option>
</select>
</div>
</div>			
			
			
		<div id="green_bubble">
			
		</div>
	</div>
	<div id="footer">
		<div class="wrap">
			<div id="bubble"></div>
			<div id="copyright">
				
			</div>
			<div class="clear"></div>
		</div>
	</div>
	<script type="text/javascript">soundManagerInit();</script>
</body>
</html>

Thanks!

Hey guys, I need some help. I have divs placed in a html document, and what I need to do is have a sound play when a person is to hover their mouse over the,. I used this code that I've butchered together from researching on the internet, but it just isn't working. The sound plays automatically as soon as the site loads. Can you please help me? Here is my code:

Code:

<html>
<head>
<script>
function EvalSound(soundobj) {
  var thissound= eval("document."+soundobj);
  thissound.Play();
}
</script>

<embed src="C.mp3" autostart=false width=0 height=0 name="C"
enablejavascript="true">
<embed src="D.mp3" autostart=false width=0 height=0 name="D"
enablejavascript="true">

</head>
<link rel="stylesheet" type="text/css" href="NavTest.css">

<div id=red alt="#" onMouseOver="EvalSound('C')"></div>
<div id=blue alt="#" onMouseOver="EvalSound('D')"></div>
</html>

Thank you! [:

Sorry, maybe I should also mention that my knowledge of Javascript is NONE! :|