Jquery 如何对页面上的多个音频文件使用相同的javascript？

我很难在我的页面上复制此代码，以便为几个不同的音频文件播放器工作。是否有一种方法可以根据我正在与哪个音频播放器交互来动态切换音频

任何帮助都将不胜感激！这是我完成整个网站工作的最后一步——你可以看到整个网站

var player1，onplayer1，player1，timeline1，player1，timelineWidth1；
jQuery（窗口）.on（“加载”，函数（）{
音频播放（）；
ballSeek（）；
});
函数audioPlay（）{
/*var player=document.getElementById（“player2”）*/
var player01=$（“#myAudio”）[0]；
//警惕（玩家）；
player01.play（）；
initProgressBar（）；
isPlaying1=真；
}
函数initProgressBar（）{
//jQuery（“.play pause”）.empty（）.text（“pause”）；
player1=document.getElementById（“myAudio”）；
player1.addEventListener（“timeupdate”，timeCal）；
var playBtn=jQuery（“播放按钮容器”）；
playBtn.单击（函数（）{
如果（player1.paused==false）{
player1.暂停（）；
isplay=false；
//jQuery（“.play pause”）.empty（）.text（“play”）；
}否则{
player1.play（）；
isplay=true；
//jQuery（“.play pause”）.empty（）.text（“pause”）；
}
});
}
函数timeCal（）{
var width=jQuery（“#timeline1”）.width（）；
变量长度=player1.0时长；
var current_time=播放器1.currentTime；
//计算值的总长度
var totalLength=计算总价值（长度）；
//控制台信息（总长度）；
jQuery（“.end time”）.html（总长度）；
//计算当前值时间
var currentTime=calculateCurrentValue（当前时间）；
jQuery（“.start time”）.html（currentTime）；
var progressbar=document.getElementById（“seekObj1”）；
progressbar.style.marginLeft=width*（player1.currentTime/player1.duration）+“px”；
}
函数calculateTotalValue（长度）{
var分钟=数学楼层（长度/60）；
var seconds_int=长度-分钟*60；
如果（秒数<10）{
//console.info（“此处”）；
秒\u int=“0”+秒\u int；
//控制台信息（秒数）；
}
var seconds_str=seconds_int.toString（）；
var seconds=seconds_str.substr（0,2）；
变量时间=分钟+'：'+秒；
//控制台信息（秒数）
返回时间；
}
函数calculateCurrentValue（currentTime）{
var current_hour=parseInt（currentTime/3600）%24，
当前分钟=parseInt（当前时间/60）%60，
当前秒长=当前时间%60，
current_seconds=current_seconds_long.toFixed（），
当前时间=（当前分钟<10？“0”+当前分钟：当前分钟）+“：”+（当前秒<10？“0”+当前秒：当前秒）；
返回当前时间；
}
函数ballSeek（）{
onplayhead1=null；
playerId1=null；
timeline1=document.getElementById（“timeline1”）；
playhead1=document.getElementById（“seekObj1”）；
timelineWidth1=timeline1.offsetWidth-playhead1.offsetWidth；
时间线1.添加EventListener（“单击”，搜索）；
playhead1.addEventListener（“鼠标向下”，拖动）；
window.addEventListener（'mouseup'，mouseup）；
}
函数搜索（事件）{
var player=document.getElementById（“myAudio”）；
player.currentTime=player.duration*点击百分比（事件，时间线1，时间线宽度1）；
}
函数单击百分比（e、时间线、时间线宽度）{
return（event.clientX-getPosition（timeline1））/timelineWidth1；
}
功能位置（el）{
返回el.getBoundingClientRect（）.left；
}
函数拖动（e）{
player1.removeEventListener（“timeupdate”，timeCal）；
onplayhead1=jQuery（this.attr（“id”）；
playerId1=jQuery（this）.parents（“li”）.find（“audio”）.attr（“id”）；
var player=document.getElementById（playerId1）；
window.addEventListener（'mousemove'，dragFunc）；
player1.removeEventListener（'timeupdate'，timeupdate）；
}
函数dragFunc（e）{
var player=document.getElementById（onplayhead1）；
var newmarglight=e.clientX-getPosition（timeline1）；
如果（newMargLeft>=0&&newMargLeft timelineWidth1）{
playhead.style.marginLeft=timelineWidth1+“px”；
}
}
功能鼠标（e）{
如果（onplayhead1！=null）{
var player=document.getElementById（playerId1）；
removeEventListener（'mousemove'，dragFunc）；
player1.currentTime=player1.duration*点击百分比（e，timeline1，timelineWidth1）；
player1.addEventListener（“timeupdate”，timeCal）；
player1.addEventListener（'timeupdate'，timeupdate）；
}
onplayhea1=null；
}
函数timeUpdate（）{
var player2=document.getElementById（onplayhead1）；
var player=document.getElementById（playerId1）；
var playPercent=timelineWidth1*（player1.currentTime/player1.duration）；
player2.style.marginLeft=播放百分比+“px”；
//如果歌曲结束了
如果（player1.currentTime==player1.duration）{
player1.暂停（）；
}
}

是否有一种方法可以根据我正在使用的音频播放器动态切换音频？我不明白你想要什么…你能精确地给出一个多音频播放器的示例吗？？？@Frenchy我的意思是，有没有办法在一个页面上多次使用上述功能来播放6个不同的音频文件。到目前为止，我已经稍微更改了命名约定，但它只会播放一个音频文件，而不会播放其余的。

var player1,onplayhead1,playerId1,timeline1,playhead1,timelineWidth1;
jQuery(window).on("load", function () {
    audioPlay();
    ballSeek();

});

function audioPlay() {
    /*var player = document.getElementById("player2");*/
  var player01 = $("#myAudio")[0];
  //alert(player);
    player01.play();
    initProgressBar();
    isPlaying1 = true;
}

function initProgressBar() {
  // jQuery(".play-pause").empty().text("PAUSE");
    player1 = document.getElementById("myAudio");
    player1.addEventListener("timeupdate", timeCal);
    var playBtn = jQuery("#play-button-container");
          playBtn.click(function() {
            if (player1.paused === false) {
                player1.pause();
                isPlaying = false;
              // jQuery(".play-pause").empty().text("PLAY");

            } else {
                player1.play();
                isPlaying = true;
              // jQuery(".play-pause").empty().text("PAUSE");
            }
          });

}

function timeCal() {
    var width = jQuery("#timeline1").width();
    var length = player1.duration;
    var current_time = player1.currentTime;

    // calculate total length of value
    var totalLength = calculateTotalValue(length);
  //console.info(totalLength);
    jQuery(".end-time").html(totalLength);

    // calculate current value time
    var currentTime = calculateCurrentValue(current_time);
    jQuery(".start-time").html(currentTime);

    var progressbar = document.getElementById("seekObj1");
    progressbar.style.marginLeft = width * (player1.currentTime / player1.duration) + "px";

}

function calculateTotalValue(length) {
    var minutes = Math.floor(length / 60);
      var  seconds_int = length - minutes * 60;
  if(seconds_int < 10){
    //console.info("here");
    seconds_int = "0"+seconds_int;
    //console.info(seconds_int);
  }
      var seconds_str = seconds_int.toString();
       var  seconds = seconds_str.substr(0, 2);
        var time = minutes + ':' + seconds;
//console.info(seconds_int)
    return time;
}

function calculateCurrentValue(currentTime) {
    var current_hour = parseInt(currentTime / 3600) % 24,
        current_minute = parseInt(currentTime / 60) % 60,
        current_seconds_long = currentTime % 60,
        current_seconds = current_seconds_long.toFixed(),
        current_time = (current_minute < 10 ? "0" + current_minute : current_minute) + ":" + (current_seconds < 10 ? "0" + current_seconds : current_seconds);
    return current_time;
}

function ballSeek() {
     onplayhead1 = null;
     playerId1 = null;
     timeline1 = document.getElementById("timeline1");
     playhead1 = document.getElementById("seekObj1");
     timelineWidth1 = timeline1.offsetWidth - playhead1.offsetWidth;

    timeline1.addEventListener("click", seek);
    playhead1.addEventListener('mousedown', drag);
    window.addEventListener('mouseup', mouseUp);

}


function seek(event) {
    var player = document.getElementById("myAudio");
    player.currentTime = player.duration * clickPercent(event, timeline1, timelineWidth1);
}

function clickPercent(e, timeline, timelineWidth) {
    return (event.clientX - getPosition(timeline1)) / timelineWidth1;
}

function getPosition(el) {
    return el.getBoundingClientRect().left;
}

function drag(e) {
    player1.removeEventListener("timeupdate", timeCal);
    onplayhead1 = jQuery(this).attr("id");
    playerId1 = jQuery(this).parents("li").find("audio").attr("id");
    var player = document.getElementById(playerId1);
    window.addEventListener('mousemove', dragFunc);
    player1.removeEventListener('timeupdate', timeUpdate);
}


function dragFunc(e) {
    var player = document.getElementById(onplayhead1);
    var newMargLeft = e.clientX - getPosition(timeline1);

    if (newMargLeft >= 0 && newMargLeft <= timelineWidth1) {
        playhead.style.marginLeft = newMargLeft + "px";
    }
    if (newMargLeft < 0) {
        playhead.style.marginLeft = "0px";
    }
    if (newMargLeft > timelineWidth1) {
        playhead.style.marginLeft = timelineWidth1 + "px";
    }
}

function mouseUp(e) {
    if (onplayhead1 != null) {
        var player = document.getElementById(playerId1);
        window.removeEventListener('mousemove', dragFunc);
        player1.currentTime = player1.duration * clickPercent(e, timeline1, timelineWidth1);
        player1.addEventListener("timeupdate", timeCal);
        player1.addEventListener('timeupdate', timeUpdate);
    }
    onplayhea1 = null;
}

function timeUpdate() {
    var player2 = document.getElementById(onplayhead1);
    var player = document.getElementById(playerId1);
    var playPercent = timelineWidth1 * (player1.currentTime / player1.duration);
    player2.style.marginLeft = playPercent + "px";
    // If song is over
    if (player1.currentTime == player1.duration) {
        player1.pause();
    }

}