Mute audio

[jester]

Hello,

I have a website that when visited, automatically starts a midi or wav file. I would like to add a MUTE icon or button for visitors to use if preferred. If you know of any code or script that would enable such a feature, it would be greatly appreciated.

Thanks

[Twey]

It's a bad idea to have music start on entry anyway. Use a "play" button.
<embed id="mySound" src="mySound.mid" loop="false" autostart="false" hidden="true">
<button onclick="document.getElementById('mySound').play();">Play</button>
<button onclick="document.getElementById('mySound').stop();">Stop</button>

[jscheuer1]

Twey, I'm shocked! That is an IE only solution! For what it is, elegant though. Anyways, if jester wants something a bit more robust, he should check out this thread (http://www.dynamicdrive.com/forums/showthread.php?t=6796).

[Twey]

Really? :eek: Shows how much I use sound in sites! I read a page that said that was a Netscape solution that would now work with IE too. Last time I use that one!

[jscheuer1]

Really? :eek: Shows how much I use sound in sites! I read a page that said that was a Netscape solution that would now work with IE too. Last time I use that one!

Don't feel too bad, it used to work in NS. I think it may still work in NS and even perhaps FF if there are no audio plugins added like QT, etc.

[jscheuer1]

I've researched this sound business a bit more and Twey's method is better than I thought. But, the buttons need to be like so:


<button onclick="document.getElementById('mySound').Play();">Play</button>
<button onclick="document.getElementById('mySound').Stop();">Stop</button>

Capitalization counts in Mozilla and Opera.

Added later - Oh, and I just discovered that Opera needs the enablejavascript="true" attribute set for the embed:


<embed id="mySound" src="mySound.mid" loop="false" autostart="false" hidden="true" enablejavascript="true">

[Twey]

Ah, phew. Gave me a scare there, John :p

[ger]

Hi, I'm new here, and trying to implement your music on/off (mute audio) html.

I thought I did it correctly, but evidently not! :)

Could you, would you, please look here and see what I'm doing wrong? I think it's got to do with the:
getElementById portion of it. Self taught, pls. excuse!!

.... forever indebted!!

ger

here is the page:

http://www.bayatlanticsymphony.org/intro3.htm

[Twey]

document.getElementById('music/bas3.mp3')Should be:
document.getElementById('mySound')I'm also self-taught, that's no excuse ;)

[mburt]

Umm... Just a question. How can you dynamically change the source of "mySound"?
This is what I came up with, but it doesn't work (as usual).

<embed id="mySound" src="mySound.mid" loop="false" autostart="false" hidden="true" enablejavascript="true">
<button onclick="document.getElementById('mySound').src = 'song2.mp3';">Switch Song</button>
<button onclick="document.getElementById('mySound').Play();">Play</button>

[jscheuer1]

To the casual eye, looks like it should work. Sometimes, setAttribute() is required for things like that:


<button onclick="document.getElementById('mySound').setAttribute('src', 'song2.mp3', 0);">Switch Song</button>


as the embed is a somewhat non-standard tag. Nesting the embed and replacing it with either the DOM or its parent's innerHTML object might be required. As I think about it, this is probably the best method. In IE 6+, the script for doing so should be external.

[mburt]

Also, in firefox (I use GetRight, which is affiliated with FF) it automatically assumes that the <embed> is a download, so everytime I try to play it it downloads instead?

[mburt]

Urgh...

document.getElementById("mySound").play()
Won't work externally. I can't find a solution

[jscheuer1]

Urgh...

document.getElementById("mySound").play()
Won't work externally. I can't find a solution

Just the code to change the source needs to be external and, I think we've already established that play() needs to be Play(). With that change, Play() should do the same thing externally that it does when on the page.

[Twey]

Also, in firefox (I use GetRight, which is affiliated with FF) it automatically assumes that the <embed> is a download, so everytime I try to play it it downloads instead?That sounds like a problem with GetRight to me. I'd suggest filing a bug report.

[mburt]

Ok. Can someone else test it for me with FF?
The link is here:
http://mburt.mb.funpic.org/player/media_player.htm

[jscheuer1]

Error: Unexpected end of file while searching for end of comment.
Source File: http://mburt.mb.funpic.org/player/media_player.htm
Line: 69



/*<body><div></di . . . t><!-- End Ad by funpic.org --></body>/*
</style>

[mburt]

Er... So it should be:

/*<body> ... */
?

[mburt]

But does the music itself work in FF?

[jscheuer1]

But does the music itself work in FF?

Nope, now we get:


Warning: Element referenced by ID/NAME in the global scope. Use W3C standard document.getElementById() instead.
Source File: http://mburt.mb.funpic.org/player/media_player.htm
Line: 74

and:


Error: document.getElementById("song1").Play is not a function
Source File: http://mburt.mb.funpic.org/player/media_player.htm
Line: 1

The first relates to:


var ext = data.value.substring(data.value.length-4,data.value.length)

but appears to only be a warning. However, if FF is misunderstanding what is meant by this line, it could be causing a problem. When I click on a song, that is when I get the other error. I'm not sure what line it really refers to.

Also, the funpic.org script may be conflicting and I get a similar error in IE 7.

[mburt]

Actually, I fixed all the warnings (document.getElementById errors), and it's saying .Play() or .play() isn't a function. Thanks John anyway, I appreciate the analasys. I'll keep trying I guess.

[jscheuer1]

Actually, I fixed all the warnings (document.getElementById errors), and it's saying .Play() or .play() isn't a function. Thanks John anyway, I appreciate the analasys. I'll keep trying I guess.

Yes, I was thinking ahead to that. You should go back and see if the original code outlined in this thread at post #6 (http://www.dynamicdrive.com/forums/showpost.php?p=26190&postcount=6), works. That will tell you if Play() works with embed still in FF (there have been several revisions to FF since this was first posted). I think another problem with your scheme may be that it is attempting to play the user's own music files via a web interface. This may bring with it security issues. Also I, like many users, have my music files in folders that aren't technically considered to be on the drive, even though they are there, they are a subset of the 'My Documents' folder, which doesn't appear to be on the C: or whatever drive it is on. I've seen this sort of thing cause problems before with web forms.

[mburt]

Yes, but anyone can delete that "My Music" folder causing errors. I could simply set an Iframe to that folder instead of any of this, but that would be illogical, seeings some people may not have this folder in My Documents. I'm thinking that it would cause too many errors just to have an embedded my music folder. I had a filter that would keep out unwanted extensions, so I didn't think I would matter if I let the user browse wherever he/she wants on their C drive. But you're right, Mozilla Firefox probably picks up a security issue. I think it's safe to say, that you can't reliably let a user play their own music on the internet via web browser.

[Victor]

Hello,

I'm new to this forum (and new to web developement too!) and thank you for all uselful advice & tips.
I try to use this script :
<embed id="mySound" src="music.mp3" loop="true" autostart="true" hidden="true" enablejavascript="true"></embed>
<button onclick="document.getElementById('mySound').Play();">Play</button>
<button onclick="document.getElementById('mySound').Stop();">Stop</button>

It works under Safari. In IE 6.0.2900 under XP SP2: the sound plays but no control over the button !

Thanks,

[boxxertrumps]

<embed id="mySound" src="music.mp3" loop="true" autostart="true" hidden="false" style="width:150px;height:50px;"></embed>
If you can avoid it, dont use JS to control things that can annoy the user.

[Victor]

I found another "simple" method using flash and there is a big avantage: flash compress the mp3 file from 3 Mb to 300 Kb.
Do you know another method to compress the mp3 file for we ?
btw, the sample code of flash is provided by :
http://www.developingwebs.net/flash/music_player.php

[Twey]

Any sound editor should be able to compress the music to different levels.

[Starlitedd]

I'm a webmaster for a Christian site that has added an audio reading of the daily poem to it's home page. Therefore, the audio file must be changed on a daily basis. I'm afraid I am also quite a neophyte to complicated html code, having used FrontPage to construct everything on this website over the years. I saw the code in message # 6, and I don't understand what to substitute in the code.

All the mp3 files for our daily poems are located on our website under a folder called SOUND BITES. So a typical html link to one of the mp3 files would be:
http://www.faithclub.org/SOUND BITES/When You Pray.mp3. How would I substitute this message into the code you posted in message #6?

[BLiZZaRD]

I've researched this sound business a bit more and Twey's method is better than I thought. But, the buttons need to be like so:


<button onclick="document.getElementById('mySound').Play();">Play</button>
<button onclick="document.getElementById('mySound').Stop();">Stop</button>

Capitalization counts in Mozilla and Opera.

Added later - Oh, and I just discovered that Opera needs the enablejavascript="true" attribute set for the embed:


<embed id="mySound" src="mySound.mid" loop="false" autostart="false" hidden="true" enablejavascript="true">


In the embed code the "src" is the "source" of the file.. where it is located... so you would change "mySound.mid" to the address such as "http://www.faithclub.org/SOUND BITES/When You Pray.mp3"

Another thing to look at is embedding sound properly in browsers. This is a huge deal because not all Browser handle things the same way (as pointed out by John in this post). If you are dealing strictly with mp3's then you can embed it using this code:



<object type="audio/mpeg" data="data/test.mp3" width="200" height="20">
<param name="src" value="data/test.mp3">
<param name="autoplay" value="false">
<param name="autoStart" value="0">
alt : <a href="data/test.mp3">test.mp3</a>
</object>


This will embed the player on the page, and allow the visitor to play and replay the sound if needed. Note to change the items in red to the source of the sound file. This code works in all major browsers and degrades to the text only ones (like Lynx).

There are otehr codes for .wav files and even .ogg, etc. You can see a full list here (http://joliclic.free.fr/html/object-tag/en/object-audio.html)

The main reason I tell you this is because <embed> is not a valid tag. So it is nice to have options :)

[Starlitedd]

I tried that code you gave me, (without any of the embed code or other code offered in message #6) and it resulted in the sound being played in a separate window, all by itself, when that area of the home pages is click ed on ...without being able to see the home page while it played. Also, the word "alt" appears on the page directly in front of the button.

I'm using Internet Explorer as my browser. Any suggestions? I truly do appreciate your expertise and all your help.

[BLiZZaRD]

Do you have a link to the page?