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

Posted 2023-02-25

【中文标题】切换播放/暂停按钮（多个音频）

【英文标题】：Toggle play/pause button (Multiple audios)

【发布时间】：2017-08-16 07:18:35

【问题描述】：

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

        <?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，如果需要，如何正确处理？

非常感谢！

【参考方案1】：

问题是因为您在 DOM 中有多个 #play 和 #music 元素，而它们必须是唯一的。您可以通过在播放按钮上使用类来解决此问题，然后在单击处理程序中使用 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() 来简化播放状态之间的类更改。

【讨论】：

嗨，如果播放下一个音频，我们该怎么办当前音频将暂停

嗨，我们怎样才能获得 var audio 的长度？ audio.length 未定义

【参考方案2】：

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>

js 变化

获取 data-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')
    
);
);

【讨论】：

请描述问题以及您所做的更改。转储代码不会教育任何人。您还使用 #music 元素创建了相同的重复 ID 问题。

【参考方案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')
        
    );
);

【讨论】：

请描述问题以及您所做的更改。转储代码不会教育任何人。另请注意，jQuery 对象没有paused 属性或play() 或pause() 方法。