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

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

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

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

多谢各位

html更改 您可以为此使用数据属性。 将动态id设置为aution id，该id也设置为data-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>

如果您有多个播放和音频，可以使用

class=“play”

代替

id=“play”

在

播放

上，单击查找最近的音频并播放或暂停该音频

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

---

问题是因为DOM中有多个

#play

和

#music

元素，而这些元素必须是唯一的。您可以通过在play按钮上使用一个类来解决这个问题，然后在click处理程序中使用DOM遍历来查找相关的

audio

元素。试试这个：

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

---

还要注意使用

toggleClass（）

简化在播放状态之间更改类。

请描述问题和您所做的更改。转储代码不会教育任何人。您还使用

#music

元素创建了相同的重复id问题。请描述问题以及您所做的更改。转储代码不会教育任何人。还要注意的是，jQuery对象没有

paused

属性或

play（）

或

pause（）

方法。您好，如果播放下一个音频，我们该怎么做？如果播放下一个音频，当前音频将暂停？我该怎么才能获得var音频的长度？audio.length未定义

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

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

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