切换播放/暂停按钮（多个音频）

Question

我的网页上有多个音频，每个都有播放/暂停按钮。

 <?php if (have_posts()) : ?> 

     <?php 

     // the query 
     $predigten_all_query = new WP_Query(array(
      'post_type'=>'predigten', 
      'post_status'=>'publish', 
      'posts_per_page'=>-1)); ?> 

     <?php if ($predigten_all_query->have_posts()) : ?> 

     <div class="content-box"> 
      <!-- the loop --> 
      <?php while ($predigten_all_query->have_posts()) : $predigten_all_query->the_post(); ?> 

      <?php 
       // vars 
       $mp3 = get_field('mp3'); 
       $mp3_url = $mp3['url']; 
      ?> 
      <div class="archive-content"> 
       <div class="play-wrap"> 
        <audio src="<?php echo $mp3_url; ?>" id="music"></audio> 
        <i class="fa fa-play" id="play"></i> 
       </div> 
       <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3><br> 
       <a href="<?php echo $mp3_url; ?>" class="mp3-btn" download> 
        <i class="fa fa-share-square-o"></i> 
       </a> 
      </div> 

      <?php endwhile; ?> 
      <!-- end of the loop --> 
     </div> 

这是我的脚本，它改变了图标类，以便它可以切换到“播放”或“暂停”图标。

jQuery(document).ready(function($) { 
    $("#play").click(function() { 
     var audio = document.getElementById('music'); 
     if (audio.paused) { 
      audio.play(); 
      $('#play').removeClass('fa fa-play') 
      $('#play').addClass('fa fa-pause') 
     } else { 
      audio.pause(); 
      audio.currentTime = 0 
      $('#play').removeClass('fa fa-pause') 
      $('#play').addClass('fa fa-play') 
     } 
    }); 
}); 

问题是，这只适用于我的第一个音频按钮。我是否需要创建一个动态ID，如果我需要这样做，如何做一切正确？

非常感谢！

Answer 1

的问题是，因为你必须在DOM多个#play和​​元素时都必须是唯一的。您可以通过在播放按钮上使用类来解决问题，然后在点击处理程序中使用DOM遍历来查找相关的audio元素。试试这个：

<div class="play-wrap"> 
    <audio src="<?php echo $mp3_url; ?>" class="music"></audio> 
    <i class="fa fa-play play"></i> 
</div> 

$(".play").click(function() { 
    var audio = $(this).closest('.play-wrap').find('.music')[0]; 

    if (audio.paused) { 
    audio.play(); 
    } else { 
    audio.pause(); 
    audio.currentTime = 0 
    } 

    $(this).toggleClass('fa-play fa-pause'); 
}); 

还要注意使用toggleClass()简化播放状态之间的阶层变化。

Answer 2

html更改 您可以使用attr数据。 设置动态ID，以欧雄ID和ID也在数据music_id

<div class="play-wrap"> 
<audio src="<?php echo $mp3_url; ?>" id="music1"></audio> 
<i class="fa fa-play" id="play" data-music_id="music1"></i> 
</div> 

JS设置为改变

获取数据，music_id并传递到的document.getElementById

jQuery(document).ready(function($) { 
$("#play").click(function() { 
var music_id = $(this).data('music_id'); 
    var audio = document.getElementById(music_id); 
    if (audio.paused) { 
     audio.play(); 
     $('#play').removeClass('fa fa-play') 
     $('#play').addClass('fa fa-pause') 
    } else { 
     audio.pause(); 
     audio.currentTime = 0 
     $('#play').removeClass('fa fa-pause') 
     $('#play').addClass('fa fa-play') 
    } 
}); 
}); 

Answer 3

你如果您有多个播放和音频，可以使用class="play"而不是id="play"。

在play点击查找closest音频和播放或暂停该音频。

<div class="play-wrap"> 
<audio src="<?php echo $mp3_url; ?>" class="music"></audio> 
<i class="fa fa-play" class="play"></i> 
</div> 
<div class="play-wrap"> 
<audio src="<?php echo $mp3_url; ?>" class="music"></audio> 
<i class="fa fa-play" class="play"></i> 
</div> 

的js改变

jQuery(document).ready(function($) { 
    $(".play").click(function() { 
     var audio = $(this).closest('.audio'); 
     if (audio.paused) { 
      audio.play(); 
      $(this).removeClass('fa fa-play') 
      $(this).addClass('fa fa-pause') 
     } else { 
      audio.pause(); 
      audio.currentTime = 0 
      $(this).removeClass('fa fa-pause') 
      $(this).addClass('fa fa-play') 
     } 
    }); 
});