|
JavaScript - Javascript Sound
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! Similar TutorialsOk, I'm working in dreamweaver cs4 I'm trying to make my links have a sound on mouseover. The tag for this is under the depreciated behaviour section. I tried it to test it. It added the following code to my link: Code: To View Full Product Line<br />
<a href="http://herbal-nutrition.net/yesifeelgood/products" target="_blank" onmouseover="MM_controlSound('play','document.test','sounds/Sound 378.mp3')">Click Here</a>
<embed name="test" src="sounds/Sound 378.mp3" loop="false" autostart="false" hidden="true" width="0" height="0" enablejavascript="true"></embed>
My only problem is that when this loads in a browser on mouseover it loads the window as a quicktime sound then directs to the link preview on the following link (the link where I added the sound is underneath the slideshow: http://www.designfoxmediaworks.com/c...e/carlene.html is there something i should be changing to make this work properly? 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>
Which is the best way to play sound using javascript in a controlled manner ? I need a solution which work across all browsers. This is for my bingo game page which is fully based on ajax. Thanks . I can play a sound on my local machine using the following code, but when I upload to a server the same code it does not play. I cannot work out why, the link below gives the code. The multi channel code is he http://www.storiesinflight.com/html5/audio.html I installed Firebug and insepcted the Net components and can see that the .wav files are being sought out but returning a 404 error. This would be fine, however the path being sought is correct. Clicking link does'nt play the sound, but removing the file and paring back to the directory brings you to the directory on the server and clicking the file does play the sound. The code works locally, and I simply cannot see what could be causing the issue in the server versions on both Firefox and Chrome. 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 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>";
I am working with the quiz found below (Multiple Choice Quiz that is instantly graded/checked), and would like to add pictures to the questions and rollover sound effects. I have figured how to add the picture, but not the sound. Sound effects are played when added to the html section, but not when added to the javascript coding. I am alright with html and css, but not with javascript. Any help from the javascript experts would be appreciated. ********* Coding Example ********* <HTML> <HEAD> <TITLE>The JavaScript Source: Miscellaneous : Multiple Choice Quiz</TITLE> <META HTTP-EQUIV="The JavaScript Source" CONTENT = "no-cache"> <META NAME="description" CONTENT="Add a quiz to your Web page without using a server-side script. Easy to set-up. Questions and answers are stored in a multi-dimensional array format in an external file. The quiz is marked in real time, and once answered, questions are set to read-only. A summary of the users score is alerted at the end."> <META NAME="date" CONTENT="2005-12-27"> <META NAME="channel" CONTENT="Developer"> <META NAME="author" CONTENT="James Crooke"> <META NAME="section" CONTENT="Miscellaneous"> <style type="text/css"> <!-- .question { color:darkblue; font-size:14px; font-weight:bold; } --> </style> <script type="text/javascript"> <!-- /* This script and many more are available free online at The JavaScript Source :: http://javascript.internet.com Created by: James Crooke :: http://www.cj-design.com */ var useranswers = new Array(); var answered = 0; function renderQuiz() { for(i=0;i<questions.length;i++) { document.writeln('<p class="question">' + questions[i] + ' <span id="result_' + i + '"><img src="blank.gif" style="border:0" alt="" /></span></p>'); for(j=0;j<choices[i].length;j++) { document.writeln('<input type="radio" name="answer_' + i + '" value="' + choices[i][j] + '" id="answer_' + i + '_' + j + '" class="question_' + i + '" onclick="submitAnswer(' + i + ', this, \'question_' + i + '\', \'label_' + i + '_' + j + '\')" /><label id="label_' + i + '_' + j + '" for="answer_' + i + '_' + j + '"> ' + choices[i][j] + '</label><br />'); } } document.writeln('<p><input type="submit" value="Show Score" onclick="showScore()" /> <input type="submit" value="Reset Quiz" onclick="resetQuiz(true)" /></p><p style="display:none"><img src="correct.gif" style="border:0" alt="Correct!" /><img src="incorrect.gif" style="border:0" alt="Incorrect!" /></p>'); } function resetQuiz(showConfirm) { if(showConfirm) if(!confirm("Are you sure you want to reset your answers and start from the beginning?")) return false; document.location = document.location; } function submitAnswer(questionId, obj, classId, labelId) { useranswers[questionId] = obj.value; document.getElementById(labelId).style.color = "grey"; //disableQuestion(classId); showResult(questionId); answered++; } function showResult(questionId) { if(answers[questionId] == useranswers[questionId]) { document.getElementById('result_' + questionId).innerHTML = '<img src="correct.gif" style="border:0" alt="Correct!" />'; // I tried to make the background a different colour for the answer document.getElementById(questionId).style.border ='1px'; } else { document.getElementById('result_' + questionId).innerHTML = '<img src="incorrect.gif" style="border:0" alt="Incorrect!" />'; } } function showScore() { if(answered != answers.length) { alert("You have not answered all of the questions yet!"); return false; } questionCount = answers.length; correct = 0; incorrect = 0; for(i=0;i<questionCount;i++) { if(useranswers[i] == answers[i]) correct++; else incorrect++; } pc = Math.round((correct / questionCount) * 100); alertMsg = "You scored " + correct + " out of " + questionCount + "\n\n"; alertMsg += "You correctly answered " + pc + "% of the questions! \n\n"; if(pc == 100) alertMsg += response[0]; else if(pc >= 90) alertMsg += response[1]; else if(pc >= 70) alertMsg += response[2]; else if(pc > 50) alertMsg += response[3]; else if(pc >= 40) alertMsg += response[4]; else if(pc >= 20) alertMsg += response[5]; else if(pc >= 10) alertMsg += response[6]; else alertMsg += response[7]; if(pc < 100) { if(confirm(alertMsg)) resetQuiz(false); else return false; } else { alert(alertMsg); } } function disableQuestion(classId) { var alltags=document.all? document.all : document.getElementsByTagName("*") for (i=0; i<alltags.length; i++) { if (alltags[i].className == classId) { alltags[i].disabled = true; } } } var questions = new Array(); var choices = new Array(); var answers = new Array(); var response = new Array(); // To add more questions, just follow the format below. questions[0] = "1) JavaScript is ..." ; choices[0] = new Array(); choices[0][0] = "the same as Java"; choices[0][1] = "kind of like Java"; choices[0][2] = "different than Java"; choices[0][3] = "ther written part of Java"; answers[0] = choices[0][2]; ///////// THIS IS THE SECTION THAT I'M TRYING TO WORK ON ///////// // image works, but sound doesn't // questions[1] = "<a href='javascriptHTMLSound' id='dummyspan' // the smiley is actually a colon followed by a D as in "DHTML" onMouseOver='DHTMLSound('success.wav')'><img src='some_image.gif'></a>"; choices[1] = new Array(); choices[1][0] = "Play This" + "<a href='javascriptlaySound('success.wav')'>Play This</a>"; choices[1][1] = "objective"; choices[1][2] = "evil"; choices[1][3] = "object based"; answers[1] = choices[1][3]; ///////////////////////////////////////////////////////////////// questions[2] = "3) To comment out a line in JavaScript ..."; choices[2] = new Array(); choices[2][0] = "Precede it with two forward slashes, i.e. '//'"; choices[2][1] = "Precede it with an asterisk and a forward slash, i.e. '*/'"; choices[2][2] = "Precede it with an asterisk, i.e. '*'"; choices[2][3] = "Precede it with a forward slash and an asterisk, i.e. '/*'"; answers[2] = choices[2][0]; questions[3] = "4) JavaScript can only run on Windows"; choices[3] = new Array(); choices[3][0] = "True"; choices[3][1] = "False"; answers[3] = choices[3][1]; questions[4] = "5) Semicolons are optional at the end of a JavaScript statement."; choices[4] = new Array(); choices[4][0] = "True"; choices[4][1] = "False"; answers[4] = choices[4][0]; questions[5] = "strings are..."; choices[5] = new Array(); choices[5][0] = "strings, numbers, BooBoos, and nulls"; choices[5][1] = "strings, text, Booleans, and nulls"; choices[5][2] = "strings, numbers, Booleans, and nulls"; choices[5][3] = "strings, numbers, Booleans, and zeros"; answers[5] = choices[5][2]; // response for getting 100% response[0] = "Excellent, top marks!"; // response for getting 90% or more response[1] = "Excellent, try again to get 100%!" // response for getting 70% or more response[2] = "Well done, that is a good score, can you do better?"; // response for getting over 50% response[3] = "Nice one, you got more than half of the questions right, can you do better?"; // response for getting 40% or more response[4] = "You got some questions right, you can do better!"; // response for getting 20% or more response[5] = "You didn't do too well, why not try again!?"; // response for getting 10% or more response[6] = "That was pretty poor! Try again to improve!"; // response for getting 9% or less response[7] = "Oh dear, I think you need to go back to school (or try again)!"; //--> </script> </HEAD> <BODY BGCOLOR=#ffffff vlink=#0000ff > <script> function DHTMLSound(surl) { document.getElementById("dummyspan").innerHTML="<embed src='"+surl+"' hidden=true autostart=true loop=false>"; } </script> <script type="text/javascript"> <!-- renderQuiz(); //--> </script> </body></html> ********* I have also tried the following sound ideas, but none work "within" the javascript -- they do work when assigned to a button inside the html however... The trick is, I want to be able to display an image within the question, then mouseover a <span> of text or an image (preferrably NOT a link <a>) and have the sounds played as part of the choices for the question. For a slightly different purpose, I'm also interested in being able to have the correst answer (for more complicated quizes) appear beside the question, in a <div> if possible, rather than an alert, to give the solution / reasoning for the correct answer. Any help at all would be really appreciated. 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! :| Hello Everyone! I am looking for help with this script and I was wondering if someone could help me out? I want to play a sound on a mouse click, which there are a ton of scripts out there that do this. Here is my problem I want to be able to let the users shut the sound on and off. This is for a feature to my site that I am building that is just using javascript and html. Here is what I have so far below. I would also like to have a div to show if the sound is on or off. The only thing that I am looking for the javascript to play and stop the sound file. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var theSound = "on";
function playSound(){
if(document.getElementById("mute").checked == false){
document.getElementById("theSound").style.display = "block"; //isert play sound code here
}
}
function muteSound(){
document.getElementById("theSound").style.display = "none"; //insert stop sound code here
}
</script>
</head>
<body>
<form name="soundTest">
<input name="sound" type="checkbox" value="on" id="mute" />Mute
</form>
<p onmouseover="playSound()" onmouseout="muteSound()">Mouseover this to make the "Sound".</p>
<!--This is just a div that represents a sound playing.-->
<div id="theSound" style="display:none; background:#FF0000; padding:10px; font-size:36px">SOUND!</div>
</body>
</html>
Note: That this script just shows a mute check box. I think I am going to to buttons for start and stop. Thanks for the help in advance and look forward to hearing from you. Chris 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 Hey guys, first I am new and I don't really know where this goes but I am wanting some help with developing a program that converts Sound (Speech or more preferably a sound... Like a frequency) to a Keystroke or code.. I know a little bit of C++ if that helps.. (I also Have Visual Studio 2013) Thanks guys
Reply With Quote 12-21-2014, 12:36 PM #2 Philip M View Profile View Forum Posts Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts Not possible using Javascript. The Warrington players can hang their heads high. - Commentator, BBC Radio 2 Hi there Looking at adding a sound file to a game to play when an image, a .png image is pressed.. it will be a simple 1sec (or less) sound file i.e. bell, whistle etc. Just looking at some help on where to start with the code. Many thanks LL I was wondering if there is a javascript code that works in all browsers and will allow when a person clicks on a certain tab I have that it plays a short beep.
hi i have the following code which works fine in IE but nothing happens in firefox. Code: <html>
<bgsound id="sound">
<script>
function PlaySound(url) {
document.all.sound.src = url;
}
</script>
<body>
<a href="#"><img src="images/butters.jpg" onMouseOver="PlaySound('http://www.pacdv.com/sounds/sounds/sound38.mp3')" /></a>
</body>
</html>
Any one know of any good ways to make sound work in firefox? ta Just so you know: this is not my idea, the person whose site this is wants a short blip sound played whenever you roll over the links in the sidebar. I know it's not advised, but she insists. So can anybody tell me how this is done? I've tried implementing a few scripts but no luck in Firefox or Chrome. Thanks. How can I play a sound when I click an image, without the information bar popping up at top? I've looked all over, and I've tried a few javascript-only methods but none have worked for me.. Is flash the only way to go?
Please help, I have a page with 3 images. I want my visitors to hear an mp3 audio once they hover their mouse on each image. image1 = audio1.mp3 image2 = audio2.mp3 image3 = audio3.mp3 But here are the challenges. 1- I want the audio files to play on the same page where the images are, without opening a new page. 2- I don't want the users to be asked to accept any kind of plugins (such as Windows Media Player). Which means everything needed to run the script should already exist on that page. 3- I want it to be played on the 3 major browsers (IE, Firefox, Chrome) Is this possible? I'm not good at Javascript, but I will understand to do my best to understand your instructions. I spent a long time looking online, but most of what I found is only compatible in one browser or the other. Any help would be appreciated. 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..
Is it possible to play a sound file when a visitor to my website moves their mouse/pointer over a single image no matter what browser they are using? Thanks for any help or advice.
I would like to play a .wav sound file when someone hovers their mouse/pointer over an image. Could someone help me out here please. I am running a Linux OS. Thanks.
|
|||||||