� complesso far apparire (dopo aver avviato l'audio) al posto del pulsante "play" il pulsante "pausa"?
No, però ti propongo qualche ottimizzazione per rendere il tutto più dinamico.

Qui un esempio testato e funzionante:
codice:
<!DOCTYPE HTML>
<html lang="it">
   <head>
      <title>Esempio</title>
      <meta charset="utf-8">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      
      <style>
         .audio-btn                    { cursor: pointer; }
         .audio-btn::after             { padding-left: .5em; }
         .audio-btn.audio-play         { color: green; }
         .audio-btn.audio-stop         { color: red; }
         .audio-btn.audio-play::after  { content:'Ascolta'; }
         .audio-btn.audio-stop::after  { content:'Interrompi'; }
      </style>
      
   </head>
   <body>
   
   
      <div class="locandina">
         <a href="music-title1.html"><img src="mialocandina1.jpg" alt="mia locandina1"></a>
      </div>
      <div class="preview">
         <audio class="traccia-audio" src="fileaudio1.mp3" type="audio/mp3"></audio>
         <i class="agents-btn fa fa-play-circle audio-btn audio-play" aria-hidden="true"></i>
      </div>


      <div class="locandina">
         <a href="music-title2.html"><img src="mialocandina2.jpg" alt="mia locandina 2"></a>
      </div>
      <div class="preview">
         <audio class="traccia-audio" src="fileaudio2.mp3" type="audio/mp3"></audio>
         <i class="agents-btn fa fa-play-circle audio-btn audio-play" aria-hidden="true"></i>
      </div>
      
      
      <div class="locandina">
         <a href="music-title3.html"><img src="mialocandina3.jpg" alt="mia locandina3"></a>
      </div>
      <div class="preview">
         <audio class="traccia-audio" src="fileaudio3.mp3" type="audio/mp3"></audio>
         <i class="agents-btn fa fa-play-circle audio-btn audio-play" aria-hidden="true"></i>
      </div>


      <script>
         
         var elementiPreview = document.querySelectorAll('.preview');
         
         elementiPreview.forEach(function(me){
            me.querySelector('.audio-btn').addEventListener('click',function(){
               var curPreview = this.parentNode;
               elementiPreview.forEach(function(preview){
                  var cls = preview.querySelector('.audio-btn').classList;
                  var trc = preview.querySelector('.traccia-audio')
                  
                  if (preview === curPreview && trc.paused) {
                     cls.remove('fa-play-circle', 'audio-play');
                     cls.add('fa-stop-circle', 'audio-stop');
                     trc.play();
                  } else {
                     cls.remove('fa-stop-circle', 'audio-stop');
                     cls.add('fa-play-circle', 'audio-play');
                     trc.pause();
                     trc.currentTime = 0;
                  }
               });
            });
         });
         
      </script>
      
   </body>
</html>
Nota che non ho usato id ma solo delle classi che fanno tutto il lavoro.
Per il momento fai qualche prova e se non capisci qualcosa chiedi pure.

Buon proseguimento.