在Html中嵌入音乐-只有静音/解除静音图标控制器

Question

我正在尝试添加我的主页mp3音乐。从下面的代码，我有所有的控制(播放，持续时间，音量等)。我只想添加自动播放和无限循环播放的静音/解除静音图标。

Html：

<audio controls>
  <source src="/css/west.mp3" type="audio/mpeg">
</audio>

怎么做？

Answer 1

希望这对你有用:)

<audio id="audio">
    <source src="/css/west.mp3" type="audio/mpeg">
</audio>
<div id="mute-toggle">Mute</div> <!-- mute / unmute toggle !-->

jQuery (如您所引用的)

$(document).ready(function(){
    var audio = document.getElementById("audio");
    audio.autoplay = true;

    $("#mute-toggle").click(function(){ // on toggle click
        if($(this).hasClass("toggled")){ // if toggle has class "toggled"
            audio.muted = false; // unmute audio
        } else { // vice versa
            audio.muted = true;  
        }

        $(this).toggleClass("toggled"); // toggle class "toggled"
    });
});

CSS

#mute-toggle{
    width: 50px;
    height: 50px;
    background: url("url/to/unmuted/icon.jpg");
    cursor: pointer;
}
#mute-toggle.toggled{
    background: url("url/to/muted/icon.jpg") !important;
}

如果你遇到任何问题，请告诉我！

Answer 2

为此您将需要自定义控件，它不能单独使用HTML音频元素(它只允许所有或不允许控件)。

查看jPlayer http://jplayer.org/ --它工作得很好，提供了一些预先制作的“皮肤”，并且在很大程度上可以配置。