在 jQuery 中“转换”具有多个音轨的音频播放器

Posted 2023-02-25

【中文标题】在 jQuery 中“转换”具有多个音轨的音频播放器

【英文标题】："Converting" in jQuery an audio player with multiple tracks

【发布时间】：2015-06-18 00:21:34

【问题描述】：

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

这是我现在在 JS 中的凌乱的 sn-p：

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" />

现在，这个 sn-p 有 2 个问题： 1）我需要单独定位 3 个不同的元素（对于我要预览的每首歌曲） 2）如果我在播放一首新歌的同时播放一首新歌，两首歌曲会重叠。

我认为用 jQuery 重写 sn-p 会容易得多。我该如何解决这 2 个问题？

这是 JsFiddle 的起点： http://jsfiddle.net/multiformeingegno/jdk0b5L4/

【参考方案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

【讨论】：

@MultiformeIngegno，一首曲目淡出，另一首开始？

是的，当我点击播放按钮时，如果一首曲目已经在播放，它会消失，而另一首则开始

是的，这会很棘手，您可能需要使用web-audio，这是cross-fade 的示例