web-dev-qa-db-ja.com

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

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

html5audio
103
rabidmachine9

はい！ 「controls」属性を持つHTML5オーディオタグは、ブラウザのデフォルトプレーヤーを使用します。ブラウザコントロールを使用せずに、好みに合わせてカスタマイズできますが、独自のコントロールをローリングし、javascriptを介してオーディオAPIと通信します。

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

44
Benny
<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
58
Fábio Zangirolami

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

<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クラスを要素（この場合はdiv + buttons）に追加し、必要に応じてスタイルを設定できます。

MDN HTMLAudioElement APIリファレンス

49
gilad mayani

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

27
Mihai

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

8
katzkode

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

audio {
    background-color: #95B9C7;
}

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

8
Karin

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

cssタグ：

audio {

}

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

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

8
Nick

いくつかの色の調整

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