Ciao Luciano e benvenuto sul forum. L'argomento non è così banale per chi non è del mestiere ma nemmeno tanto complicato. A grandi linee diciamo che dovrai usare il metodo pause() che, al click su un elemento audio (così come hai fatto per il play()), dovrai applicare agli altri elementi.

Se ti interessa inoltre riportare all'inizio la posizione di riproduzione dell'audio, puoi azzerare la proprietà currentTime del relativo elemento che metti in pausa.

Se gli elementi sono solo 2 puoi semplicemente applicare pause() all'altro elemento conosciuto, selezionandolo ad esempio con getElementById. Se invece devi poter gestire più elementi converrà selezionarli opportunamente (magari usando una classe) e applicare pause() attraverso un ciclo.

In qualunque caso è più conveniente riportare tutto dentro una funzione da poter richiamare in modo semplice per ciascun elemento audio in gioco.

Semplice esempio con due elementi:
codice:
<!DOCTYPE HTML>
<html lang="it">
   <head>
      <title>Esempio</title>
      <meta charset="utf-8">
      <script>
         
         function riproduciAudio(idElemento){
         
            var elemento1 = document.getElementById('audio1');
            var elemento2 = document.getElementById('audio2');

            elemento1.pause();
            elemento1.currentTime = 0;
            
            elemento2.pause();
            elemento2.currentTime = 0;
            
            document.getElementById(idElemento).play();
            
         }
         
      </script>
   </head>
   <body>
   
      <div class="locandina">
         <a href="music-title1.html"><img src="mialocandina1.jpg" alt="mia locandina1"></a>
      </div>
      <div class="preview">
         <audio id="audio1" src="fileaudio1.mp3" type="audio/mp3"></audio>
         <a class="agents-btn fa fa-play-circle" onclick="riproduciAudio('audio1')" > Ascolta </a>
      </div>

      <div class="locandina">
         <a href="music-title2.html"><img src="mialocandina2.jpg" alt="mia locandina 2"></a>
      </div>
      <div class="preview">
         <audio id="audio2" src="fileaudio2.mp3" type="audio/mp3"></audio>
         <a class="agents-btn fa fa-play-circle" onclick="riproduciAudio('audio2')" > Ascolta </a>
      </div>

   </body>
</html>
.
Chiaramente il tutto si potrebbe rendere più dinamico, per permettere di gestire più elementi, e migliorare, magari mettendo una funzione di stop con cui si possa interrompere l'audio in esecuzione anche se non si clicca su un altro elemento.

Intanto fai qualche prova e vedi se può bastare questo.

Buon proseguimento e buona permanenza sul forum.


PS: l'argomento verte chiaramente su JavaScript (più che HTML5), segnalo al moderatore che eventualmente sposterà la discussione nella sezione opportuna. Occhio anche ai titoli generici e al codice postato senza l'uso degli opportuni tag. Consiglio di leggere attentamente il relativo regolamento di sezione (discussione in evidenza che trovi per ogni sezione del forum) prima di postare nuovamente.