webentwicklung-frage-antwort-db.com.de

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

Ich habe keine Ressourcen gefunden, wie das geht. Etwas so einfaches wie das Ändern der Farbe des Players wäre schön zu haben :)

html5audio
95
rabidmachine9

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

Glücklicherweise haben andere dies bereits getan. Mein Lieblingsspieler ist momentan jPlayer , er ist sehr ansprechend und funktioniert großartig. Hör zu.

46
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
53
Fábio Zangirolami

Ja: Sie können die integrierte Browser-Benutzeroberfläche ausblenden (indem Sie das Attribut controls aus audio entfernen), und stattdessen eine eigene Benutzeroberfläche erstellen und die Wiedergabe mit Javascript ( source ) 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 den Elementen dann CSS-Klassen hinzufügen (in diesem Fall die Variable div + buttons) und diese nach Ihren Wünschen gestalten.

Weitere Eigenschaften und Methoden der HTMLAudioElement-JavaScript-Schnittstelle finden Sie hier .

43
gilad mayani

Das Erscheinungsbild des Tags ist vom Browser abhängig. Sie können es jedoch ausblenden, eine eigene Benutzeroberfläche erstellen und die Wiedergabe mit Javascript steuern.

26
Mihai

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/

8
katzkode

Ken hatte es auch richtig.

ein css-Tag:

audio {

}

erhalten Sie einige Ergebnisse. Anscheinend will der Player keine Höhe über oder unter 25px, 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

8
Nick

Um nur die Farbe des Players zu ändern, adressieren Sie einfach das Audio-Tag in Ihrer CSS-Datei. Zum Beispiel auf einer meiner Websites wurde der Player unsichtbar (weiß auf weiß).

audio {
    background-color: #95B9C7;
}

Dies hat den Player in hellblau geändert.

7
Karin

einige Farbabstimmungen

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