JavaScript - Play Sound File Randomly
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! Similar TutorialsHello 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! 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); } Basically, I want to make it so there is a button, and when you click it, it plays a random song from a list of songs that would be in the code. I am not completely sure if this is possible or not. I know how to make the button, that is simple. Sorry if this is actually easy, I am just learning how to script. 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. 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. 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 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> 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. Hi all! I am coding a page that has 6 buttons on it, from which one is the correct button (the target). I want to try and implement the following: 1) when a wrong button is clicked, the file "wrong.mp3" is played. It is less than a second long. 2) when the correct button is click, the file "right.mp3" is played. It too is less than a second long. The page then redirects/reloads. This is the code that I can't seem to get to work: Code: <script language="text/javascript"> ....... function blueClick( buttonLocation ) { if(buttonLocation == blueLocation){ //determining if the correct button is clicked or not var blueScore = localStorage.getItem("scoreBlue"); //this is retrieving the score (scoreBlue) from a previous game: lets say 5 and assigning it to blueScore blueScore = (blueScore*1) +1; //this is incrementing the score, so now blueScore = 6 localStorage.removeItem("scoreBlue"); localStorage.setItem("scoreBlue", blueScore); //this is saving the score - 6 - to a localstorage var called scoreBlue window.location.reload(); } var thissound=document.getElementById(sound1); //since the wrong button was clicked, play the wrong.mp3 file thissound.Play(); } </script> <body> <embed src="wrong.mp3" autostart=false width=0 height=0 id="sound1" enablejavascript="true"> ...... <img id="blue0" onclick="blueClick(0)" /> ..... </body> Any ideas what I am doing wrong here? I've been trying to fix this for the past couple of hours but have no clue whats wrong. Any tips would be appreciated. Thanks! I'm trying to make a website where when certain keys are pressed, (in this example the key can be "a") it triggers an image change and plays a sound that loops at the same time. Is this possible? I also wanted to have a function where if you click a certain area it changes the sounds for each key to a different one. Should the whole script be nested within an if else statement where if that function is clicked, it causes the sounds to be the second set and if it isn't, they play as the normal set? I'd also prefer to not use HTML5 audio tags if possible.
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 have the following code but it simply writes the path to the webpage. I actually want it to randomly select the .js code in that path and run it. Help please! Code: jsFiles= new Array(3) jsFiles[0]=["assets/base/scripts/itmpiscripts/popupad1/script.js"] jsFiles[1]=["assets/base/scripts/itmpiscripts/popupad2/script.js"] jsFiles[2]=["assets/base/scripts/itmpiscripts/popupad3/script.js"] randno = Math.floor ( Math.random() * jsFiles.length ); document.write(jsFiles[randno]); Thanks 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.
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.
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
Hi I have created a page using tables and found abit of javascript off the net where I could get a little soundbite to play when an image is clicked. It worked fine. However I have now converted the page into CSS and even with using the same code the sound no longer plays. Can anyone share any light on this please?? here is a snippet of my page code that shows the javascript. Code: <title>Joho-Designs-Home</title> <link rel="stylesheet" type="text/css" href="johogallery.css" /> <script language="javascript" type="text/javascript"> function playSound(soundfile) { document.getElementById("dummy").innerHTML= "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />"; } </script> <li><embed name="mySound" src="sounds/SQUEAK3.wav" loop=false autostart=false hidden= true><a href="#" onclick="playSound('sounds/SQUEAK3.wav');"><img src="menu/row3sq3_squeak_OP.png" border="0" alt="1"/></a></li> Thanks and look forward to replies!! Hi gents, I am trying to figure out, how to play a video file saved on the server, displayed as a hyperlink from the file manager created in JavaScript? The outcome should be following: When a file name (video.avi) clicked in JavaScript file manager, the server will open a page with the embed Windows Media Player (player.php) and it will start playing the clicked video file? Any suggestions? Code of the JavaScript file manager Code: <? /* Start Directory - To list the files contained within the current directory enter '.', otherwise enter the path to the directory you wish to list. The path must be relative to the current directory. */ $startdir = '.'; /* Show Thumbnails? - Set to true if you wish to use the scripts auto-thumbnail generation capabilities. This requires that GD2 is installed. */ $showthumbnails = true; /* Show Directories - Do you want to make subdirectories available? If not set this to false */ $showdirs = true; /* Force downloads - Do you want to force people to download the files rather than viewing them in their browser? */ $forcedownloads = false; /* Hide Files - If you wish to hide certain files or directories then enter their details here. The values entered are matched against the file/directory names. If any part of the name matches what is entered below then it is now shown. */ $hide = array( 'dlf', 'index.php', 'Thumbs', '.htaccess', '.htpasswd' ); /* Show index files - if an index file is found in a directory to you want to display that rather than the listing output from this script? */ $displayindex = false; /* Allow uploads? - If enabled users will be able to upload files to any viewable directory. You should really only enable this if the area this script is in is already password protected. */ $allowuploads = false; /* Overwrite files - If a user uploads a file with the same name as an existing file do you want the existing file to be overwritten? */ $overwrite = false; /* Index files - The follow array contains all the index files that will be used if $displayindex (above) is set to true. Feel free to add, delete or alter these */ $indexfiles = array ( 'index.html', 'index.htm', 'default.htm', 'default.html' ); /* File Icons - If you want to add your own special file icons use this section below. Each entry relates to the extension of the given file, in the form <extension> => <filename>. These files must be located within the dlf directory. */ $filetypes = array ( 'png' => 'jpg.gif', 'jpeg' => 'jpg.gif', 'bmp' => 'jpg.gif', 'jpg' => 'jpg.gif', 'gif' => 'gif.gif', 'zip' => 'archive.png', 'rar' => 'archive.png', 'exe' => 'exe.gif', 'setup' => 'setup.gif', 'txt' => 'text.png', 'htm' => 'html.gif', 'html' => 'html.gif', 'fla' => 'fla.gif', 'swf' => 'swf.gif', 'xls' => 'xls.gif', 'doc' => 'doc.gif', 'sig' => 'sig.gif', 'fh10' => 'fh10.gif', 'pdf' => 'pdf.gif', 'psd' => 'psd.gif', 'rm' => 'real.gif', 'mpg' => 'video.gif', 'mpeg' => 'video.gif', 'mov' => 'video2.gif', 'avi' => 'video.gif', 'eps' => 'eps.gif', 'gz' => 'archive.png', 'asc' => 'sig.gif', ); /* That's it! You are now ready to upload this script to the server. Only edit what is below this line if you are sure that you know what you are doing! */ error_reporting(0); if(!function_exists('imagecreatetruecolor')) $showthumbnails = false; $leadon = $startdir; if($leadon=='.') $leadon = ''; if((substr($leadon, -1, 1)!='/') && $leadon!='') $leadon = $leadon . '/'; $startdir = $leadon; if($_GET['dir']) { //check this is okay. if(substr($_GET['dir'], -1, 1)!='/') { $_GET['dir'] = $_GET['dir'] . '/'; } $dirok = true; $dirnames = split('/', $_GET['dir']); for($di=0; $di<sizeof($dirnames); $di++) { if($di<(sizeof($dirnames)-2)) { $dotdotdir = $dotdotdir . $dirnames[$di] . '/'; } if($dirnames[$di] == '..') { $dirok = false; } } if(substr($_GET['dir'], 0, 1)=='/') { $dirok = false; } if($dirok) { $leadon = $leadon . $_GET['dir']; } } if($_GET['download'] && $forcedownloads) { $file = str_replace('/', '', $_GET['download']); $file = str_replace('..', '', $file); if(file_exists($leadon . $file)) { header("Content-type: application/x-download"); header("Content-Length: ".filesize($leadon . $file)); header('Content-Disposition: attachment; filename="'.$file.'"'); readfile($leadon . $file); die(); } } if($allowuploads && $_FILES['file']) { $upload = true; if(!$overwrite) { if(file_exists($leadon.$_FILES['file']['name'])) { $upload = false; } } if($upload) { move_uploaded_file($_FILES['file']['tmp_name'], $leadon . $_FILES['file']['name']); } } $opendir = $leadon; if(!$leadon) $opendir = '.'; if(!file_exists($opendir)) { $opendir = '.'; $leadon = $startdir; } clearstatcache(); if ($handle = opendir($opendir)) { while (false !== ($file = readdir($handle))) { //first see if this file is required in the listing if ($file == "." || $file == "..") continue; $discard = false; for($hi=0;$hi<sizeof($hide);$hi++) { if(strpos($file, $hide[$hi])!==false) { $discard = true; } } if($discard) continue; if (@filetype($leadon.$file) == "dir") { if(!$showdirs) continue; $n++; if($_GET['sort']=="date") { $key = @filemtime($leadon.$file) . ".$n"; } else { $key = $n; } $dirs[$key] = $file . "/"; } else { $n++; if($_GET['sort']=="date") { $key = @filemtime($leadon.$file) . ".$n"; } elseif($_GET['sort']=="size") { $key = @filesize($leadon.$file) . ".$n"; } else { $key = $n; } $files[$key] = $file; if($displayindex) { if(in_array(strtolower($file), $indexfiles)) { header("Location: $file"); die(); } } } } closedir($handle); } //sort our files if($_GET['sort']=="date") { @ksort($dirs, SORT_NUMERIC); @ksort($files, SORT_NUMERIC); } elseif($_GET['sort']=="size") { @natcasesort($dirs); @ksort($files, SORT_NUMERIC); } else { @natcasesort($dirs); @natcasesort($files); } //order correctly if($_GET['order']=="desc" && $_GET['sort']!="size") {$dirs = @array_reverse($dirs);} if($_GET['order']=="desc") {$files = @array_reverse($files);} $dirs = @array_values($dirs); $files = @array_values($files); ?> <!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=iso-8859-1" /> <title>Directory Listing of <?=dirname($_SERVER['PHP_SELF']).'/'.$leadon;?></title> <link rel="stylesheet" type="text/css" href="dlf/styles.css" /> <? if($showthumbnails) { ?> <script language="javascript" type="text/javascript"> <!-- function o(n, i) { document.images['thumb'+n].src = 'dlf/i.php?f='+i; } function f(n) { document.images['thumb'+n].src = 'dlf/trans.gif'; } //--> </script> <? } ?> </head> <body> <div id="container"> <h1>Directory Listing of <?=dirname($_SERVER['PHP_SELF']).'/'.$leadon;?></h1> <div id="breadcrumbs"> <a href="<?=$_SERVER['PHP_SELF'];?>">home</a> <? $breadcrumbs = split('/', $leadon); if(($bsize = sizeof($breadcrumbs))>0) { $sofar = ''; for($bi=0;$bi<($bsize-1);$bi++) { $sofar = $sofar . $breadcrumbs[$bi] . '/'; echo ' > <a href="'.$_SERVER['PHP_SELF'].'?dir='.urlencode($sofar).'">'.$breadcrumbs[$bi].'</a>'; } } $baseurl = $_SERVER['PHP_SELF'] . '?dir='.$_GET['dir'] . '&'; $fileurl = 'sort=name&order=asc'; $sizeurl = 'sort=size&order=asc'; $dateurl = 'sort=date&order=asc'; switch ($_GET['sort']) { case 'name': if($_GET['order']=='asc') $fileurl = 'sort=name&order=desc'; break; case 'size': if($_GET['order']=='asc') $sizeurl = 'sort=size&order=desc'; break; case 'date': if($_GET['order']=='asc') $dateurl = 'sort=date&order=desc'; break; default: $fileurl = 'sort=name&order=desc'; break; } ?> </div> <div id="listingcontainer"> <div id="listingheader"> <div id="headerfile"><a href="<?=$baseurl . $fileurl;?>">File</a></div> <div id="headersize"><a href="<?=$baseurl . $sizeurl;?>">Size</a></div> <div id="headermodified"><a href="<?=$baseurl . $dateurl;?>">Last Modified</a></div> </div> <div id="listing"> <? $class = 'b'; if($dirok) { ?> <div><a href="<?=$_SERVER['PHP_SELF'].'?dir='.urlencode($dotdotdir);?>" class="<?=$class;?>"><img src="dlf/dirup.png" alt="Folder" /><strong>..</strong> <em>-</em> <?=date ("M d Y h:i:s A", filemtime($dotdotdir));?></a></div> <? if($class=='b') $class='w'; else $class = 'b'; } $arsize = sizeof($dirs); for($i=0;$i<$arsize;$i++) { ?> <div><a href="<?=$_SERVER['PHP_SELF'].'?dir='.urlencode($leadon.$dirs[$i]);?>" class="<?=$class;?>"><img src="dlf/folder.png" alt="<?=$dirs[$i];?>" /><strong><?=$dirs[$i];?></strong> <em>-</em> <?=date ("M d Y h:i:s A", filemtime($leadon.$dirs[$i]));?></a></div> <? if($class=='b') $class='w'; else $class = 'b'; } $arsize = sizeof($files); for($i=0;$i<$arsize;$i++) { $icon = 'unknown.png'; $ext = strtolower(substr($files[$i], strrpos($files[$i], '.')+1)); $supportedimages = array('gif', 'png', 'jpeg', 'jpg'); $thumb = ''; if($showthumbnails && in_array($ext, $supportedimages)) { $thumb = '<span><img src="dlf/trans.gif" alt="'.$files[$i].'" name="thumb'.$i.'" /></span>'; $thumb2 = ' onmouseover="o('.$i.', \''.urlencode($leadon . $files[$i]).'\');" onmouseout="f('.$i.');"'; } if($filetypes[$ext]) { $icon = $filetypes[$ext]; } $filename = $files[$i]; if(strlen($filename)>43) { $filename = substr($files[$i], 0, 40) . '...'; } $fileurl = $leadon . $files[$i]; if($forcedownloads) { $fileurl = $_SESSION['PHP_SELF'] . '?dir=' . urlencode($leadon) . '&download=' . urlencode($files[$i]); } ?> <div><a href="<?=$fileurl;?>" class="<?=$class;?>"<?=$thumb2;?>><img src="dlf/<?=$icon;?>" alt="<?=$files[$i];?>" /><strong><?=$filename;?></strong> <em><?=round(filesize($leadon.$files[$i])/1024);?>KB</em> <?=date ("M d Y h:i:s A", filemtime($leadon.$files[$i]));?><?=$thumb;?></a></div> <? if($class=='b') $class='w'; else $class = 'b'; } ?></div> <? if($allowuploads) { $phpallowuploads = (bool) ini_get('file_uploads'); $phpmaxsize = ini_get('upload_max_filesize'); $phpmaxsize = trim($phpmaxsize); $last = strtolower($phpmaxsize{strlen($phpmaxsize)-1}); switch($last) { case 'g': $phpmaxsize *= 1024; case 'm': $phpmaxsize *= 1024; } ?> <div id="upload"> <div id="uploadtitle"><strong>File Upload</strong> (Max Filesize: <?=$phpmaxsize;?>KB)</div> <div id="uploadcontent"> <? if($phpallowuploads) { ?> <form method="post" action="<?=$_SERVER['PHP_SELF'];?>?dir=<?=urlencode($leadon);?>" enctype="multipart/form-data"> <input type="file" name="file" /> <input type="submit" value="Upload" /> </form> <? } else { ?> File uploads are disabled in your php.ini file. Please enable them. <? } ?> </div> </div> <? } ?> </div> </div> <div></div> </body> </html> Code of the PHP page with the embed Windows Media Player (player.php) Code: <html> <head> <title>Player</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <body> </head> <OBJECT id=mediaPlayer classid=clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6 width=400 height=300 type=application/x-oleobject VIEWASTEXT><PARAM NAME="AutoSize" VALUE="1"><PARAM NAME="DisplaySize" VALUE="2"><PARAM NAME="url" VALUE=""><PARAM NAME="autoStart" VALUE="true"><PARAM NAME="uiMode" VALUE="mini"> <embed id="mediaPlayer" name="mediaPlayer" width="400" height="300" type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" src="video.avi" autostart="true" showstatusbar="0" showcontrols="1" autosize="1" displaysize="4"></embed> </OBJECT> </body> </html> Please note that video.avi in player.php will be variable (name of the video file chosen by user and clicked). Many thanks for help. ZizaX. I have looked all over for an answer to this, but haven't found a definite way to do it yet. I am updating my audio page (a demo track list for getting composing work) and getting rid of my flash audio player in favor of embedding .mp3 files, or adding them with the HTML5 audio tag. What I would like to be able to do is link into the page, and have that link autoplay a specific track out of the 10-20 that I will have on the same page. The problem is I am extremely new to scripting and have no idea where to even start with this. The reason I want it to be able to autoplay specific tracks is so I can market a specific track, and have that person (who is already expecting to hear the music on page load) not have to then look through the track list for that one track I was promoting and click play. Any help would be greatly appreciated, Thanks! Alright so for a school assignment I need to create a button with the name of the color it is going to turn the background to. the assignment says nothing about naming the buttons the hex numbers for the color therefo I was curious if someone could show me how to create a button in java script that would generate a random hex number for a color ie: #+()+()+()+()+()+() and the text shown on the button would be the same as the hex number generated. feed back please |