[Dúvida] Inserir um audio no template

Oi Gente.. tudo bem?

Estou tentando colocar um audio no meu template e não consigo de jeito nenhum...

Ja tentei com {{audio}} com [attr.sr]="audio" e não vai de jeito nenhum

Testei a tag fora do src e o link imprimiu normalmente.

Vou deixar os códigos aqui:

##Component

import { Component } from '@angular/core';
import { DetalheVersoService } from 'src/app/servicos/detalhe-verso.service';


@Component({
  selector: 'app-detalhe-verso',
  templateUrl: './detalhe-verso.component.html',
  styleUrls: ['./detalhe-verso.component.css'],
})
export class DetalheVersoComponent {
  imagem = '';
  livro = '';
  capitulo = '';
  numVersiculo = '';
  verso = '';
  audio = '';


  constructor(private service: DetalheVersoService) {}

  ngOnInit(): void {
    this.service.listar().subscribe((detalhe) => {
      console.log(detalhe);
      this.imagem = 'imagens/' + detalhe.imagem.imageFile;
      this.livro = detalhe.livro.name;
      this.capitulo = detalhe.verso.chapterNumber;
      this.numVersiculo = detalhe.verso.verseNumber;
      this.verso = detalhe.verso.verse;
      this.audio = 'http://localhost:4200/audios/' + detalhe.audio.audioFile;
      console.log(this.audio);
    });
  }
}

###HTML

<!-- Page Content -->
<section id="page-content" class="sidebar-right">
  <div class="container">
    <div class="row">
      <!-- Blog -->
      <div id="blog" class="single-post">
        <!-- Post single item-->
        <div class="post-item">

          <div class="post-item-wrap">

            <div class="post-image">

              <img [attr.src]="imagem" class="img-fluid img-detalhe" alt="imagem do verso">

            </div>

            <div class="post-item-description">
              <h2> {{livro}} {{capitulo}} : {{numVersiculo}}</h2>


              <p class="verso"> {{verso}} </p>

            </div>

            <div class="post-audio">

              <audio class="video-js vjs-default-skin" controls preload="false" data-setup="{}">
                <source [attr.src]="audio" type="audio/mp3" />
              </audio>
            </div>

            <div class="line"></div>
            <h5>Compartilhe</h5>
            <div>
              <button type="button" class="btn btn-facebook">
                <i class="fab fa-facebook-f"></i>
              </button>
              <button type="button" class="btn btn-twitter">
                <i class="fab fa-twitter"></i>
              </button>
              <button type="button" class="btn btn-linkedin">
                <i class="fab fa-linkedin"></i>
              </button>
              <button type="button" class="btn btn-instagram">
                <i class="fab fa-instagram"></i>
              </button>
              <button type="button" class="btn btn-pinterest">
                <i class="fab fa-pinterest"></i>
              </button>

            </div>


          </div>
        </div>
      </div>
    </div>
  </div>

</section>
<!-- end: Page Content -->