Yes: you can hide the built-in browser UI (by removing the controls attribute from audio) and instead build your own interface and control the playback using Javascript (source):

<audio id="player" src="vincent.mp3"></audio>
<div> 
  <button onclick="document.getElementById('player').play()">Play</button> 
  <button onclick="document.getElementById('player').pause()">Pause</button> 
  <button onclick="document.getElementById('player').volume += 0.1">Vol +</button> 
  <button onclick="document.getElementById('player').volume -= 0.1">Vol -</button> 
</div>

You can then style the elements however you wish using CSS.

MDN HTMLAudioElement API reference

You create your elements like so...

<audio id="yourAudio" preload='none'>
    <source src='the url to the audio' type='audio/wav' />
</audio>
<a href="#" id="audioControl">play!</a>

And add some functionality:

var yourAudio = document.getElementById('yourAudio'),
    ctrl = document.getElementById('audioControl');

ctrl.onclick = function () {

    // Update the Button
    var pause = ctrl.innerHTML === 'pause!';
    ctrl.innerHTML = pause ? 'play!' : 'pause!';

    // Update the Audio
    var method = pause ? 'pause' : 'play';
    yourAudio[method]();

    // Prevent Default Action
    return false;
};

Right now, the button is just simple text ("play!" or "pause!"), but you could do just about anything you wanted with CSS. Instead of setting the innerHTML, set the className and you're good to go!

This is possible!

audio::-webkit-media-controls-panel {
  background-color: coral;
}

 <li class="music">
   <div class="podcast">
     <div class="img-episodes-container">
       <img src="images/podcast1.jpg" alt="microfono">
     </div>
     <h4>Lorem, ipsum dolor.</h4>
     <audio controls>
       <source src="sounds/sound1.mp3">
     </audio>
   </div>
 </li>

Here is the full list:

audio::-webkit-media-controls-panel

audio::-webkit-media-controls-mute-button

audio::-webkit-media-controls-play-button

audio::-webkit-media-controls-timeline-container

audio::-webkit-media-controls-current-time-display

audio::-webkit-media-controls-time-remaining-display

audio::-webkit-media-controls-timeline

audio::-webkit-media-controls-volume-slider-container

audio::-webkit-media-controls-volume-slider

audio::-webkit-media-controls-seek-back-button

audio::-webkit-media-controls-seek-forward-button

audio::-webkit-media-controls-fullscreen-button

audio::-webkit-media-controls-rewind-button

audio::-webkit-media-controls-return-to-realtime-button

audio::-webkit-media-controls-toggle-closed-captions-button

As per this incomplete answer: Is it possible to style html5 audio tag?

Please note these are the Chrome / Webkit supported tags. There may or may not be Firefox / IE11 supported tags for the audio element as there is little-to-no documentation on -moz or -ms prefixing conventions/support for this tag.