Function OnClick doesn't work inside div class blog-slider__img

Question

I would like to know if anyone can help me, when I place the button on this div, it is impossible to click on it to make it play the audio.

enter image description here

What am I doing wrong?

INDEX

<div class="blog-slider">
  <div class="blog-slider__wrp swiper-wrapper">                
    <div class="blog-slider__item swiper-slide">
      <div class="blog-slider__img">
      <audio id="player" class="blog-slider__item swiper-slide" src="cazuar.mp3"></audio>
        <div>
    <button style="position: absolute;" onclick="document.getElementById('player').play()">Play</button>
</div>
        <img src="https://images.unsplash.com/photo-1545299303-fcc2d0ce345b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"alt="">
      </div>
      <div class="blog-slider__content">
        <span class="blog-slider__code" style="text-align: center;">O gigante pré-histórico</span> 
        <div class="blog-slider__title" style="text-align: center;" >Casuar </div>
        <div class="blog-slider__title1" style="text-align: center;">Casuarius spp.</div>

I've tried changing the position of the elements, but nothing works.

Answer 1

It must be an error with the javascript not finding the mp3 file. Is your mp3 file in a subfolder (e.g. public_html/music -or- public_html/assets -or- etc.) ? If so you must specify how to find the mp3 file from the page containing this code (usually index.html). Something like this:

<audio id="player" class="blog-slider__item swiper-slide" src="music/cazuar.mp3"></audio>

Your code works for me as-is, if I change the mp3 file to one where I know the precise location:

<div class="blog-slider">
  <div class="blog-slider__wrp swiper-wrapper">                
    <div class="blog-slider__item swiper-slide">
      <div class="blog-slider__img">
      <audio id="player" class="blog-slider__item swiper-slide" src="//filesamples.com/samples/audio/mp3/sample4.mp3"></audio>
        <div>
    <button style="position: absolute;" onclick="document.getElementById('player').play()">Play</button>
</div>
        <img src="https://images.unsplash.com/photo-1545299303-fcc2d0ce345b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"alt="">
      </div>
      <div class="blog-slider__content">
        <span class="blog-slider__code" style="text-align: center;">O gigante pré-histórico</span> 
        <div class="blog-slider__title" style="text-align: center;" >Casuar </div>
        <div class="blog-slider__title1" style="text-align: center;">Casuarius spp.</div>