オーディオコントロールを非表示にする方法


  1. 非表示属性を使用する方法: HTMLのaudio要素には、controls属性があります。これはデフォルトでオーディオプレーヤーのコントロールを表示します。オーディオコントロールを非表示にするには、controls属性を削除します。

    <audio src="audio.mp3"></audio>

    上記の例では、controls属性が削除されているため、オーディオコントロールは表示されません。

  2. CSSを使用する方法: CSSを使用してオーディオコントロールを非表示にすることもできます。以下のスタイルを適用します。

    <style>
    audio::-webkit-media-controls-panel {
     display: none !important;
    }
    </style>

    上記のCSSは、WebKitベースのブラウザ(例: Google Chrome、Safari)で動作します。他のブラウザでは異なるプレフィックスを使用する必要があるかもしれません。

  3. JavaScriptを使用する方法: JavaScriptを使用してオーディオコントロールを非表示にすることもできます。以下はjQueryを使用した例です。

    <audio id="myAudio" src="audio.mp3"></audio>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
    $(document).ready(function() {
     $('#myAudio').removeAttr('controls');
    });
    </script>

    上記の例では、jQueryを使用してcontrols属性を削除しています。