Make the MP3's stop with either a click or a new button [Archive]

Jay Dog

12-02-2013, 10:27 AM

Hi,

I know this is a problem that has been discussed on here before but I've tried looking at the replies to previous posts and can't get mine to work.

Basically I want a picture of children as a hotspot and when you click on their faces it plays an MP3...

<html>
<head>
<bgsound src="#" id="soundeffect" loop=1 autostart="false" />

<script type="text/javascript">

/***********************************************
* JavaScript Sound effect- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

var soundfile="http://www.bigwood.nottingham.sch.uk/VLE/audio_player/song1.mp3" //path to sound file, or pass in filename directly into playsound()

var soundfile="http://www.bigwood.nottingham.sch.uk/VLE/audio_player/song2.mp3" //path to sound file, or pass in filename directly into playsound()

var soundfile="http://www.bigwood.nottingham.sch.uk/VLE/audio_player/song3.mp3" //path to sound file, or pass in filename directly into playsound()

var soundfile="http://www.bigwood.nottingham.sch.uk/VLE/audio_player/song4.mp3" //path to sound file, or pass in filename directly into playsound()

var soundfile="http://www.bigwood.nottingham.sch.uk/VLE/audio_player/song5.mp3" //path to sound file, or pass in filename directly into playsound()

function playsound(soundfile){
if (document.all && document.getElementById){
document.getElementById("soundeffect").src="" //reset first in case of problems
document.getElementById("soundeffect").src=soundfile
}
}

function bindsound(tag, soundfile, masterElement){
if (!window.event) return
var source=event.srcElement
while (source!=masterElement && source.tagName!="HTML"){
if (source.tagName==tag.toUpperCase()){
playsound(soundfile)
break
}
source=source.parentElement
}
}

</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>poems test</title>
</head>
<body>

<img src="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2013/library/sooty.jpg" width="338" height="220" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="poly" coords="332,189,313,90,327,42,285,12,249,35,252,80,246,98,235,167,238,203,316,200" onClick="playsound('http://www.bigwood.nottingham.sch.uk/VLE/audio_player/song1.mp3')">

<area shape="poly" coords="213,188,194,89,208,41,166,11,130,34,133,79,127,97,116,166,119,202,197,199" onClick="playsound('http://www.bigwood.nottingham.sch.uk/VLE/audio_player/song2.mp3')">

<area shape="poly" coords="102,194,83,95,97,47,55,17,19,40,22,85,16,103,5,172,8,208,86,205" onClick="playsound('http://www.bigwood.nottingham.sch.uk/VLE/audio_player/song3.mp3')">
</map>

</body>
</html>

but I weant it to stop if I click on a button...

OR would it be easier to have it so that you have a Mouseover as a play option and the click as a stop / mute option?

OR... have the onClick option on the childrens faces but another OnClick on a button that stops the sound?

I've looked at some of the sample solutions on similar queries but not maneged to get mine to work.

Thanks,

Jay Dog

Beverleyh

12-02-2013, 11:58 AM

I'm not sure which script you're using (you've forgotten the link) but from a usability angle I think starting the songs with a click would be better than a mouseover - folks with motor skill issues, or even just under the steam of an enthusiastic swipe, will likely produce an undesirable cacophony of noise as they move the mouse over a sea of faces.

Similarly, an obvious onclick "stop" button I think would also be useful.

Not wanting to dissuade you from what you have so far, but an alternative script option could be SoundManager2: http://www.schillmania.com/projects/soundmanager2/
A bit more info here: http://www.dynamicdrive.com/forums/showthread.php?49395-Looking-for-a-sound-script-that-does-this&p=209218#post209218

Jay Dog

12-02-2013, 04:17 PM

Thanks Bev...

the link is here http://www.bigwood.nottingham.sch.uk/curriculum/library/events-and-visits/swimming-in-rhythm/speaking-poems

The image and the mp3's are not the final versions, I haven't taken the pics of the kids or recorded them but that's what I'm aiming for (the top version)

I'll put a simple blurb about 'Click on a pupils face to hear their poem'

but a STOP button would be a good idea, but I simply don't know how to do that.

I'll have a play with script before end of day but if you do know and it only takes 5 mins to type it that'd be really appreciated. Thanks

Jay Dog