It's clear that the PLAY/PAUSE icons are smaller than intended, and the entire player is thinner than desired, making it difficult for some viewers to see. How can I enlarge the entire player? I have read that we do not have access to individual controls (e.g. Play)
My goal is to make the ENTIRE audio player bigger so that the PLAY/PAUSE ICONS and the SLIDER are more visible to everyone.
UPDATED with webkit media control styles
<!DOCTYPE html>
<html>
<style>
audio::-webkit-media-controls-play-button {
transform: scale(2, 2);
}
audio::-webkit-media-controls-timeline {
height: 20px;
}
</style>
<body>
<h1>The audio element</h1>
<audio controls controlsList="nodownload noplaybackrate" style="width:600px;">
<source
src="https://content.production.cdn.art19.com/segment_lists/d4e00ef7-1edc-41c2-b4c4-505f1742d71d/20220607-VGhlVGltRmVycmlzc1Nob3dfSW5zaWdodHMgZXAgMV9lZGl0ICgxKS5tcDM-697d12ab-6cb9-4ec3-8856-2bbd8d9c4152.mp3"
type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
After applying the webkit audio control styles, the player now appears as follows:
Is there a way to adjust the timeline (darker) to be the same size (height) as the gray timeline?