使用jquery交换图像静音/非静音音频播放器

Swap image using jquery for mute/unmute audio player

本文关键字：音频 播放器 jquery 图像 使用 交换      更新时间：2023-09-26

我需要改变图像"icontrue,jpg"与"iconfalse.jpg"当点击img，当我点击另一个在这个图像我需要返回到icontrue.jpg，

当图标设置为"iconfalse.jpg"时，我需要这个函数:

document.getElementById('myaudio').muted = true;

，当返回到"icontrue.jpg"时，我需要相反的:

document.getElementById('myaudio').muted = false;

我尝试了超过10种方法来构建这个脚本，在stackoverflow和其他中搜索，但没有方法是允许的。

我构建的所有方法都不会返回到原始图像，也不会取消音频静音。谢谢你的回答。

jsBin demo

代替图像使用<span>为您的ico按钮:

<span data-audio="song1.ogg"></span> 
<span data-audio="song2.ogg"></span>

现在让我们简单地为我们的SPAN元素创建"播放/停止"图标，
在SPAN点击我们将切换.stop类使用jQuery

CSS 

[data-audio]{
    cursor:pointer;
    display:inline-block;
    vertical-align:middle;
    width:20px;
    height:20px;
    background: url(ico-play.jpg);
}
[data-audio].stop{
    background: url(ico.stop.jpg);
}
jQuery 

var $btn  = $("[data-audio]"),
    AUDIO = new Audio();
$btn.click(function() {     
    $btn.not(this).removeClass('stop');
    $(this).toggleClass('stop');    
    AUDIO.src = $(this).data().audio;
    AUDIO[ $(this).hasClass('stop') ? "play" : "pause" ]();
});
相关文章：