如何在一個頁面上有兩個這樣的音頻播放器，而又不單擊另一個播放器或顯示隱藏播放列表

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是$（'。playlist li：first-child'）

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