我怎么能在一个页面上有两个这样的音频播放器，而不点击一个，另一个播放或显示隐藏播放列表

Question

这是完整的HTML

<div id="1" class="example">

    <div class="player">
        <div class="pl"></div>
        <div class="title"></div>
        <div class="artist"></div>
        <div class="cover"></div>
        <div class="controls">
            <div class="play"></div>
            <div class="pause"></div>
            <div class="rew"></div>
            <div class="fwd"></div>
        </div>
        <div class="volume"></div>
        <div class="tracker"></div>
    </div>
    <ul class="playlist hidden">
        <li audiourl="01.mp3" cover="cover1.jpg" artist="Artist 1">01.mp3</li>
        <li audiourl="02.mp3" cover="cover2.jpg" artist="Artist 2">02.mp3</li>
        <li audiourl="03.mp3" cover="cover3.jpg" artist="Artist 3">03.mp3</li>
        <li audiourl="04.mp3" cover="cover4.jpg" artist="Artist 4">04.mp3</li>
        <li audiourl="05.mp3" cover="cover5.jpg" artist="Artist 5">05.mp3</li>
        <li audiourl="06.mp3" cover="cover6.jpg" artist="Artist 6">06.mp3</li>
        <li audiourl="07.mp3" cover="cover7.jpg" artist="Artist 7">07.mp3</li>
    </ul>
</div>

<div id="2" class="example">

    <div class="player">
        <div class="pl"></div>
        <div class="title"></div>
        <div class="artist"></div>
        <div class="cover"></div>
        <div class="controls">
            <div class="play"></div>
            <div class="pause"></div>
            <div class="rew"></div>
            <div class="fwd"></div>
        </div>
        <div class="volume"></div>
        <div class="tracker"></div>
    </div>
    <ul class="playlist hidden">
        <li audiourl="01.mp3" cover="cover1.jpg" artist="Artist 1">01.mp3</li>
        <li audiourl="02.mp3" cover="cover2.jpg" artist="Artist 2">02.mp3</li>
        <li audiourl="03.mp3" cover="cover3.jpg" artist="Artist 3">03.mp3</li>
        <li audiourl="04.mp3" cover="cover4.jpg" artist="Artist 4">04.mp3</li>
        <li audiourl="05.mp3" cover="cover5.jpg" artist="Artist 5">05.mp3</li>
        <li audiourl="06.mp3" cover="cover6.jpg" artist="Artist 6">06.mp3</li>
        <li audiourl="07.mp3" cover="cover7.jpg" artist="Artist 7">07.mp3</li>
    </ul>
</div>

这是完整的js

jQuery(document).ready(function() {

    // inner variables
    var song;
    var tracker = $('.tracker');
    var volume = $('.volume');



    function initAudio(elem) {
        var url = elem.attr('audiourl');
        var title = elem.text();
        var cover = elem.attr('cover');
        var artist = elem.attr('artist');

        $('.player .title').text(title);
        $('.player .artist').text(artist);
        $('.player .cover').css('background-image','url(data/' + cover+')');;

        song = new Audio('data/' + url);

        // timeupdate event listener
        song.addEventListener('timeupdate',function (){
            var curtime = parseInt(song.currentTime, 10);
            tracker.slider('value', curtime);
        });

        $('.playlist li').removeClass('active');
        elem.addClass('active');
    }
    function playAudio() {
        song.play();

        tracker.slider("option", "max", song.duration);

        $('.play').addClass('hidden');
        $('.pause').addClass('visible');
    }
    function stopAudio() {
        song.pause();

        $('.play').removeClass('hidden');
        $('.pause').removeClass('visible');
    }

    // play click
    $('.play').click(function (e) {
        e.preventDefault();

        playAudio();
    });

    // pause click
    $('.pause').click(function (e) {
        e.preventDefault();

        stopAudio();
    });

    // forward click
    $('.fwd').click(function (e) {
        e.preventDefault();

        stopAudio();

        var next = $('.playlist li.active').next();
        if (next.length == 0) {
            next = $('.playlist li:first-child');
        }
        initAudio(next);
    });

    // rewind click
    $('.rew').click(function (e) {
        e.preventDefault();

        stopAudio();

        var prev = $('.playlist li.active').prev();
        if (prev.length == 0) {
            prev = $('.playlist li:last-child');
        }
        initAudio(prev);
    });

    // show playlist
    $('.pl').click(function (e) {
        e.preventDefault();

        $('.playlist').fadeIn(300);
    });

    // playlist elements - click
    $('.playlist li').click(function () {
        stopAudio();
        initAudio($(this));
    });

    // initialization - first element in playlist
    initAudio($('.playlist li:first-child'));

    // set volume
    song.volume = 0.8;

    // initialize the volume slider
    volume.slider({
        range: 'min',
        min: 1,
        max: 100,
        value: 80,
        start: function(event,ui) {},
        slide: function(event, ui) {
            song.volume = ui.value / 100;
        },
        stop: function(event,ui) {},
    });

    // empty tracker slider
    tracker.slider({
        range: 'min',
        min: 0, max: 10,
        start: function(event,ui) {},
        slide: function(event, ui) {
            song.currentTime = ui.value;
        },
        stop: function(event,ui) {}
    });
});

我只想让您点击的播放器同时播放而不是全部播放，如果您点击页面上的所有播放器打开播放列表，则与下拉播放列表相同。希望我有意义并提供足够的信息..如果有人可以帮助请

Answer 1

我希望你可以尝试这样的东西遍历div树。

console.log($(elem).parent().closest('div.example').attr('id'));

elem是$（＆＃39; .playlist li：first-child＆＃39;）在你的情况下

initAudio($('.playlist li:first-child'));