🎵 Make your st.audio stand out with CSS styling techniques (Tom's Tutorial Friday pt.1)

Show the Community!
1

Hi there!

I hope this week has treated you well and that you’re ready for the first exciting Tom’s Tutorial Friday :slight_smile: This week, we’re going to take a deep dive into styling of st.audio() with some CSS tricks and hacks.

Disclaimer: tutorial prepared only from Chrome browser users.

Companion app with the live examples:

https://staudio.streamlit.app/

What is a st.audio()?

st.audio is a streamlit widget that display’s an audio player.

image
image715Ă—64 1.39 KB

Overall, it performs very well. However, when using the black theme, it can be a little to much eye-catching.

Let’s try to modify its looks!

Css “hacks”

st.markdown will help us introduce the styling.

st.markdown(
    "<style>" + style_css + "</style>", unsafe_allow_html=True
)

st.audio(audio, format="audio/wav")

By changing style_css we can:

Change media player background

style_css equal to

audio::-webkit-media-controls-panel,
audio::-webkit-media-controls-enclosure {
    background-color: #9c9d9f;
}

image
image716Ă—73 2.08 KB

Change media player text to red

style_css equal to

audio::-webkit-media-controls-time-remaining-display,
audio::-webkit-media-controls-current-time-display {
    color: red;
}

image
image718Ă—67 1.43 KB

Change media player width and height

style_css equal to

audio::-webkit-media-controls-time-remaining-display,
audio::-webkit-media-controls-current-time-display {
    max-width: 50%;
    max-height: 20px;
}

image
image725Ă—91 1.22 KB

Change background text, color, play button image and slider background

style_css equal to

audio::-webkit-media-controls-panel,
audio::-webkit-media-controls-enclosure {
    background-color:#301934;}

audio::-webkit-media-controls-time-remaining-display,
audio::-webkit-media-controls-current-time-display {
    color: white;
    text-shadow: none; 

}
audio::-webkit-media-controls-play-button{
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII=");
}

audio::-webkit-media-controls-timeline {
  background-color: #532b5a;
  border-radius: 25px;
  margin-left: 10px;
  margin-right: 10px;
}

image
image722Ă—72 1.75 KB

Live examples of styling

I’ve been relying on it heavily over at https://adventure.streamlit.app. Give it a try, you might be a fan! :slight_smile:

That’s it!

Thanks for sticking with me on this lengthy read. I’m crossing my fingers that this post helped you out in some way and made your life a bit easier!

Best,
Tom

3 Likes
2

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.