使用 jQuery 单独播放每个音频元素

Posted 2023-02-25

【中文标题】使用 jQuery 单独播放每个音频元素

【英文标题】：Play each audio element individually using jQuery

【发布时间】：2020-12-11 12:26:04

【问题描述】：

我在一个 html 页面中有多个 <audio> 元素。问题是 jQuery 脚本将所有音频一起播放，我需要它单独播放它们。

我部署了它，以便您更好地了解：https://suspicious-williams-5196e6.netlify.app/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inline-bl" style="display: inline;">
  <a href="#" title="Listen to the song" class="player-controls">
    <span class="play"></span>
    <span class="pause"></span>
  </a>
  <audio id="player">
    <source src="https://www.dropbox.com/s/t32waag3ib20b28/OneDance-Drake.mp3?raw=1" type="audio/mp3">
  </audio>
</div>

var getaudio = $('#player')[0],
  mouseovertimer,
  audiostatus = 'off',
  playerControls = ".player-controls";

$(document).on('click touch', playerControls, function(e) 
  e.preventDefault();
  if (!$(playerControls).hasClass("playing")) 
    if (audiostatus == 'off') 
      $(playerControls).addClass('playing');
      getaudio.load();
      getaudio.play();
      window.clearTimeout(mouseovertimer);
      audiostatus = 'on';
      return false;
     else if (audiostatus == 'on') 
      $(playerControls).addClass('playing');
      getaudio.play();
    
   else if ($(playerControls).hasClass("playing")) 
    getaudio.pause();
    $(playerControls).removeClass('playing');
    window.clearTimeout(mouseovertimer);
    audiostatus = 'on';
  
  return false;
);

$('#player').on('ended', function() 
  $(playerControls).removeClass('playing');
  audiostatus = 'off';
);

.player-controls 
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 40px;
  height: 1.25em;
  position: relative;
  text-decoration: none;
  width: 1.75em;
  -webkit-transition: transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out;


.player-controls .play,
.player-controls .pause 
  display: block;
  background: url("images/play.svg?raw=1") no-repeat 0 0;
  background-size: 100% 100%;
  height: 1.75em;
  position: absolute;
  width: 1.75em;
  z-index: 5;


.player-controls .play::before,
.player-controls .pause::before,
.player-controls .play::after,
.player-controls .pause::after 
  -webkit-border-radius: 1000px;
  -moz-border-radius: 1000px;
  border-radius: 1000px;
  content: "";
  display: block;
  position: absolute;
  height: 1.75em;
  right: 0;
  top: 0;
  width: 1.75em;
  z-index: 0;


.player-controls .play::before 
  box-shadow: 0 0 0 rgba(255, 255, 255, 0);
  -webkit-transition: all 0.25s linear;
  transition: all 0.25s linear;


.player-controls .pause 
  background-image: url("images/pause.svg?raw=1");
  opacity: 0;
  right: 0;
  top: 0;


.player-controls.playing .play 
  opacity: 0;


.player-controls.playing .pause 
  opacity: 1;


.player-controls:hover 
  transform: scale(1.1);

【问题讨论】：

此站点上显示的 HTML 仅显示一组“播放器控件”和一个 audio 元素。请展示您如何包含多个音频元素。

【参考方案1】：

在选择音频元素时，您需要像这样使用 jquery 使用兄弟选择器。

var mouseovertimer,
    audiostatus = 'off',
    playerControls = ".player-controls";
    
    $(document).on('click touch', playerControls, function(e) 
    var getaudio = $(this).siblings('audio');
    e.preventDefault();
    if(!$(this).hasClass("playing")) 
        if(audiostatus == 'off') 
            $(this).addClass('playing');
            getaudio[0].load();
            getaudio[0].play();
            window.clearTimeout(mouseovertimer);
            audiostatus = 'on';
            return false;
         else if(audiostatus == 'on') 
            $(this).addClass('playing');
            getaudio[0].play();
        
       else if($(this).hasClass("playing")) 
        getaudio[0].pause();
        $(this).removeClass('playing');
        window.clearTimeout(mouseovertimer);
        audiostatus = 'on';
      
      return false;
    );
    $('#player').on('ended', function() 
    $(playerControls).removeClass('playing');
    audiostatus = 'off';
    );

尝试用上面的代码替换 jquery 代码。

我对您的代码所做的更改：

我已将事件侦听器内的 getaudio 实例化向下移动。 另外，在实例化它时，请确保您像这样使用它： var getaudio = $(this).siblings('audio');

并且还从所有<audio> 标签中删除 id，因为它们是重复的并没有任何用途！

【讨论】：

您可以在这里创建可重现的代码吗？

没关系我更新了答案，我在你的网站上测试了这个，请检查更新的答案