好吧，我事先为我对javascript的无知表示歉意，因为除了最基本的东西之外，我没有什么经验。 这里有一个问题，而且我可能连措辞都没有正确，我想添加一个事件侦听器，每次我在音频播放器上点击play，next或previous按钮时都会触发该事件侦听器。

我已经通过点击播放列表中的单个歌曲标题添加了这个功能，但除此之外我就难倒了。 我确实想出了当我点击播放，下一个或上一个按钮时如何触发警报，但我就是不能将这两个按钮结合起来。

下面是我找到的点击单个歌曲标题的代码。。。

    // this works for manually clicking individual songs in the playlist

var items = document.querySelectorAll("#playlist text");
for(var i = 0; i < items.length; i++)
{
items[i].onclick = function(){
document.getElementById("display").value = this.innerHTML.replace('&amp;','&');
};
}

这里有它的全部内容来说明它的背景。。。

null

/*
    Default constructor configuration:
        autoplay: false,
        shuffle: false,
        loop: false,
        playerId: "audioPlayer",
        playlistId: "playlist",
        currentClass: "current-song"
        
    Methods:
        setLoop
        setShuffle
        toggleShuffle
        toggleLoop
        prevTrack
        nextTrack
    
    Can access player by .player variable
    example playlist.player.pause();
*/
 
class AudioPlaylist{
    randomizeOrder(){
        for (var i = this.trackOrder.length - 1; i > 0; i--) {
            var j = Math.floor(Math.random() * (i + 1));
            var temp = this.trackOrder[i];
            this.trackOrder[i] = this.trackOrder[j];
            this.trackOrder[j] = temp;
        }
        return this.trackOrder;
    }
    setTrack(arrayPos){
    
        var liPos = this.trackOrder[arrayPos]; // convert array index to html index
        this.player.src = $("#"+this.playlistId+ " li a").eq(liPos).attr("href");
        $("."+this.currentClass).removeClass(this.currentClass);
        $("#"+this.playlistId+ " li").eq(liPos).addClass(this.currentClass);
        this.trackPos = arrayPos; // update based on array index position
    }
    prevTrack(){
        if(this.trackPos == 0)
            this.setTrack(0);
        else
            this.setTrack(this.trackPos - 1);
        this.player.play();
    }
    nextTrack(){
        // if track isn't the last track in array of tracks, go to next track
        if(this.trackPos < this.length - 1)
            this.setTrack(this.trackPos+1);
        else{
            if(this.shuffle)
                this.randomizeOrder();
            this.setTrack(0);
        }
        this.player.play();
    }
    setLoop(val){
        if(val === true)
            this.loop = true;
        else
            this.loop = false;
        return this.loop;
    }
    setShuffle(val){
        if(val == this.shuffle) // if no change
            return val;
        else{
            if(val === true){
                this.randomizeOrder();
                this.shuffle = true;
            }
            else{
                this.shuffle = false;
                // empty track array, fill array with indexs in order
                this.trackOrder = [];
                for(var i = 0; i < this.length; i++){
                    this.trackOrder.push(i);
                }
                
                // jump array to track position of currently playing track
                this.trackPos =  this.trackOrder.indexOf($("."+this.currentClass).index());
            }
            return this.shuffle;
        }
    }
    toggleShuffle(){
        if(this.shuffle === true)
            this.setShuffle(false);
        else
            this.setShuffle(true);
        return this.shuffle;
    }
    toggleLoop(){
        if(this.loop === true)
            this.setLoop(false);
        else
            this.setLoop(true);
        return this.loop;
    }
    constructor(config = {} ){
        
        /***
        *
        *       setting defaults, and initialzing player 
        *
        */
        
        var classObj = this; // store scope for event listeners
        this.shuffle = (config.shuffle === true) ? true : false;
        this.playerId = (config.playerId) ? config.playerId : "audioPlayer";
        this.playlistId = (config.playlistId) ? config.playlistId : "playlist";
        this.currentClass = (config.currentClass) ? config.currentClass : "current-song"
        this.length = $("#"+this.playlistId+" li").length; 
        this.player = $("#"+this.playerId)[0];
        this.autoplay = (config.autoplay === true || this.player.autoplay) ? true : false;
        this.loop = (config.loop === true) ? true : false;
        this.trackPos = 0;
        this.trackOrder = [];
        for(var i = 0; i < this.length; i++){
            this.trackOrder.push(i);
        }
        
        if(this.shuffle)
            this.randomizeOrder();
        
        this.setTrack(this.trackPos);
        if(this.autoplay)
            this.player.play();
        
         /***
        *
        *       handle link clicks
        *
        */
        $("#"+this.playlistId+" li a ").click(function(e){
            e.preventDefault();
            // set track based on index of 
            classObj.setTrack(classObj.trackOrder.indexOf($(this).parent().index()));
            classObj.player.play();
        });
        
         /***
        *
        *       handle end of track
        *
        */
        
        this.player.addEventListener("ended", function(){
            // if last track ended
            if(classObj.trackPos < classObj.length - 1){
                classObj.setTrack(classObj.trackPos+1);
                classObj.player.play();
            }
            else{
                if(classObj.loop){
                    if(classObj.shuffle)
                        classObj.randomizeOrder();
                    classObj.setTrack(0);
                    classObj.player.play();
                }
            }
        });
    }
}


    // ================================== end of script ==================================
 

 /*
    Default constructor configuration:
        autoplay: false,
        shuffle: false,
        loop: false,
        playerId: "audioPlayer",
        playlistId: "playlist",
        currentClass: "current-song"
 */
 
    // loads the audio player
        var config = {
        autoplay: true, 
        loop: true,
        shuffle: false
        };
        var playlist = new AudioPlaylist(config);



    // ================================ end of main script ===============================

    // =========================== script i added and modified ===========================




    // this changes color of the shuffle button

    var count=1; function setColor(shuffle) { 
    var property = document.getElementById(shuffle); 
    if (count == 0) {
    property.style.color="#b80202"; count=1;    // off
    }else{
    property.style.color="#4fff38"; count=0;    // on
    }}



    // ================================== end of script ==================================

    // ======================== more script i added and modified =========================



    // this works for manually clicking individual songs in the playlist

    var items = document.querySelectorAll("#playlist text");
    for(var i = 0; i < items.length; i++)
    {
    items[i].onclick = function(){
    document.getElementById("display").value = this.innerHTML.replace('&amp;','&');
    };
    }

a:link      {text-decoration: none; font-family: Verdana; font-size: 16px; font-weight: normal;
        font-style: normal; font-variant: small-caps; line-height: 16px; color: #ffffff;}

a:visited   {text-decoration: none; font-family: Verdana; font-size: 16px; font-weight: normal;
        font-style: normal; font-variant: small-caps; line-height: 16px; color: #ffffff;}

a:hover     {text-decoration: none; font-family: Verdana; font-size: 16px; font-weight: normal;
        font-style: normal; font-variant: small-caps; line-height: 16px; color: #C0C0C0;}

a#a1        {text-decoration: none; font-family: Verdana; font-size: 22px; font-weight: normal;
        font-style: normal; font-variant: small-caps; line-height: 16px; color: #000000;}

a#a1:hover  {text-decoration: none; font-family: Verdana; font-size: 22px; font-weight: normal;
        font-style: normal; font-variant: small-caps; line-height: 16px; color: #ffffff;}

ul      {list-style-type: none; margin: 0; padding-top: 15px; padding-bottom: 15px;
        padding-left: 20px; padding-right: 20px;}

li      {list-style-type: none; margin: 0; padding-top: 5px; padding-bottom: 5px;}

audio       {background-color: #F0F0F0; width: 400px;height: 30px;}

input       {border-width:0px; border:none; outline:none; width:796px; text-decoration: none; 
        font-family: Verdana; font-size: 16px; font-weight: normal; font-style: normal; 
        font-variant: small-caps; line-height: 16px; color: black; text-align:center;
        background-color: #505050; color: #ffffff;}

#shuffle    {color:#b80202;}

#playlist   {font-family: Verdana; font-size: 16px; font-weight: normal; text-align:left;
        font-style: normal; font-variant: small-caps; line-height: 16px;}

#playlist .current-song a   {text-decoration: none; font-family: Verdana; font-size: 16px;
                font-weight: normal; font-style: normal; font-variant: small-caps;
                line-height: 16px; color: #45aeff;}

.container::-webkit-scrollbar   {display: none; /* Safari and Chrome */}

.audio:focus            {outline:0px;}

div#a0      {border-radius:3px; width:800px; margin-left:-400px; height:30px; background:#F0F0F0; 
        position:fixed; top:10px; bottom:25px; left:50%;}

div#a1      {border:0px solid red; width:100%; height:0px;}

div#a2      {float:left; width:100%; height:50px; text-align:center;}

div#b0      {border-radius:3px; width:800px; margin-left:-400px; height:30px; background:#989898; 
        position:fixed; top:50px; bottom:25px; left:50%;}

div#b1      {border:0px solid red; width:100%; height:4px;}

div#b2      {border:0px solid red; float:left; width:30%; text-align:right; margin-top: 2px;}

div#b3      {border:0px solid red; float:left; width:40%; text-align:center; margin-top: 3px;}

div#b4      {border:0px solid red; float:left; width:30%; text-align:left; margin-top: 2px;}

div#c0      {border-radius:3px; width:800px; margin-left:-400px; height:30px; background:#505050; 
        position:fixed; top:90px; bottom:25px; left:50%;}

div#c1      {border:0px solid red; width:100%; height:4px;}

div#c2      {float:left; width:100%; height:50px; text-align:center;}

div#d0      {border-radius:3px; width:800px; margin-left:-400px; min-height:100px; 
        background:#202020; position:fixed; top:130px; bottom:10px; left:50%; overflow:auto;}

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>HTML5 AudioPlayer with Playlist - test</title>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

</head>

<body class="container" style="background-color: black; overflow-y: scroll;">




<!-- section a -->




<div id="a0"> <div id="a1"></div> <div id="a2">

<audio class="audio" src="" controls id="audioPlayer">Sorry, your browser can't handle html5... 
pathetic really.</audio>

</div> </div>




<!-- section b -->




<div id="b0"> <div id="b1"></div>

<div id="b2">
<a id="a1" href="#/" onclick="playlist.prevTrack();">
&#8249;&#10094;&#8728;&#8901;&#8901;&#8901;</a></div>

<div id="b3">
<a href="#/" id="shuffle" onclick="setColor('shuffle'); playlist.toggleShuffle();">
Random Play</a></div>

<div id="b4">
<a id="a1" href="#/" onclick="playlist.nextTrack();">
&#8901;&#8901;&#8901;&#8728;&#10095;&#8250;</a></div>

</div>




<!-- section c -->




<div id="c0"> <div id="c1"></div> <div id="c2">
<input type="text" spellcheck="false" readonly id="display" 
value="This text will be replaced when onClick & onPlay is used properly." />

</div> </div>




<!-- section d -->




<div id="d0" class="container"> <ul id="playlist">

<li><a href ="music\song_01.mp3">
<text>This is the Title of Song_01</text></a></li>

<li><a href ="music\song_02.mp3">
<text>This is the Title of Song_02</text></a></li>

<li><a href ="music\song_03.mp3">
<text>This is the Title of Song_03</text></a></li>

<li><a href ="music\song_04.mp3">
<text>This is the Title of Song_04</text></a></li>

<li><a href ="music\song_05.mp3">
<text>This is the Title of Song_05</text></a></li>

<li><a href ="music\song_06.mp3">
<text>This is the Title of Song_06</text></a></li>

<li><a href ="music\song_07.mp3">
<text>This is the Title of Song_07</text></a></li>

<li><a href ="music\song_08.mp3">
<text>This is the Title of Song_08</text></a></li>

<li><a href ="music\song_09.mp3">
<text>This is the Title of Song_09</text></a></li>

<li><a href ="music\song_10.mp3">
<text>This is the Title of Song_10</text></a></li>

<li><a href ="music\song_11.mp3">
<text>This is the Title of song_11</text></a></li>

<li><a href ="music\song_12.mp3">
<text>This is the Title of song_12</text></a></li>

<li><a href ="music\song_13.mp3">
<text>This is the Title of song_13</text></a></li>

<li><a href ="music\song_14.mp3">
<text>This is the Title of song_14</text></a></li>

<li><a href ="music\song_15.mp3">
<text>This is the Title of song_15</text></a></li>

<li><a href ="music\song_16.mp3">
<text>This is the Title of song_16</text></a></li>

<li><a href ="music\song_17.mp3">
<text>This is the Title of song_17</text></a></li>

<li><a href ="music\song_18.mp3">
<text>This is the Title of song_18</text></a></li>

<li><a href ="music\song_19.mp3">
<text>This is the Title of song_19</text></a></li>

<li><a href ="music\song_20.mp3">
<text>This is the Title of Song_20</text></a></li>

<li><a href ="music\song_21.mp3">
<text>This is the Title of song_21</text></a></li>

<li><a href ="music\song_22.mp3">
<text>This is the Title of song_22</text></a></li>

<li><a href ="music\song_23.mp3">
<text>This is the Title of song_23</text></a></li>

<li><a href ="music\song_24.mp3">
<text>This is the Title of song_24</text></a></li>

<li><a href ="music\song_25.mp3">
<text>This is the Title of song_25</text></a></li>

<li><a href ="music\song_26.mp3">
<text>This is the Title of song_26</text></a></li>

<li><a href ="music\song_27.mp3">
<text>This is the Title of song_27</text></a></li>

<li><a href ="music\song_28.mp3">
<text>This is the Title of song_28</text></a></li>

<li><a href ="music\song_29.mp3">
<text>This is the Title of song_29</text></a></li>

<li><a href ="music\song_30.mp3">
<text>This is the Title of Song_30</text></a></li>

</ul> </div>




<!-- let the scripting begin! -->




<script src="jquery-2.2.4.js"></script>

</body>

</html>

null