javascript - jQuery 中的 "Converting"具有多个音轨的音频播放器

Question

我有一个轨道列表，我想通过播放和暂停按钮提供 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" />

现在，这个片段有两个问题:
1)我需要单独定位 3 个不同的元素(对于我要预览的每首歌曲)
2)如果我在播放一首新歌时播放一首新歌，则两首歌曲重叠。

我认为用 jQuery 重写代码段会容易得多。我该如何解决这两个问题？

这是从 JsFiddle 开始的:
http://jsfiddle.net/multiformeingegno/jdk0b5L4/

Answer 1

你可以像这样使用一个普通的监听器:

$('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';
}

fiddle demo