その方法に関するリソースは見つかりませんでした。プレイヤーの色を変更するのと同じくらい簡単なものがあれば良いでしょう:)
はい! 「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
はい:組み込みのブラウザ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
+ button
s)に追加し、必要に応じてスタイルを設定できます。
タグの外観はブラウザに依存しますが、非表示にしたり、独自のインターフェイスを構築したり、Javascriptを使用して再生を制御したりできます。
HTML5オーディオ要素とインターフェイスする独自のプレーヤーを作成する必要があります。このチュートリアルは役立ちます http://alexkatz.me/html5-audio/building-a-custom-html5-audio-player-with-javascript/
プレーヤーの色だけを変更するには、cssファイルのオーディオタグを指定するだけです。たとえば、私のサイトの1つでプレーヤーが見えなくなった(白地に白)ので、追加しました。
audio {
background-color: #95B9C7;
}
これにより、プレーヤーが水色に変わりました。
ケンもそれを正しかった。
css
タグ:
audio {
}
結果が得られます。プレーヤーの高さを25pxより上または下にしたくないようですが、幅はある程度短くしたり長くしたりできます。
これで十分でした。この例を参照してください(警告、オーディオは自動的に再生されます): www.thenewyorkerdeliinc.com
いくつかの色の調整
audio {
filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
width: 200px;
height: 25px;
}