Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    55
    Thanks
    26
    Thanked 0 Times in 0 Posts

    can embed tag control multiple site sound effects?

    I have an 'OFFLINE' site used to help me playtest a boardgame I made.

    The site has many sound effects as form fields and other things are accessed.

    I wanted to be able to have an 'on-page' volume control for my friends to use (just because... right?) when they help me playtest.

    I tried experimenting with the <embed> tag (which apparently with html5 is slightly different now).

    Anyways, can the embed tag work for me to handle just the volume of all those sound effects? And if so... how.

    Thanks for any help. Also, if it means anything, my audio bits are either .wav or .mp3.

    Cheers all

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,462
    Thanks
    0
    Thanked 633 Times in 623 Posts
    If you are using HTML5 then you should be using the <audio> tag to attach sound files into web pages.

    If you are using HTML 4 then you should be using the <object> tag to attach sound files into a web page.

    The <embed> tag is only needed to support Netscape 4 and earlier.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    Mindphaser (03-07-2013)

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by Mindphaser View Post
    Anyways, can the embed tag work for me to handle just the volume of all those sound effects? And if so... how.
    Here's some HTML5 code to control the volume of a single audio stream. I'd imagine that if you had multiple audio streams (i.e., sound effects), you'd use the same techniques, but also iterate over each stream to adjust its volume.

    Note that I had to add a lot of extra code in there to accommodate missing <input type="range"> support in Firefox. The volume can be changed in that browser too, but the process is more tedious as it requires typing a value. (I guess I could have used radio buttons for Firefox, but I'm about ready for bed.) Optimal support is found in Chrome, Internet Explorer, and Opera although they all have substantially different appearances, particularly IE10 whose range bar is Metro-themed.

    Code:
    <!doctype html>
    <html lang="en-US">
    	<head>
    		<title>Demo Document</title>
    		<style>
    			* { margin: 0; }
    			html { margin: 2em; text-align: center; }
    			label { font-weight: bold; }
    			input { vertical-align: middle; }
    		</style>
    	</head>
    	<body>
    		<div id="div_element">
    			<audio id="audio_element" autoplay>
    				<source type="audio/ogg" src="song.ogg">
    				<source type="audio/mp3" src="song.mp3">
    			</audio>
    			<label for="input_element">Volume</label> <span id="min_value">0%</span> <input type="range" id="input_element" min="0" max="100" step="10" value="100"> <span id="max_value">100%</span>
    			<script>
    				var audio_element = document.getElementById("audio_element");
    				var input_element = document.getElementById("input_element");
    				var input_volume = null;
    				var min_value = document.getElementById("min_value");
    				var max_value = document.getElementById("max_value");
    				function adjust_volume() {
    					input_volume = parseFloat(input_element.value) / 100;
    					if (input_volume > 1) {
    						input_volume = 1;
    						input_element.value = "100";
    					}
    					else if (input_volume < 0) {
    						input_volume = 0;
    						input_element.value = "0";
    					}
    					audio_element.volume = input_volume;
    				}
    				input_element.addEventListener("change", adjust_volume, false);
    				if (input_element.type === "text") {
    					div_element.removeChild(min_value);
    					max_value.firstChild.data = "%";
    					input_element.size = "3";
    					var button_element = document.createElement("button");
    					button_element.appendChild(document.createTextNode("Adjust Volume"));
    					div_element.insertBefore(button_element, max_value.nextSibling.nextSibling);
    					button_element.addEventListener("click", adjust_volume, false);
    				}
    			</script>
    		</div>
    	</body>
    </html>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    Mindphaser (03-08-2013)


  •  

    Posting Permissions

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