www.webdeveloper.com
Results 1 to 15 of 15

Thread: Sound, (not new page), on mousedown

  1. #1
    Join Date
    Mar 2014
    Location
    Lincolnshire
    Posts
    9

    Sound, (not new page), on mousedown

    I have, on one page, used a script to change pages on mousedown but I want to modify it so that it ony plays a sound instead, and would like to retain the change in graphic file on mouseover and mousedown.

    I have looked at many threads in a couple of forums but can't see how to to this.

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,034
    I have no idea what you are asking for in the second part (in regard to "retain the change in graphic file on mouseover and mousedown"). But as far as playing a sound on the mousedown event, it would go something like this:
    Code:
    <script>
    	if(document.addEventListener) {
    		document.body.addEventListener("mousedown", function(){
    			if(document.getElementById('soundOnMouseDown') !== null && document.getElementById('soundOnMouseDown') !== undefined) {
    				document.getElementById('soundOnMouseDown').load();
    				document.getElementById('soundOnMouseDown').play();
    			} else {
    				$soundOnMouseDown = document.createElement("audio");
    				$soundOnMouseDown.id = "soundOnMouseDown";
    				$soundOnMouseDown.src = "/path/to/audio.mp3";
    				document.body.appendChild($soundOnMouseDown);
    				document.getElementById('soundOnMouseDown').load();
    				document.getElementById('soundOnMouseDown').play();
    			}
    		}, false);
    	}
    </script>
    Though I'll admit this seems to be an experiment in what you want. Essentially it's designed to set up an event listener (Only IE9+ for IE users, other browsers are fine) for the mousedown event. This event listener will check to see if an audio element exists and if not, it creates one with the sound file you want to play (and then of course plays the sound). If the element already exist it simply plays the sound. Keep in mind this might not be the best way to do what you want, depending on what sound you are trying to play. Without more information though this is all I can really give you.

  3. #3
    Join Date
    Mar 2014
    Location
    Lincolnshire
    Posts
    9
    Quote Originally Posted by Sup3rkirby View Post
    I have no idea what you are asking for in the second part (in regard to "retain the change in graphic file on mouseover and mousedown").
    Sorry, it was badly explained.

    There are three graphic files associated with each button. The first one is displayed when the mouse cursor is not over it, it changes to the second on mouseover and to the third on mousedown.

    I want that sequence to be preserved but with the addition that the third action, mouse down, also invokes a sound file (a wav).

    The existing script is in use at http://www.davidbridgen.com/electronics.htm

    My resident browsers are IE8, Chrome and Firefox. It is unlikely in the extreme that I will upgrade IE, which is the default and in which I test any changes I make to my site, and I don't have the expertise to fight incompatibilities.

    In preparation for what I want to do, which is with only one button, I have cropped the script as follows:



    Code:
     <!--[if gte IE 6]></OBJECT></NOSCRIPT><!--<![endif]-->
      <script language="javascript" type="text/javascript">
    <!-- Hide script from older browsers 
     
        if (document.images) {
          but1 = new Image
          but2 = new Image 
          but3 = new Image
          
    
    
    
          but1.src = "images/emergy.jpg"
          but2.src = "images/emergy_over.jpg"
          but3.src = "images/emergy_down.jpg"
          
    
        }
        else { 
          but1 = ""
          but2 = "" 
          but3 = ""
          
    	  
     
          document.btn = ""
        } 
     
        // End hiding script from older browsers -->
        </script>
    <p align="center">
    
    
    
    <a href="#" onmousedown="document.btn.src=but3.src"
     onmouseover="document.btn.src=but2.src"
     onmouseout="document.btn.src=but1.src"><img src="images/emergy.jpg" 
    border="0"
     alt="button" name="btn"></a></p>
    What do I need to add in order to additionally play the sound?

    I should explain that I rely on either Dreamweaver or a Namo web editor, or copied code which I harvest from either forums or established sites. html, java etc are all languages which I mostly don't understand but after some struggling I sometimes manage to modify them successfully.

  4. #4
    Join Date
    Mar 2014
    Location
    Lincolnshire
    Posts
    9
    vis--vis my last post a couple of minutes ago, I neglected to say that I want mousedown to simply play the sound file, nothing more.

    (I'm half asleep.)

  5. #5
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,034
    I do kind of hate that you said "My resident browsers are IE8 ...", but I'll try to work with it regardless. To be fair since you are using a .wav file, IE in general doesn't support this format through the <audio> tag so I've modified my code to use the <embed> tag as a fallback for IE.

    I feel I should also mention that what you want (playing a sound on the mousedown event) isn't exactly super user-friendly on the web. Granted things like this have gotten better over time but depending on the size of the file and the user's connection speed you can potentially create longer page loads (if audio is preloaded) or suffer delays from when the event fires and when the sound actually plays.
    HTML Code:
    <script>
    	var $audioFile = "/path/to/audio.wav"; // Set this to the audio file you want to play
    	var $buttonID = "myButton"; // Set this to the ID of the button you want to play sound
    	
    	function _PlayButtonSound() {
    		if(navigator.appVersion.indexOf("MSIE") != -1) {
    			if(document.getElementById('soundOnMouseDown') !== null && document.getElementById('soundOnMouseDown') !== undefined) {
    				document.getElementById('soundOnMouseDown').load();
    				document.getElementById('soundOnMouseDown').play();
    			} else {
    				$soundOnMouseDown = document.createElement("audio");
    				$soundOnMouseDown.id = "soundOnMouseDown";
    				$soundOnMouseDown.src = $audioFile;
    				$soundOnMouseDown.style = "height: 0; overflow: hidden; visibility: hidden;";
    				document.body.appendChild($soundOnMouseDown);
    				document.getElementById('soundOnMouseDown').play();
    			}
    		} else {
    			if(document.getElementById('soundOnMouseDown') !== null && document.getElementById('soundOnMouseDown') !== undefined) {
    				document.getElementById('soundOnMouseDown').play();
    			} else {
    				$soundOnMouseDown = document.createElement("embed");
    				$soundOnMouseDown.id = "soundOnMouseDown";
    				$soundOnMouseDown.src = $audioFile;
    				$soundOnMouseDown.style = "height: 0; overflow: hidden; visibility: hidden;";
    				document.body.appendChild($soundOnMouseDown);
    				document.getElementById('soundOnMouseDown').play();
    			}
    		}
    	}
    
    	(function(){
    		if(document.addEventListener) {
    			document.getElementById($buttonID).addEventListener("mousedown", _PlayButtonSound, false);
    		} else {
    	  	document.getElementById($buttonID).attachEvent("onmousedown", _PlayButtonSound);
    		}
    	})();
    </script>
    You just need to paste this somewhere near the bottom of your page before the closing </body> tag. There are 2 variables at the top of this script that you should edit. The first is the .wav file you want to play. The second is the ID of the button that is going to play sound. Looking at your code this means you do need to add id="myButton" (or any value if you update my script) to the button. I should also note that this is designed to apply the mousedown audio to one button, not multiple. If you need multiple buttons doing this then I would have to make some changes, but I avoided this initially because yet again older versions of IE complicate the scripting for such a thing. This is much bulkier than I'd like, however given your experience I find it tends to be better to write scripts that handle as much of the work as possible, to prevent any problems with implementation.

  6. #6
    Join Date
    Mar 2014
    Location
    Lincolnshire
    Posts
    9
    That's a lot more complicated than I had hoped.

    However, I have created a test page on which to try it, but it doesn't work.

  7. #7
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,034
    My apologies. I just noticed a mistake (in my checking for IE statement) so that probably caused a few problems. I also tested myself and made a few tweaks to get it working in IE. Unfortunately this only seems to get it working for IE9 and 10.
    HTML Code:
    <input type="button" id="myButton" value="Click for sound" />
    
    <script>
    	var $audioFile = "sound.wav"; // Set this to the audio file you want to play
    	var $buttonID = "myButton"; // Set this to the ID of the button you want to play sound
    	
    	function _PlayButtonSound() {
    		if(navigator.appVersion.indexOf("MSIE") == -1) {
    			if(document.getElementById('soundOnMouseDown') !== null && document.getElementById('soundOnMouseDown') !== undefined) {
    				document.getElementById('soundOnMouseDown').load();
    				document.getElementById('soundOnMouseDown').play();
    			} else {
    				$soundOnMouseDown = document.createElement("audio");
    				$soundOnMouseDown.id = "soundOnMouseDown";
    				$soundOnMouseDown.src = $audioFile;
    				$soundOnMouseDown.style = "height: 0; overflow: hidden; visibility: hidden;";
    				document.body.appendChild($soundOnMouseDown);
    				document.getElementById('soundOnMouseDown').play();
    			}
    		} else {
    			if(document.getElementById('soundOnMouseDown') !== null && document.getElementById('soundOnMouseDown') !== undefined) {
    				document.getElementById('soundOnMouseDown').play();
    			} else {
    				$soundOnMouseDown = document.createElement("embed");
    				$soundOnMouseDown.id = "soundOnMouseDown";
    				$soundOnMouseDown.src = $audioFile;
    				$soundOnMouseDown.height = "0";
    				$soundOnMouseDown.style = "height: 0; overflow: hidden; visibility: hidden;";
    				document.body.appendChild($soundOnMouseDown);
    			}
    		}
    	}
    
    	(function(){
    		if(document.addEventListener) {
    			document.getElementById($buttonID).addEventListener("mousedown", _PlayButtonSound, false);
    		} else {
    	  	document.getElementById($buttonID).attachEvent("onmousedown", _PlayButtonSound);
    		}
    	})();
    </script>
    The biggest thing about what you are requesting is that it isn't something that's optimized in the way you want. Generally having sound effects applied to elements on the page has always been reserved for flash. Trying to apply something like this to a standard HTML page will inevitable create issues when you run across different browsers (mainly older versions of IE). This implementation could be a lot smaller, but it would require more work on your end to properly add this to your page/site.

    I'll have to do some digging for IE7/8 (and oddly enough, IE11) but it honestly might not even be plausible (or realistic). There are a lot of similar media-related things that simply require you use flash when you fall back to IE8 and lower. This may well be one of those things.

  8. #8
    Join Date
    Mar 2014
    Location
    Lincolnshire
    Posts
    9
    I appreciate the time and trouble that you are taking, thank you.

    I will try the modified code tomorrow.

    Incidentally, if what I want to achieve can be done in html, as you imply, I would like to try that too.

  9. #9
    Join Date
    Mar 2014
    Location
    Lincolnshire
    Posts
    9

    Unhappy

    In view of that fact that you say the modified code works only in IE9 or 10, I think I will have to forget what I want to do.

    The an href to existing code:

    Code:
    <div align="center"><a href= "sounds/klax short.mp3"onmousedown="document.btn.src=but3.src"
     onmouseover="document.btn.src=but2.src"
     onmouseup="document.btn.src=but2.src"
     onmouseout="document.btn.src=but1.src"><img src="images/emy.jpg" 
    border="0"
     alt="button" name="btn"></a></p>
    plays it ok, but the player is displayed too. Now, if there was a way to make it invisible .....

  10. #10
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,034
    Linking directly to the audio file like that will be entirely browser dependent (unless you have something else going on in the code?). So essentially how the sound plays when clicking that button will change depending on which browser you are in. And actually I do wonder what you mean by "the player is displayed too". As far as I know linking an audio file in the href of a link should actually open the file. In modern browsers the file can be played back directly in the browser, however you would no longer be on the same page. So you can't really 'hide' that player because it's no longer your webpage and you don't have access to it.

    However I do bring so more directly useful news, which would be that I did make some slight adjustments to my code and it does work in IE7-IE10. Funny thing is about IE11... the navigator object seems to act like a mozilla browser. I'll have to do a little more digging but for some reason IE11 isn't acting like IE and without a proper way to identify it I can't make it work. In all fairness the issue is .wav support in IE. The <audio> element doesn't support .wav in IE (but it does in other modern browsers). If you are using an .mp3 then this script will work in IE7-IE11, however older version of Firefox might have trouble (though to be fair Firefox tends to keep itself updated so it shouldn't be a problem). I'm not sure how you feel about Opera but it will be the odd-man-out with .mp3.

    HTML Code:
    <input type="button" id="myButton" value="Click for sound" />
    
    <script>
    	var $audioFile = "sound.wav"; // Set this to the audio file you want to play
    	var $buttonID = "myButton"; // Set this to the ID of the button you want to play sound
    	
    	function _PlayButtonSound() {
    		if(navigator.appVersion.indexOf("MSIE") == -1) {
    			if(document.getElementById('soundOnMouseDown') !== null && document.getElementById('soundOnMouseDown') !== undefined) {
    				document.getElementById('soundOnMouseDown').load();
    				document.getElementById('soundOnMouseDown').play();
    			} else {
    				$soundOnMouseDown = document.createElement("audio");
    				$soundOnMouseDown.id = "soundOnMouseDown";
    				$soundOnMouseDown.src = $audioFile;
    				$soundOnMouseDown.style = "height: 0; overflow: hidden; visibility: hidden;";
    				document.body.appendChild($soundOnMouseDown);
    				document.getElementById('soundOnMouseDown').play();
    			}
    		} else {
    			if(document.getElementById('soundOnMouseDown') !== null && document.getElementById('soundOnMouseDown') !== undefined) {
    				document.getElementById('soundOnMouseDown').play();
    			} else {
    				var $soundOnMouseDown = document.createElement("embed");
    				$soundOnMouseDown.id = "soundOnMouseDown";
    				$soundOnMouseDown.src = $audioFile;
    				$soundOnMouseDown.height = "0";
    				//$soundOnMouseDown.style = "height: 0; overflow: hidden; visibility: hidden;";
    				document.body.appendChild($soundOnMouseDown);
    			}
    		}
    	}
    
    	(function(){
    		if(document.addEventListener) {
    			document.getElementById($buttonID).addEventListener("mousedown", _PlayButtonSound, false);
    		} else {
    	  	document.getElementById($buttonID).attachEvent("onmousedown", _PlayButtonSound);
    		}
    	})();
    </script>

  11. #11
    Join Date
    Mar 2014
    Location
    Lincolnshire
    Posts
    9
    When I depress the button when the opage is displayed in IE8, it opens up Windows Media Player.

    I just tried it in Firefox, which opens up a new page with VLC player.

    Let's see what happens in Chrome ... ah, it plays the file as soon as the page appears.

    Neither is acceptable.

    I have the file in both wav and mp3 formats. I am using the mp3 for testing.

    How can I incorporate your code into that which I put in my last post?

  12. #12
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,034
    This seems to be getting more complicated by the minute. I feel as though you have certain settings/plugins that have to be affecting what's going on (or it could be implementation). None of those things are occurring for me in Chrome, Firefox or IE7-IE11. Pressing the button merely plays a sound and no players become visible at any point.

    And sadly I feel that even if I tweaked my code further and you claimed it worked for you, it's impossible to ensure it will work for everyone else. Frankly Flash is best suited for multimedia on a webpage currently, but even then you will hit bumps. This isn't really something that webpages were designed to be used for (yet) and it's definitely not in the w3c spec. Ultimately the point I'm trying to get across is any 'solution' to this will not be perfect and it most certainly will not be pretty.


    Using the code you provided I'll give you a sample HTML file that you can use to test. Assuming you place this file in the directory needed so the mp3 and image urls are valid, there should need to be absolutely no changes to the source code in order for this to work. I honestly am rather curious as to how those 3 things occurred for you given how the code I provided.
    HTML Code:
    <!doctype html>
    <html>
    <head>
      <title>Audio on Mousedown Event</title>
    </head>
    <body>
    
    <div style="text-align: center;">
    	<a id="myButton" onmousedown="document.btn.src=but3.src" onmouseover="document.btn.src=but2.src" onmouseup="document.btn.src=but2.src"  onmouseout="document.btn.src=but1.src"><img src="images/emy.jpg" border="0" alt="button" name="btn"></a>
    </div>
    
    <script>
    	var $audioFile = "sounds/klax short.mp3"; // Set this to the audio file you want to play
    	var $buttonID = "myButton"; // Set this to the ID of the button you want to play sound
    	
    	function _PlayButtonSound() {
    		if(navigator.appVersion.indexOf("MSIE") == -1) {
    			if(document.getElementById('soundOnMouseDown') !== null && document.getElementById('soundOnMouseDown') !== undefined) {
    				document.getElementById('soundOnMouseDown').load();
    				document.getElementById('soundOnMouseDown').play();
    			} else {
    				$soundOnMouseDown = document.createElement("audio");
    				$soundOnMouseDown.id = "soundOnMouseDown";
    				$soundOnMouseDown.src = $audioFile;
    				$soundOnMouseDown.style = "height: 0; overflow: hidden; visibility: hidden;";
    				document.body.appendChild($soundOnMouseDown);
    				document.getElementById('soundOnMouseDown').play();
    			}
    		} else {
    			if(document.getElementById('soundOnMouseDown') !== null && document.getElementById('soundOnMouseDown') !== undefined) {
    				document.getElementById('soundOnMouseDown').play();
    			} else {
    				var $soundOnMouseDown = document.createElement("embed");
    				$soundOnMouseDown.id = "soundOnMouseDown";
    				$soundOnMouseDown.src = $audioFile;
    				$soundOnMouseDown.height = "0";
    				//$soundOnMouseDown.style = "height: 0; overflow: hidden; visibility: hidden;";
    				document.body.appendChild($soundOnMouseDown);
    			}
    		}
    	}
    
    	(function(){
    		if(document.addEventListener) {
    			document.getElementById($buttonID).addEventListener("mousedown", _PlayButtonSound, false);
    		} else {
    	  	document.getElementById($buttonID).attachEvent("onmousedown", _PlayButtonSound);
    		}
    	})();
    </script>
    
    </body>
    </html>

  13. #13
    Join Date
    Mar 2014
    Location
    Lincolnshire
    Posts
    9
    In IE8 nothing happens. No sound played, no change of button graphic.

    However, in both Chrome and Firefox the sound is played but the button graphic doesn't change.

    Thank you for your perseverance and patience.

  14. #14
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,034
    Are you using the native IE8 browser or a newer version, set in compatibility mode? I ask because I'm curious as to if there's an error taking place and I'm not really sure about error logging or the developer console in IE8 (I didn't start using it in IE until version 9). A quick Google search tells me it should behave similarly, in which case you would press F12 on the page and then refresh the page.

    There should be some sort of 'console' tab that will display any javascript errors as they occur. So I'd like to know of any errors that are occurring on your page in IE8, either when the page loads or when you click the button. Since I'm actually using IE11 in compatibility mode for IE8 it's possible that has skewed the behavior for me, eliminating the error you are getting.

  15. #15
    Join Date
    Mar 2014
    Location
    Lincolnshire
    Posts
    9
    IE8 has the latest updates and it goes to automatically - a notice pops up stating that it has done so because of a problem.

    Not experienced with or knowledgeable about the developer console, but I have saved the script it displayed when I clicked on the script button and I took a screen dump of the console so that you can see the errrors reported on its right hand side.

    Code:
    <!doctype html>
    <html>
    <head>
      <title>Audio on Mousedown Event</title>
    </head>
    <body>
    
    <div style="text-align: center;">
    	<a id="myButton" onmousedown="document.btn.src=but3.src" onmouseover="document.btn.src=but2.src" onmouseup="document.btn.src=but2.src"  onmouseout="document.btn.src=but1.src"><img src="images/emy.jpg" border="0" alt="button" name="btn"></a>
    </div>
    
    <script>
    	var $audioFile = "sounds/klax short.mp3"; // Set this to the audio file you want to play
    	var $buttonID = "myButton"; // Set this to the ID of the button you want to play sound
    	
    	function _PlayButtonSound() {
    		if(navigator.appVersion.indexOf("MSIE") == -1) {
    			if(document.getElementById('soundOnMouseDown') !== null && document.getElementById('soundOnMouseDown') !== undefined) {
    				document.getElementById('soundOnMouseDown').load();
    				document.getElementById('soundOnMouseDown').play();
    			} else {
    				$soundOnMouseDown = document.createElement("audio");
    				$soundOnMouseDown.id = "soundOnMouseDown";
    				$soundOnMouseDown.src = $audioFile;
    				$soundOnMouseDown.style = "height: 0; overflow: hidden; visibility: hidden;";
    				document.body.appendChild($soundOnMouseDown);
    				document.getElementById('soundOnMouseDown').play();
    			}
    		} else {
    			if(document.getElementById('soundOnMouseDown') !== null && document.getElementById('soundOnMouseDown') !== undefined) {
    				document.getElementById('soundOnMouseDown').play();
    			} else {
    				var $soundOnMouseDown = document.createElement("embed");
    				$soundOnMouseDown.id = "soundOnMouseDown";
    				$soundOnMouseDown.src = $audioFile;
    				$soundOnMouseDown.height = "0";
    				//$soundOnMouseDown.style = "height: 0; overflow: hidden; visibility: hidden;";
    				document.body.appendChild($soundOnMouseDown);
    			}
    		}
    	}
    
    	(function(){
    		if(document.addEventListener) {
    			document.getElementById($buttonID).addEventListener("mousedown", _PlayButtonSound, false);
    		} else {
    	  	document.getElementById($buttonID).attachEvent("onmousedown", _PlayButtonSound);
    		}
    	})();
    </script>
    
    </body>
    </html>
    I think the line numbers referred to in the errors might be different from the code; I'm losing track of what I copied etc etc.

    Ah, there's no facility to include or attach an image file here. Let's see if I can copy the information from the errors section of the console .....

    Strange, there were five or six lines in the error window before, but this time there was only one.

    It said 'but2' is undefined Audio on Mousedown event.htm, line 9 character 72


    Does this help?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles