html5オーディオタグのスタイルを設定することは可能ですか？

その方法に関するリソースは見つかりませんでした。プレーヤーの色を変えるのと同じくらい簡単なものがあればいいでしょう:)

はい！「controls」属性のHTML5オーディオタグは、ブラウザのデフォルトプレーヤーを使用します。ブラウザーコントロールを使用せずに、独自のコントロールをロールバックしてJavaScript経由でオーディオAPIと通信することにより、好みに合わせてカスタマイズできます。

幸いなことに、他の人々はすでにこれを行っています。現在、私のお気に入りのプレーヤーはjPlayerです。非常にスタイルがよく、うまく機能します。見てみな。

<audio>

audio::-webkit-media-controls-panel

audio::-webkit-media-controls-mute-button

audio::-webkit-media-controls-play-button

audio::-webkit-media-controls-timeline-container

audio::-webkit-media-controls-current-time-display

audio::-webkit-media-controls-time-remaining-display

audio::-webkit-media-controls-timeline

audio::-webkit-media-controls-volume-slider-container

audio::-webkit-media-controls-volume-slider

audio::-webkit-media-controls-seek-back-button

audio::-webkit-media-controls-seek-forward-button

audio::-webkit-media-controls-fullscreen-button

audio::-webkit-media-controls-rewind-button

audio::-webkit-media-controls-return-to-realtime-button

audio::-webkit-media-controls-toggle-closed-captions-button

参照：https : //chromium.googlesource.com/chromium/blink/+/72fef91ac1ef679207f51def8133b336a6f6588f/Source/core/css/mediaControls.css?autodive= 0%2F%2F% 2F

はい：（controlsから属性を削除することによりaudio）組み込みのブラウザーUIを非表示にして、代わりに独自のインターフェースを構築し、JavaScript（ソース）を使用して再生を制御できます。

<audio id="player" src="vincent.mp3"></audio>
<div> 
  <button onclick="document.getElementById('player').play()">Play</button> 
  <button onclick="document.getElementById('player').pause()">Pause</button> 
  <button onclick="document.getElementById('player').volume += 0.1">Vol +</button> 
  <button onclick="document.getElementById('player').volume -= 0.1">Vol -</button> 
</div>

次に、CSSを使用して、必要に応じて要素をスタイル設定できます。

MDN HTMLAudioElement APIリファレンス

タグの外観はブラウザに依存しますが、非表示にしたり、独自のインターフェースを構築したり、JavaScriptを使用して再生を制御したりできます。

いくつかの色の調整

audio {
    filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
    width: 200px;
    height: 25px;
}

HTML5オーディオ要素とインターフェースする独自のプレーヤーを作成する必要があります。このチュートリアルはhttp://alexkatz.me/html5-audio/building-a-custom-html5-audio-player-with-javascript/に役立ちます

ケンもそれは正しかった。

cssタグ：

audio {

}

結果が得られます。プレーヤーの高さが25pxを超えたり下回ったりしたくないようですが、幅はある程度短くしたり長くしたりできます。

これで十分です。次の例を参照してください（警告、音声は自動的に再生されます）：www.thenewyorkerdeliinc.com

プレーヤーの色だけを変更するには、cssファイルのオーディオタグを指定するだけです。たとえば、私のサイトの1つで、プレーヤーが非表示（白地に白）になったため、次のように追加しました。

audio {
    background-color: #95B9C7;
}

これにより、プレーヤーが水色に変わりました。

はい、可能です。@FábioZangirolamiの回答から

audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
                background-color: red;
}

CSSでブラウザの標準的な音楽プレーヤーのスタイルを設定する場合：

audio {
    enter code here;
}