How to make html5 audio player responsive?

I'd like to make html 5 audio player responsive:

 <audio controls class="audio-file" src="/path/to/music.mp3">
                Sorry your browser belongs to stone age
</audio>

I have tried some thicks like

 audio {
    display: block;
 }

But the width does not change at all and as the screen shrinks, it exceeds the visible area. I'm wondering what is the best way to fix this?

Solution

Try this by adding a object-fit css property

<html>
   <head>
      <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
      <style>
         body {
           display: block;
           margin: 8px;
         }
         audio{
           max-height: 100%;
           max-width: 100%;
           margin: auto;
           object-fit: contain;
         }
      </style>
   </head>
   <body>
      <audio controls="" autoplay="" name="media">
         <source src="path/to/music.mp3" type="audio/mpeg">
      </audio>
   </body>
</html>