Javascript &引用；转换；在jQuery中，有多个音轨的音频播放器

我有一个曲目列表，我想提供3首歌曲的预览，只需一个播放和暂停按钮

下面是我现在在JS中看到的混乱片段：

var playing = false;
playpause01.addEventListener('click', function () {
    if (!playing) {
        document.getElementById('player01').play();
        this.src = 'files/img/pause.png';
    } else {
        document.getElementById('player01').pause();
        this.src = 'files/img/play.png';
    }
    playing = !playing;
});
playpause04.addEventListener('click', function () {
    if (!playing) {
        document.getElementById('player04').play();
        this.src = 'files/img/pause.png';
    } else {
        document.getElementById('player04').pause();
        this.src = 'files/img/play.png';
    }
    playing = !playing;
});
playpause13.addEventListener('click', function () {
    if (!playing) {
        document.getElementById('player13').play();
        this.src = 'files/img/pause.png';
    } else {
        document.getElementById('player13').pause();
        this.src = 'files/img/play.png';
    }
    playing = !playing;
});

对于HTML中的每一首曲目：

<audio id="player01" src="files/blabla.ogg"></audio>
        <img style="position:absolute;left:-80px" id="playpause01" src="files/img/play.png" />

---

您可以使用如下常见侦听器：

$('ol').on('click', 'li img', playAudio);
var currentlyPlaying;
function playAudio(e){
    var audElement = $(e.target).siblings('audio')[0];
    window.aa = audElement;
    if(audElement && audElement.paused){
        if(currentlyPlaying)
            currentlyPlaying.pause();            
        currentlyPlaying = audElement;
        addListeners(currentlyPlaying);
        currentlyPlaying.play();            
    }else if(audElement){
        audElement.pause();
    }
}

function addListeners(aud){
    aud.removeEventListener('ended', onPause);  // remove done to remove previous listener
    aud.removeEventListener('pause', onPause);
    aud.removeEventListener('playing', onPlay);
    aud.addEventListener('ended', onPause);
    aud.addEventListener('pause', onPause);
    aud.addEventListener('playing', onPlay);
}

function onPlay(e){
    $(e.target).siblings('img')[0].src = 'http://luca-longobardi.com/files/img/pause.png';
}
function onPause(e){
    e.target.currentTime = 0;   // reset to beginning
    $(e.target).siblings('img')[0].src = 'http://luca-longobardi.com/files/img/play.png';
}

@MultiformingEGNO，一首曲目淡出，另一首曲目开始？是的，当我单击播放按钮时，如果一首曲目已经播放，它会淡出，而另一首曲目开始播放。这将是一个棘手的问题，您可能需要使用
web audio
，下面是一个示例