Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Music on/off advice 1

Status
Not open for further replies.
Christylh8

Christylh8

IS-IT--Management
Jul 14, 2002
25
0
0
US
I've never fooled with embedded audio in either my personal or professional ventures, but I have a customer who wants a looped .wav file in his HTML presentation.

I need to know a quick and easy way of turning the .wav off and on from a simple text blurb. I've noticed that most websites who give viewers the option to not have sound simply send them to a relected site with no embedded audio.

Is there not an easier way to do this?

Basically my text in the corner of every page looks like:
Music ON|OFF

Any way to work through this? Your help is much appreciated! Thanks!
 
Sort by date Sort by votes
This little javascript will insert sound in your page. You can also just use the embed tag. Just make sure you set the attribute "hidden" to false.It will show a control consol so the user can stop the sound.
Code: 
<html><head>
<script>
function play() 
   { 
          var sound1 = document.createElement('embed'); 
       
      with(sound1) 
      { 
         setAttribute('src','your Mp3 or wav'); 
         setAttribute('autostart', 'true'); 
         setAttribute('hidden', [COLOR=red]'false'[/color]);
	 setAttribute('loop', '0'); 
      } 
       
     	document.body.appendChild(sound1);
}
</script>
</head>
<body onload = "play()">Blog
</body>
</html>
Hope this helps

Glen
 
Upvote 0 Downvote
After reading your post more closely this would bew better.
Code: 
<html><head>
<script>
function play() 
   { 
          var sound1 = document.createElement('embed'); 
       
      with(sound1) 
      { 
         setAttribute('src','Music/Intro.mp3'); 
        setAttribute('autostart', 'true'); 
         setAttribute('hidden', 'false');
	 setAttribute('loop', 'true'); 
	setAttribute('width', '45');
	setAttribute('height', '25');
      } 
       
     	document.body.appendChild(sound1);
}
</script>
</head>
<body >Blog<br><br>
<a href = "#" onclick = "play()">Music On</a>
</body>
</html>
then the consoll would allow the user to turn the sound off again.

Glen
 
Upvote 0 Downvote
Glenmac,

I can see that it would work incredibly well. I had been hoping that there was some quick HTML fix for it, but the more I investigated the more I knew it would involve Javascript.

What do I have to change to the code to make it work in reverse? [Turn the music off instead of on?]

Thanks so much!

Christy

 
Upvote 0 Downvote
change the body line:
Code: 
<body [COLOR=red]onload="play()"[/color]>

I'd advise adding in a stop button though - any embedded audio (especially looped audio) almost instantly drives me away from a web page. The first hint of sound makes me look for that X.

<marc> i wonder what will happen if i press this...[ul][li]please tell us if our suggestion has helped[/li][li]need some help? faq581-3339[/li][/ul]
 
Upvote 0 Downvote
As far as I know the only way to stop the audio is from the control panel or set the loop to false for only one play. That's why you have to have the attribute hidden set to false. The smallest you can make the control panel and still have the stop button visible in IE using Media Player as the application is as below. For different sound player applications and browsers you will have to do tests.
Code: 
    setAttribute('hidden', 'false');
    setAttribute('width', '45');
    setAttribute('height', '25');
If anyone else knows of a way to stop the playing of the file please help. I've tried;
Code: 
<html><head>
<script>
function play() 
   { 
          var sound1 = document.createElement('embed'); 
       
      with(sound1) 
      { 
         setAttribute('src','YourSound.mp3'); 
        setAttribute('autostart', 'true'); 
         setAttribute('hidden', 'false');
	 setAttribute('loop', 'true'); 
	setAttribute('width', '45');
	setAttribute('height', '25');
	setAttribute('id', 'soundA');
      } 
       
     	document.body.appendChild(sound1);
}
function stop()
{
var soundS = document.getElementById('soundA')
      with(soundS) 
      { 
       setAttribute('loop', 'false'); 
      } 
}
</script>
</head>
<body >Blog<br><br>
<a href = "#" onclick = "play(); ">play</a>
<a href = "#" onclick = "stop(); ">stop</a>
</body>
</html>
with no luck.

Glen
 
Upvote 0 Downvote
Most of audio-capable embeds support methods play() and stop():

Code: 
<script language="javascript">
function blah()
{	oSnd = document.getElementById( "test_sound" );
	document.getElementById( "test_control" ).checked? oSnd.play(): oSnd.stop();
}
</script>
<embed src="test.wav" hidden="true" id="test_sound" loop="true" autostart="false">
<input type="checkbox" id="test_control" onclick="blah();">Turn on audio

Another way is to switch src between audio file and "". This should also work for BGSOUND tag (IE4 and higher).
 
Upvote 0 Downvote
I tried to put the functions into the format Christyih wanted and succeeded using this code.
Code: 
<html><head>
<script>
function playM() 
             { 
        var sound1 = document.createElement('embed'); 
       
      with(sound1) 
                 { 
       setAttribute('src','Test.mp3'); 
      setAttribute('autostart', 'true'); 
        setAttribute('hidden', 'true');
  	 setAttribute('loop', 'true'); 
   	 setAttribute('width', '0');
  	 setAttribute('height', '0');
   	 setAttribute('id', 'soundA');
        } 
       
        document.body.appendChild(sound1);
}
function stp()
{
var soundS = document.getElementById('soundA');
soundS.stop()
}

//function ply(){
//var strt = document.getElementById('soundA');
//strt.play();
//}

</script>
</head>
<body >Blog<br><br>
<!--<embed src="Test.mp3" hidden="true" id="soundA" loop="true" autostart="false" width = "0" height= "0">-->
<p>Music&nbsp;<a href = "#" onclick = "playM(); ">on</a>&nbsp;&nbsp;|&nbsp;
<a href = "#" onclick = "stp(); ">off</a>
</p>
</body>
</html>
As you can see I also tried using the embed tag in the body of the document. I discarded that method because it took up room in the document no matter that I gave it the attributes width and height of "0" and hidden true. By using createElement and appendChild it didn't take any room. I'm confused, is it because the document is loaded before the appendChild() function is performed ? All help greatly appreciated.



Glen
 
Upvote 0 Downvote
I have no problems w/ EMBED hidden="true" (IE6, firefox). Try with CSS stuff - display: none;.
Note for my example: to turn sound initially on set autostart="true" and checbox to "checked".

glenmac: in function playM() first check if embed already exists. If it does, don't appendChild().

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
215
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
64
lmcate
lmcate
lmcate
  • Locked
  • Question
Create a Expand/Collapse FAQ Accordion, Collapse other on Click 1
Replies
2
Views
178
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
214
spamjim
spamjim
waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
81
jjgupta915
jjgupta915

Part and Inventory Search

Sponsor

Back
Top