Audio CRS as a variable

Question

Good morning, I’m having a problem adding the src of an audio passing through a modal. The page works as follows: 1) The user clicks on a button that opens a modal with a list of audios. 2) Inside the modal there is an Audios array with the following parameters:

{
        id: 1,
        nome: 'Música 1!',
        music: '/assets/musics/bensound-littleidea.mp3',
        image: '/assets/logo.png'
    },

3) After selecting the audio inside the modal, it should present the audio on the home page

<div data-tap-disabled="true">
       <audio preload="auto" controls #audio>
         <source src="{{music}}"> //caminho do audio aqui
          <p>console.log(data.music)</p>
         </audio>
     </div>

Gave a console.log(responseModal.data.music); to see if at least it takes the path, and is working, it returns me the audio path.

I need to put this path in src={}} but it’s not working.

Array of songs:

public musicaList: any[] = [
    {
        id: 1,
        nome: 'Música 1!',
        music: '/assets/musics/bensound-littleidea.mp3',
        image: '/assets/logo.png'
    },
    {
        id: 2,
        nome: 'Música 2!',
        music: '/assets/musics/bensound-summer.mp3',
        image: '/assets/logo.png'
    }

];

Function to take the path:

pegaMusica(music : any) {
    let parametroDeResposta = {music};
    this.modalCtrl.dismiss(parametroDeResposta);

}

Function of the main page after giving Ismiss in modal:

 modal.onDidDismiss().then((responseModal: OverlayEventDetail) =>{
      if(responseModal !== null){
        console.log(responseModal.data.music);

      }
    })

Answer 1

I tidied up by adding the modal response to a variable and given id (audio-player) to the audio div.

 modal.onDidDismiss().then((responseModal: OverlayEventDetail) =>{
      if(responseModal !== null){
        console.log(responseModal.data.music);
        this.music = responseModal.data.music;
          document.getElementById('audio-player').load();
      }