Customizing html audio player

[wirefoxterrier]

Hello,

I would like to make use of streaming audio content directly from my website. However, I don't like how the default browser players look. I am capable of understanding basic html/css rules, but do not know at all how to integrate js code (at all).

I found a player on this site that I really like, which seems to be a jplayer element:

I would love a similar player (black color instead of violet). The website i took this from is: https://www.lyrikline.org/de/gedichte/bristepunktet-part-1-13852

Is this something that would take a lot of work?

Thank you, also for the previous help I got from this forum.

Best wishes,
Armin

[arminunruh]

maybe read tutorials like this:

https://blog.shahednasser.com/how-to-style-an-audio-element/
https://css-tricks.com/lets-create-a-custom-audio-player/

maybe u can find a wordpress plugin

[rodro]

Hi @wirefoxterrier ! Did you manage to make your audio player work? :) And if so could you show us how?

[arminunruh]

hey rodro!

if you have a audio file, you can go to the media library,
then click it, then copy the URL of the file

[arminunruh]

Now in the gridder, using +more -> +html

add:

<audio id="track" controls src="your-audio-file.mp3"></audio>

in lay options -> custom css & html,
in custom css add styling if needed:

#track {
  width: 300px;
  height: 40px;
  filter: sepia(20%) saturate(70%) grayscale(1) contrast(90%) invert(85%); /* Makes it look modern & light */
  border-radius: 50px;
  background-color: #f1f3f4;
  outline: none;
}

tools like chatgpt or gemini can help you with the HTML and styling you may need

[rodro]

Amazing thank you !