javascript - JS控制音乐播放列表

问题描述

问 题

需求：用jquery写一个音乐播放列表时，可以暂停/播放选中的单个声音，且一则声音正在播放时，点击另一则声音切换播放，并暂停上一则播放。

这里是一个动态加载的ul循环列表html

{{#notEmpty}}
<li class="detail-li clearfix" data-track-id="{{trackId}}">
  <audio src="{{trackUrl}}" class="list-trackUrl"></audio>
  <a href="" class="left list-play"><img class="play-img" src="../../image/my/list_bofang.png" alt=""></a>
</li>
{{/notEmpty}}

这是我的js代码，已实现第一个需求，即暂停/播放选中的单个声音

$(document).on('click', '.list-play', function(e){
      e.preventDefault();
      var $audio=$(this).parents('.detail-li').find('.list-trackUrl')[0];
      if ($audio.paused) {
        $audio.play();
      } else {
        $audio.pause();
      }
    });

也实现了第二个需求，一则声音正在播放时，点击另一则声音切换播放，并暂停上一则播放。

$(document).on('click', '.list-play', function(e){
      e.preventDefault();
      var $audio=$(this).parents('.detail-li').find('.list-trackUrl')[0];
      
      $('audio').not(this).each(function(){
        this.pause();
      });

      if ($audio.paused) {
        $audio.play();
      } else {
        $audio.pause();
      }
    });

可是，两个需求加在一块，没法同时达到我想要的效果：可以暂停/播放选中的单个声音，且一则声音正在播放时，点击另一则声音切换播放，并暂停上一则播放。请求要怎么写才能实现一个真正的音乐播放列表呢？

解决方案

$(document).on('click', '.list-play', function (e) {
    e.preventDefault();
    var $audio = $(this).parents('.detail-li').find('.list-trackUrl')[0];

    $('audio').not(this).each(function () { // 这里this获取到的其实是'.list-play'，所以这里not其实并没有起到它应有的效果:将点击目标所对应的audio排除在外
        this.pause();
    });

    if ($audio.paused) {
        $audio.play();
    } else {
        $audio.pause();
    }
});

修改过后的代码：简单粗暴版

$(document).on('click', '.list-play', function (e) {
    e.preventDefault();
    var $audio = $(this).parents('.detail-li').find('.list-trackUrl')[0];

    if ($audio.paused) {
        $('audio').each(function () { // 直接把所有全部其他audio全部暂停
            this.pause();
        });
        $audio.play(); // 开始自己的播放
    } else {
        $audio.pause();
    }
});

稍微优化版

$(document).on('click', '.list-play', function (e) {
    e.preventDefault();
    var $audio = $(this).parents('.detail-li').find('.list-trackUrl')[0];

    if ($audio.paused) {
        $('audio.playOn').pause(); // 只暂停拥有播放标记的audio
        $('audio.playOn').removeClass('playOn'); // 去除播放标记
        $audio.play();
        $audio.addClass("playOn"); // 对正在播放的audio添加class为playon的标记
        // 去掉了列表循环但是增加了每次点击两次的增删class操作。
    } else {
        $audio.pause();
    }
});

其他小伙伴推荐的修改src方式，我觉得挺好的。不过有一个优点，或也能算是缺点，就是没有预加载，这个可能需要看具体的使用情况而定。

这篇关于javascript - JS控制音乐播放列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！