Ist es möglich, HTML5-Audio-Tags zu formatieren?

Ich habe keine Ressourcen dafür gefunden. Etwas so Einfaches wie das Ändern der Farbe des Players wäre schön :)

Ja! Das HTML5-Audio-Tag mit dem Attribut "Steuerelemente" verwendet den Standard-Player des Browsers. Sie können es nach Ihren Wünschen anpassen, indem Sie nicht die Browser-Steuerelemente verwenden, sondern Ihre eigenen Steuerelemente rollen und über Javascript mit der Audio-API sprechen.

Zum Glück haben andere Leute dies bereits getan. Mein momentaner Lieblingsspieler ist jPlayer , er ist sehr stylisch und funktioniert großartig. Hör zu.

<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

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

Ja: Sie können die integrierte Browser-Benutzeroberfläche ausblenden (indem Sie das controlsAttribut entfernen audio) und stattdessen Ihre eigene Benutzeroberfläche erstellen und die Wiedergabe mit Javascript ( Quelle ) steuern :

<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>

Sie können die Elemente dann mithilfe von CSS nach Ihren Wünschen formatieren.

MDN HTMLAudioElement API-Referenz

Das Erscheinungsbild des Tags ist browserabhängig. Sie können es jedoch ausblenden, eine eigene Benutzeroberfläche erstellen und die Wiedergabe mithilfe von Javascript steuern.

einige Farbabstimmungen

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

Sie müssen einen eigenen Player erstellen, der mit dem HTML5-Audioelement verbunden ist. Dieses Tutorial hilft http://alexkatz.me/html5-audio/building-a-custom-html5-audio-player-with-javascript/

Ken hatte es auch richtig.

ein cssTag:

audio {

}

erhalten Sie einige Ergebnisse. Es scheint, dass der Spieler keine Höhe über oder unter 25 Pixel haben möchte, aber die Breite kann bis zu einem gewissen Grad verkürzt oder verlängert werden.

das war gut genug für mich; Siehe dieses Beispiel (Warnung, Audio wird automatisch abgespielt ): www.thenewyorkerdeliinc.com

Um nur die Farbe des Players zu ändern, adressieren Sie einfach das Audio-Tag in Ihrer CSS-Datei. Beispielsweise wurde der Player auf einer meiner Websites unsichtbar (weiß auf weiß), und ich fügte hinzu:

audio {
    background-color: #95B9C7;
}

Dadurch wurde der Player hellblau.

Ja, es ist möglich, von @ Fábio Zangirolami zu antworten

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

Wenn Sie den Standard-Musikplayer des Browsers im CSS formatieren möchten:

audio {
    enter code here;
}