don't let anyone tell you that you can't put emoji in a progress bar. Might not be cross browser compatible lol
So for HTML5 Audio players, you can use a progress bar to show what part of the track is playing and skip to different sections. Most people use <progress> html elements for this. I wanted to add an emoji to mine because why not? But unfortunately most techniques for hacking emoji into things didn't seem to work. For example using :before in CSS doesn't work. BUT I found out that you can use an image background, and an image can be an svg format and the svg format can just be text. So I put the emoji into that text :) And put the text svg into the css
/* Firefox */
progress::-moz-progress-bar {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="70px" height="25px"><text x="0" y="20">🎤🎵🎹</text></svg>');
background-color: #373fff;
}
/* Chrome */
progress::-webkit-progress-value {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="70px" height="25px"><text x="0" y="20">🎤🎵🎹</text></svg>');
background-color: #373fff;
}