Javascript 声音开始/停止和图像更改
Posted
技术标签:
【中文标题】Javascript 声音开始/停止和图像更改【英文标题】：Javascript Sound Start/Stop and Image Change 【发布时间】：2011-11-30 21:14:55 【问题描述】：我是 JS 新手，我遇到了一个看起来很简单的问题。
我想要一个小图像，当单击它时会变为不同的图像，同时开始播放循环声音文件。第二次单击图像时，它会变回原始图像并停止声音文件。
你可以把它想象成一个按钮，上面写着“开始”。当单击“开始”时，它会循环播放声音并变为“停止”，当单击“停止”时，它会返回开始并且声音停止播放。
我已经在标签内创建了不显示的复选框，该标签是一个正方形，选中时播放声音，未选中时停止声音。问题是我无法使用“选中”、“取消选中”将复选框更改为不同的图像。
我也有一些具有链接更改图像的代码，但我不知道如何让它播放声音。
所以基本上我需要将这两件事结合起来。但我不知道怎么做。在过去的两天里，我一直在不停地搜索，但找不到一个明确而简单的答案。
知道我计划在同一页面上放置许多可点击的小图像可能会有所帮助，因此 javascript 需要能够轻量但最终影响所有链接或 div 或其他任何内容。
抱歉问了这么长的问题。有人吗？
提前致谢！
【问题讨论】：
你有什么代码可以分享吗？这将使我们更容易为您提供帮助。 【参考方案1】：<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>
怎么样，我觉得应该可以。
编辑： 这是一个 OO 版本，应该可以满足您的需要：
<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>
【讨论】：
感谢主管 - 这非常适用于涉及 1 张图像的应用程序，我感谢您为我解决问题。我将逐行浏览代码，这样我才能真正理解这里发生了什么。 对不起，要添加到我的回复中，但显然返回键意味着添加评论，而不是新段落（堆栈的新内容）......无论如何，对于我的应用程序，我正在尝试做多个图像在同一个页面上都体现了这个“change()”但都是不同的，即不同的声音文件，不同的图像。是否有一种紧凑的方式来编写 javascript 来轻松完成此任务？再次感谢您的回复，并认为您很棒。我可能会继续使用许多相同的功能，或者尝试自己解决其他问题。再次感谢！ 更新 - 我基本上只是复制了函数并更改了一些属性，即 function() --> functionb()、'btn' ---> 'btnb' 等等。最后，我希望在页面上使用大约 40-50 个这样的代码，因此代码会非常臃肿，但它确实可以完成工作。而且该网站可能不会上线，更像是一个实验，所以应该不是太大的问题。 检查我的编辑。我编写了一段新代码，应该可以满足您的需求。 @Chief17 如果我有很多按钮可以播放不同的声音。如何制作一个按钮来控制所有启动/停止声音？以上是关于Javascript 声音开始/停止和图像更改的主要内容，如果未能解决你的问题，请参考以下文章
删除侦听器类不会停止与 Jquery Javascript 相关的声音事件