OnClick 函数在 div 类 blog-slider__img 中不起作用

Question

我想知道是否有人可以帮助我，当我将按钮放在这个div上时，无法单击它来使其播放音频。

我做错了什么？

索引

<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>

我尝试过更改元素的位置，但没有任何效果。

Answer 1

一定是javascript找不到mp3文件的错误。您的 mp3 文件是否位于子文件夹中（例如

public_html/music

- 或 -

public_html/assets

- 或 - 等）？如果是这样，您必须指定如何从包含此代码的页面中查找 mp3 文件（通常为

index.html

）。像这样的东西：

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

如果我更改 mp3 文件，相同的代码适用于我：

<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="//doswerx.com/website/assets/Cars.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>