时间戳

首页 > 解决方案 > 单击下一步按钮时如何突出显示当前播放的音频

jquery - 单击下一步按钮时如何突出显示当前播放的音频

问题描述

单击“下一个”和“上一个”按钮时，我试图让当前正在播放的音频在播放列表中突出显示，现在它仅在单击音轨时突出显示。


<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="working_files/styles.css" title="Default" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="working_files/custom.js"></script>
</head>
<body>
<div id="player">
  <a href="#" class="audio prev"><span>Prev</span></a>
 <audio controls></audio>
  <a href="#" class="audio next"><span>Next</span></a>
  <br><span class="audio name"></span>
</div>
<div id="list">
  <p><a href="#" class="audio play" data-frogsong-id="AmericanToad_Call"><span active>1. American Toad Call</span></a></p>
  <p><a href="#" class="audio play" data-frogsong-id="Bullfrog_Call"><span class="sound">2. Bullfrog Call</span></a></p>
  <p><a href="#" class="audio play" data-frogsong-id="CopesGrayTreefrog_Call"><span class="sound">3. Treefrog Call</span></a></p>
  <p><a href="#" class="audio play" data-frogsong-id="CricketFrog_Call"><span class="sound">4. Cricket Frog Call</span></a></p>
  <p><a href="#" class="audio play" data-frogsong-id="EasternGrayTreefrog_Call"><span class="sound">5. EasternGray Treefrog Call</span></a></p>
  <p><a href="#" class="audio play" data-frogsong-id="FowlersToad_Call"><span class="sound">6. Fowlers Toad Call</span></a></p>
  <p><a href="#" class="audio play" data-frogsong-id="GreenFrog_Call"><span class="sound">7. Green Frog Call</span></a></p>
  <p><a href="#" class="audio play" data-frogsong-id="NorthernLeopardFrog_Call"><span class="sound">8. Northern Leopard Frog Call</span></a></p>
  <p><a href="#" class="audio play" data-frogsong-id="PickeralFrog_Call"><span class="sound">9. Pickeral Frog Call</span></a></p>
  <p><a href="#" class="audio play" data-frogsong-id="PlainsLeopardFrog_Call"><span class="sound">10. Plains Leopard Frog Call</span></a></p>
  <p><a href="#" class="audio play" data-frogsong-id="SpringPeeper_Call"><span class="sound">11. Spring Peeper Call</span></a></p>
  <p><a href="#" class="audio play" data-frogsong-id="WesternChorusFrog_Call"><span class="sound">12. Western Chorus Frog Call</span></a></p>
  <p><a href="#" class="audio play" data-frogsong-id="WoodFrog_Call"><span class="sound">13. Wood Frog Call</span></a></p>
</div>
<script>
  $('span').on('click', function() {
  $('span').removeClass('active');
  $(this).addClass('active');
});
</script>
</body>
</html>


window.Formaweb = window.Formaweb || {};
window.Formaweb.Player = function() {
  'use strict';
  var audio;
  var playlist;
  var len;
  var current;
  init();
  function init(){
    current = 0;
    audio = $('audio')[0];
    playlist = [
      {name: '1. American Toad Call', path: 'frog_sounds/AmericanToad_Call.mp3', id: 'AmericanToad_Call'},
      {name: '2. Bullfrog Call', path: 'frog_sounds/Bullfrog_Call.mp3', id: 'Bullfrog_Call'},
      {name: '3. Treefrog Call', path: 'frog_sounds/CopesGrayTreefrog_Call.mp3', id: 'CopesGrayTreefrog_Call'},
      {name: '4. Cricket Frog Call', path: 'frog_sounds/CricketFrog_Call.mp3', id: 'CricketFrog_Call'},
      {name: '5. EasternGray Treefrog Call', path: 'frog_sounds/EasternGrayTreefrog_Call.mp3', id: 'EasternGrayTreefrog_Call'},
      {name: '6. Fowlers Toad Call', path: 'frog_sounds/FowlersToad_Call.mp3', id: 'FowlersToad_Call'},
      {name: '7. Green Frog Call', path: 'frog_sounds/GreenFrog_Call.mp3', id: 'GreenFrog_Call'},
      {name: '8. Northern Leopard Frog Call', path: 'frog_sounds/NorthernLeopardFrog_Call.mp3', id: 'NorthernLeopardFrog_Call'},
      {name: '9. Pickeral Frog Call', path: 'frog_sounds/PickeralFrog_Call.mp3', id: 'PickeralFrog_Call'},
      {name: '10. Plains Leopard Frog Call', path: 'frog_sounds/PlainsLeopardFrog_Call.mp3', id: 'PlainsLeopardFrog_Call'},
      {name: '11. Spring Peeper Call', path: 'frog_sounds/SpringPeeper_Call.mp3', id: 'SpringPeeper_Call'},
      {name: '12. Western Chorus Frog Call', path: 'frog_sounds/WesternChorusFrog_Call.mp3', id: 'WesternChorusFrog_Call'},
      {name: '13. Wood Frog Call', path: 'frog_sounds/WoodFrog_Call.mp3', id: 'WoodFrog_Call'},
    ];

    len = playlist.length - 1;
    audio.addEventListener('ended', function(e){
    run(playlist[0], audio);
      next();
    });
    $('.audio.next').on('click', function(){
      next();
      run(playlist[current], audio);

      return false;
    });
    $('.audio.prev').on('click', function(){
      prev();
      run(playlist[current], audio);

      return false;
    });

    $('.audio.play').on('click', function(){
      var frogsong_id = $(this).attr('data-frogsong-id');

      if(frogsong_id != undefined){
        playById(frogsong_id);
      }

      return false;
    });
  }
  function run(frogsong, player) {
  $('.audio.name').text(frogsong.name);
  player.src = frogsong.path;
    audio.load();
    audio.play();
  }
function next(){
current++;
if(current > len) current = 0;
  }

  function prev(){
    current--;
    if(current < 0) current = 0;
  }

function playById(id){
    var playlist_id = undefined;

    $.each(playlist, function(index, value){
      if(value.id == id){
        playlist_id = index;
      }
    });

    if(playlist_id != undefined){
      current = playlist_id;
      run(playlist[current], audio);
    }
  }
}
$(document).ready(function(){
var player = window.Formaweb.Player(); 
});


#player {
  text-align: center;
  background:#e6e6e6;
  border: 1px solid;
  width: 400px;
  padding:10px;
}
#player a {
  width: 100px;
  font-size: 14px;
  padding: 5px;
  border: #000 2px solid;
  background: #ddd;
  cursor: pointer;
  color: #000
}
#player span {
  margin-top: -10px;
}
audio {
  width: 300px;
  height: 55px;
}

#list {
  width: 422px;
}

#list span {
color: #000000;
font-family: Verdana, Arial, Helvetica;
background: #c1c1c1;
display: block;
border: 1px solid;
padding:5px;
}

#list span.active {
  background: #736e69;
}

#list a:hover span {
  color: #fff;
  text-decoration:none;
}

div p {
  margin:0;
    }

div a {
  text-decoration:none;
  }

单击“下一个”和“上一个”按钮时，如何在播放列表中突出显示当前正在播放的音频，我们将不胜感激。非常感谢。

标签： jquery

解决方案

使用与 data-frogsong-id 匹配的查询选择器，然后获取子项（这是您想要获取的 span 元素）并将突出显示类放在上面。

$('span').removeClass('active');
$('a[data-frogsong-id=' + playlist[current].id + ']').children().addClass ('active')

您可以将它放在 run 方法中，这样您就不必关心下一个和上一个按钮。

推荐阅读