切換播放/暫停按鈕（多個音頻）

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') 
     } 
    }); 
});