Help make the button turn the sound on and off. New to this whole business, I do not understand how to make work.

$( document ).ready(function() { $('.on').click(function() { $('.off').css('display', 'block'); $(this).css('display', 'none'); }); }); $( document ).ready(function() { $('.off').click(function() { $(this).css('display', 'none'); $('.on').css('display', 'block'); }); }); //еще проблема в том, как управлять самим звуком? я использовал чистый JS, взял его с одного сайта. Может можно все управление переместить сюда? 
 .on { /*кнопка показывает, что звука нет и при нажатии на неё звук должен пропадать*/ width: 60px; height: 40px; position:absolute; z-index: 1; background: red; } .off { /*кнопка показывает, что звук есть и её не видно, но после предыдущих событий сюда будет записываться display:block При нажатии на неё звук должен появляться*/ width: 60px; height: 40px; position:absolute; z-index: 2; background: blue; display:none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <audio id="myTune" autoplay="true" loop="5" hidden="true"> <source src="audio/background.mp3"> </audio> <button class="on" onclick="document.getElementById('myTune').play()">ВЫКЛ</button> <button class="off" onclick="document.getElementById('myTune').pause()">ВКЛ</button>

    1 answer 1

     $( document ).ready( function() { var i=false; $('.on').click(function() { if(i){ $('.on').css("backgroundColor", "#0000ff"); //$('#myTune').play(); document.getElementById('myTune').play(); i=false; $('button.on').html("Выкл"); } else{ $('.on').css("backgroundColor", "#00ff00"); i=true; document.getElementById('myTune').pause(); $('button.on').html("Вкл"); } }); }); 
     .on { /*кнопка показывает, что звука нет и при нажатии на неё звук должен пропадать*/ width: 60px; height: 40px; position:absolute; z-index: 1; background: red; } 
     <html> <head> <script src="jquery.js"></script> <script src="2.js"></script> <link rel="stylesheet" href="12313.css"> </head> <body> <audio id="myTune" autoplay="true" loop="5" hidden="true"> <source src="background.mp3"> </audio> <button class="on" >Выкл</button> </body>

    version with 1 button.