Skip to content Skip to sidebar Skip to footer
Home / Audio / Css / Html / Image / Javascript

Javascript Sound Start/stop And Image Change

Post a Comment
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 loope

Solution 1: 

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

            functionchange() {
                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><imgsrc="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>

Post a Comment for "Javascript Sound Start/stop And Image Change"