CODEWITHSUNDEEP
javascripthtmlcssimageaudio
Peter
Peter

Reputation: 311

Javascript Sound Start/Stop and Image Change

I am new to JS and I have a pretty simple-seeming problem.

I want to have a small image that when clicked changes to a different image and at the same time begins playing a looped sound file. When the image is clicked a second time it changes back to the original image and also stops the sound file.

You can think of it as a button that says "start". when "start" is clicked it loops the sound and changes to "stop" and when "stop" is clicked it goes back to start and the sound ceases playing.

I've gotten as far as creating none-displayed checkbox inside of a label which is a square that when checked plays sound and when unchecked stops sound. Problem is I can't get the checkbox to change into different images with "check", "uncheck".

I've also got some code that has a link change images, but I cannot figure out how to make it play the sound.

SO basically i need to combine these two things. BUT I CAN'T figure out how. And I've been googling for the past two days nonstop but cannot find a clearcut and simple answer.

It may help to know that I plan on having many of these small clickable images on the same page, so the Javascript needs to be able to be light but effect all of the links or divs or whatever they are in the end.

Sorry for such a long question. Anybody?

Thanks in advance!

Upvotes: 0

Views: 3009

Answers (1)

OdinX
OdinX

Reputation: 4211

<html>
    <head>
        <script type="text/javascript">
            var pos = 0
            var sId = 'sound';

            function change() {
                if(pos == 0) {
                    pos = 1;
                    document.getElementById('btn').src="http://www.buzzingup.com/wp-content/uploads/2011/07/stop.png";

                    var e = document.createElement('embed');
                    e.setAttribute('src','beep.mp3');
                    e.setAttribute('id',sId);
                    e.setAttribute('hidden','true');
                    e.setAttribute('autostart','true');
                    e.setAttribute('loop','true');

                    document.body.appendChild(e);
                } else {
                    pos = 0;
                    document.getElementById('btn').src="http://geekoffices.com/wp-content/uploads/2011/07/start-button-300x299.png";
                    document.body.removeChild(document.getElementById(sId));
                }
            }
        </script>
    </head>
    <body>
        <img src="http://geekoffices.com/wp-content/uploads/2011/07/start-button-300x299.png" onClick="change()" id="btn" />
    </body>
</html>

How about that, I think it should work.

Edit: Here is an OO version that should do what you need:

<html>
    <head>
        <script type="text/javascript">
            function imageSwitch(_imgID,_imgStart,_imgStop,_soundFile) {
                this.imgID = _imgID;
                this.imgStart = _imgStart;
                this.imgStop = _imgStop;
                this.soundFile = _soundFile;

                this.pos = 0;
                this.e;

                this.change = function() {
                    if(this.pos == 0) {
                        this.pos = 1;
                        document.getElementById(this.imgID).src = this.imgStop;

                        this.e = document.createElement('embed');
                        this.e.setAttribute('src',this.soundFile);
                        this.e.setAttribute('id','sound'+this.imgID);
                        this.e.setAttribute('hidden','true');
                        this.e.setAttribute('autostart','true');
                        this.e.setAttribute('loop','true');

                        document.body.appendChild(this.e);
                    } else {
                        this.pos = 0;
                        document.getElementById(this.imgID).src = this.imgStart;
                        this.e.parentNode.removeChild(this.e);
                    }
                }
            }
        </script>
        <script type="text/javascript">
            var abc = new imageSwitch('btn1','http://geekoffices.com/wp-content/uploads/2011/07/start-button-300x299.png','http://www.buzzingup.com/wp-content/uploads/2011/07/stop.png','beep.mp3');
            var def = new imageSwitch('btn2','http://geekoffices.com/wp-content/uploads/2011/07/start-button-300x299.png','http://www.buzzingup.com/wp-content/uploads/2011/07/stop.png','beep.mp3');
        </script>
    </head>
    <body>
        <img src="http://geekoffices.com/wp-content/uploads/2011/07/start-button-300x299.png" onClick="abc.change()" id="btn1" />
        <img src="http://geekoffices.com/wp-content/uploads/2011/07/start-button-300x299.png" onClick="def.change()" id="btn2" />
    </body>
</html>

Upvotes: 1

Related Questions