Javascript声音开始/停止和图像更改

我是JS的新手，我有一个非常简单的问题。Javascript声音开始/停止和图像更改

我想要一个小图像，点击时变成不同的图像，同时开始播放循环声音文件。当图像被第二次点击时，它会变回原始图像并停止声音文件。

你可以把它想象成一个说“开始”的按钮。当点击“开始”时，它会循环播放声音并更改为“停止”，当单击“停止”时它会返回开始并停止播放声音。

我已经得到尽可能创建没有显示的复选框内的标签是一个正方形，当选中时播放声音和未检查停止声音。问题是我无法通过“检查”，“取消”使复选框变为不同的图像。

我也得到了一些链接更改图像的代码，但我无法弄清楚如何让它播放声音。

所以基本上我需要结合这两件事情。但我无法弄清楚如何。过去两天我一直在不停地Google搜索，但找不到明确而简单的答案。

它可能有助于知道我计划在同一页面上显示许多这些可点击的小图片，因此Javascript需要能够轻松，但最终会影响到所有链接或div或他们到底是什么。

对不起，这么长的问题。任何人？

在此先感谢！

来源

2011-11-30 Peter

你有任何代码，你可以分享？这会让我们更容易帮助你。 – zik

<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>

那么，我认为它应该工作。

编辑： 这是一个面向对象的版本，应该做你需要的东西：

<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>

来源

2011-12-01 10:35:46 vimist

谢谢首席 - 这完美适用于涉及1图像的应用程序，我感谢您为我工作。我会逐行浏览代码，这样我就可以真正理解这里发生了什么。 – Peter

对不起，意味着添加到我的回复，但显然返回键意味着添加评论，而不是新的段落（新的堆栈o）...无论如何，对于我的应用程序，我试图在同一页上做所有体现多个图像这个“改变（）”，但都是不同的，即不同的声音文件，不同的图像。有没有一种紧凑的方式来编写JavaScript来轻松完成这个任务？我再次感谢你的回应，并认为你太棒了。我可能会继续前进，并具有许多相同的功能，或尝试自行找出别的东西。再次感谢！ – Peter

更新 - 我基本上只复制了函数并改变了一些属性，即function（） - > functionb（），'btn'--->'btnb'等等。最后，我打算在页面上使用这些代码中的大约40-50个，这样代码会非常臃肿，但是它完成了这项工作。这个网站可能不会上线，更多的是一个实验，所以不应该是一个太大的问题。 – Peter

Javascript声音开始/停止和图像更改

回答

相关问题