I have a series of audio files that play based on eventListeners, but I cannot get the previous audio file to pause / stop whenever a new one is called. How can I implement this?

Here's my code:

    Narrator.greeting = function(){
        let greeting = new Audio('greeting.wav');
        greeting.play()
        return greeting
    }
        const greetingNarrator = document.querySelector('#greetingID').addEventListener('click', 
                                 Narrator.greeting); // Plays greeting audio
    
    Narrator.introduction = function(){
        greeting = Narrator.greeting()
        greeting.pause() // I have also tried :: greeting.play().then(() => {greeting.pause()})
        let introduction = new Audio('introduction.wav')
        introduction.play()
    }
        const introductionNarrator = document.querySelector('#introID').addEventListener('click', 
                                     Narrator.introduction); // Plays intro audio, but overlaps greeting audio and spits error
                                                                 

Whenever I call to 'pause()' any audio file that is playing, I catch the following error:

DOMException: The play() request was interrupted by a call to pause()

How can I pause the audio that's playing before playing the next one? Thanks!