Htmlに音楽を埋め込む - ミュート/ミュート解除アイコンコントローラのみ

Question

私のホームページmp3音楽を追加しようとしています。下のコードから私はすべてのコントロール（演奏、時間、音量など）を持っています。自動再生と無限ループ再生を使用したミュート/ミュート解除アイコンのみを追加します。

HTML：

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

これを行うにはどのように？

Answer 1

がうまくいけば、これはあなたのために働く:)

HTML：

<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

あなたは、このためのカスタムコントロールをする必要があります、

チェックアウトjPlayer http://jplayer.org/（のみすべてまたはなしのコントロールを可能にする）は、単独でHTML audio要素で行うことができない - これは、非常にうまく機能していますあらかじめ作成された「スキン」はほとんどなく、高度に構成可能です。