-
非表示属性を使用する方法: HTMLの
audio
要素には、controls
属性があります。これはデフォルトでオーディオプレーヤーのコントロールを表示します。オーディオコントロールを非表示にするには、controls
属性を削除します。<audio src="audio.mp3"></audio>
上記の例では、
controls
属性が削除されているため、オーディオコントロールは表示されません。 -
CSSを使用する方法: CSSを使用してオーディオコントロールを非表示にすることもできます。以下のスタイルを適用します。
<style> audio::-webkit-media-controls-panel { display: none !important; } </style>
上記のCSSは、WebKitベースのブラウザ(例: Google Chrome、Safari)で動作します。他のブラウザでは異なるプレフィックスを使用する必要があるかもしれません。
-
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
属性を削除しています。