Javascript声音启动/停止和图像更改
我是JS新手，我有一个看起来很简单的问题 我想有一个小的图像，当点击改变到一个不同的图像，同时开始播放循环的声音文件。第二次单击图像时，图像会变回原始图像，并停止声音文件 你可以把它想象成一个按钮，上面写着“开始”。单击“开始”时，它会循环声音并变为“停止”，单击“停止”时，它会返回到开始，声音停止播放 我已经在标签内部创建了一个“无显示”复选框，该复选框是一个正方形，选中时播放声音，未选中时停止声音。问题是我不能让复选框变成不同的图像与“检查”，“取消选中” 我也有一些代码，有一个链接改变图像，但我不知道如何让它播放的声音 所以基本上我需要把这两件事结合起来。但我不知道怎么做。在过去的两天里，我一直在谷歌上搜索，但找不到一个清晰简单的答案 我计划在同一个页面上有许多这样的可点击的小图片，这可能会有助于了解，因此Javascript需要能够很轻，但最终会影响所有的链接或div或其他内容 很抱歉问这么长的问题。有人吗 提前谢谢Javascript声音启动/停止和图像更改,javascript,html,css,image,audio,Javascript,Html,Css,Image,Audio,我是JS新手，我有一个看起来很简单的问题 我想有一个小的图像，当点击改变到一个不同的图像，同时开始播放循环的声音文件。第二次单击图像时，图像会变回原始图像，并停止声音文件 你可以把它想象成一个按钮，上面写着“开始”。单击“开始”时，它会循环声音并变为“停止”，单击“停止”时，它会返回到开始，声音停止播放 我已经在标签内部创建了一个“无显示”复选框，该复选框是一个正方形，选中时播放声音，未选中时停止声音。问题是我不能让复选框变成不同的图像与“检查”，“取消选中” 我也有一些代码，有一个链接改变图像
<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>
var pos=0
var sId=‘声音’；
函数更改（）{
如果（位置==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'）；
文件.正文.附件（e）；
}否则{
pos=0；
document.getElementById（'btn'）。src=”http://geekoffices.com/wp-content/uploads/2011/07/start-button-300x299.png";
document.body.removeChild（document.getElementById（sId））；
}
}
<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>
函数图像开关（_imgID、_imgStart、_imgStop、_soundFile）{
this.imgID=\u imgID；
this.imgStart=\u imgStart；
this.imgStop=\u imgStop；
this.soundFile=\u soundFile；
此值为0.pos；
这是e；
this.change=函数（）{
如果（this.pos==0）{
这个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'）；
文件.正文.附件（本.e）；
}否则{
此值为0.pos；
document.getElementById（this.imgID）.src=this.imgStart；
this.e.parentNode.removeChild（this.e）；
}
}
}
var abc=新的图像开关（'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=新的图像开关（'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",；