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.
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.
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 (usuallyindex.html). Something like this:Your code works for me as-is, if I change the mp3 file to one where I know the precise location: