Question

我有两张图片，sound_on.png和sound_off.png。两者都具有相同的高度和尺寸。

我想附加一个JavaScript以执行以下操作：

当按下的图像从sound_off.png变为sound_on.png并播放声音时
当再次按下该按钮时，它会从sound_on.png变回sound_off.png并且使用onclick命令停止声音

目前我有这些代码：

<a href="#" onClick="playAudio();"><img src="images/general/sound-on.png" width="40" height="32"></a>
<a href="#" onClick="stopAudio();"><img src="images/general/sound-off.png" width="40" height="32"></a>

我需要使用哪些代码来完成上述示例？

我有这个部分：

<style type="text/css">
.on {background-image:url url(images/general/sound-off.png)); background-repeat:no-repeat;}
.off {background-image:url(images/general/sound-on.png); background-repeat:no-repeat;}
</style>
<script language="javascript">
function togglestyle(el){if(el.className == "on") {el.className="off";} else {el.className="on";}}
</script>

使用此DIV按钮：

div id="onoff" class="playlist_btn"><img src="images/general/sound-off.png" width="50 height="50" onclick="togglestyle(onoff)"></div>

这使得切换，但到目前为止我不知道如何连接onclick命令来播放音频并再次停止播放。

可能是这样的吗？

function togglestyle(el){if(el.className == "on" onClick="playAudio()") {el.className="off" onClick"stopAudio()";} else {el.className="on";}}

Answer 1

只需直接从现有的切换功能调用声音功能：

function togglestyle(el){

    if(el.className == "on") {
        el.className="off";
        stopAudio();
    }
    else {
        el.className="on";
        playAudio();
    }
}

Answer 2

这个结合的脚本也可以解决问题

<script>
function showHide(elementid){
if (document.getElementById(elementid).style.display == 'none'){
document.getElementById(elementid).style.display = '';
} else {
document.getElementById(elementid).style.display = 'none';
}
}

function hideShow(elementid){
if (document.getElementById(elementid).style.display == ''){
document.getElementById(elementid).style.display = 'none';
} else {
document.getElementById(elementid).style.display = '';
}
}
</script>


<img id="on" src="images/general/sound-off.png" width="40" height="32" onClick="javascript:hideShow('on'); javascript:showHide('off'); javascript:playAudio()" alt="on">
<img id="off" src="images/general/sound-on.png" width="40" height="32" onClick="javascript:hideShow('off'); javascript:showHide('on')" style="display:none;" alt="off">

但是我想知道是否有办法检测音频何时播放并返回关闭状态并集成一个trird选项，暂停音频（带有暂停图像）并继续音频留下的位置？有什么想法吗？

使用图像制作开/关按钮

2 个答案: