１つの表示でON・OFFボタンの表示

JavaScriptでボタンのON・OFFを切り替えるものです。

音楽を流すことがあって音楽のONとOFFボタンを作りました。
しかしONとOFFのボタンを２つ表示するのはスペースがもったいないし、見た目も悪い。
なのでつくりました。

まずはスイッチ

<div id="switch1">
<input type="button" value="" onclick="audio.muted=true;document.getElementById('switch2').style.display='block';document.getElementById('switch1').style.display='none'" style="border: 0px; color: #ffffff; width: 24px; height: 24px; background-image: url('./inc/img/musicnoteoff.png'); background-color: #606060; font-size: 80%; border-radius: 2px; opacity:0.5;">
</div>
<div id="switch2">
<input type="button" value="" onclick="audio.muted=false;document.getElementById('switch2').style.display='none';document.getElementById('switch1').style.display='block'" style="border: 0px; color: #ffffff; width: 24px; height: 24px; background-image: url('./inc/img/musicnoteon.png'); background-color: #606060; font-size: 80%; border-radius: 2px; opacity:0.5;">
</div>

<script>// ボタンONを隠す
window.onload = function(){document.getElementById("switch2").style.display="none"}';
<script>

JavaScript