嵌入主站的音乐播放器无法初始加载图片与音频问题求助

复刻的音乐播放器作为HTML页面嵌入主站后，页面加载时图片与音频无法自动初始化，必须点击「上一曲」或「下一曲」按钮才能加载内容，求解决方法。

播放器JS代码（gen-plr_12-06-22.js） #

//gen-plr_12-06-22.js
const wrapper = document.querySelector(".wrapper"),
musicImg = wrapper.querySelector(".img-area img"),
musicName = wrapper.querySelector(".song-details .name"),
musicAlbum = wrapper.querySelector(".song-details .album"),
musicArtist = wrapper.querySelector(".song-details .artist"), 
mainAudio = wrapper.querySelector("#main-audio"),
playPauseBtn = wrapper.querySelector(".play-pause"),
prevBtn = wrapper.querySelector("#prev"),
nextBtn = wrapper.querySelector("#next"),
progressArea = wrapper.querySelector(".progress-area"),
progressBar = wrapper.querySelector(".progress-bar"),
musicList = wrapper.querySelector(".music-list"),
showMoreBtn = wrapper.querySelector("#more-music"),
hideMusicBtn = musicList.querySelector("#close");

let musicIndex = Math.floor((Math.random() * allMusic.length) + 1);

window.addEventListener("load", ()=>{
  loadMusic(musicIndex); //页面加载时调用加载音乐函数
  playingNow()
});

//加载音乐函数******嵌入主站后这里无法获取信息
function loadMusic(indexNumb){
  musicName.innerText = allMusic[indexNumb -1].name;
  musicAlbum.innerText = allMusic[indexNumb -1].album;
  musicArtist.innerText = allMusic[indexNumb - 1].artist;
  musicImg.src = `jj-pix/mus-pix/cvs/${allMusic[indexNumb - 1].img}.png`;
  mainAudio.src = `jj-snd/${allMusic[indexNumb - 1].src}.mp3`;
}

音乐列表JS代码（gen-muslist_12-06-22.js） #

//gen-muslist_12-06-22.js
let allMusic = [
  {
    name: "1. 2tech-audio-event",
    album: "Genalbum",
    artist: "Gen",
    img: "genpx",
    src: "2tech-audio-event"
  },
  {
    name: "2. alex-productions-sexy-sax",
    album: "Gen 1album",
    artist: "Gen 1",
    img: "genpx1",
    src: "alex-productions-sexy-sax"
  },
  {
    name: "3. mixaund-team-spirit",
    album: "Gen 2album",
    artist: "Gen 2",
    img: "genpx2",
    src: "mixaund-team-spirit"
  },
  {
    name: "8. Good Lord Willin and the Creeks Don’t Rise",
    album: "Forever On The Run",
    artist: "Jeff Jirout",
    img: "genpx3",
    src: "2tech-audio-event"
  },
  {
    name: "5. mixaund-team-spirit",
    album: "Gen 4album",
    artist: "Gen 4",
    img: "genpx4",
    src: "mixaund-team-spirit"
  },
  {
    name: "5. mixaund-team-spirit",
    album: "Gen album",
    artist: "Gen",
    img: "genpx",
    src: "mixaund-team-spirit"
  }
]

主站JS代码 #

const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");

hamburger.addEventListener("click", () => {
  hamburger.classList.toggle("active");
  navMenu.classList.toggle("active");
})

document.querySelectorAll(".nav-link").forEach(n => n.addEventListener("click", () => {
  hamburger.classList.remove("active");
  navMenu.classList.remove("active");
}))

window.addEventListener("scroll", function(){
    var header = document.querySelector("header");
    header.classList.toggle("sticky", window.scrollY > 0, 0);
});

$(document).ready(function () {
    //$( '#home' ).load( "gen-home_11-29-22.html" );
    $( '#music' ).load( "gen-plr_12-06-22.html" );
    $( '#about' ).load( "about_Lorem11-12-20.html" );
    $( '#contact' ).load( "contact_Lorem11-14-22.html" );
});

// 处理锚点偏移
function offsetAnchor() {
  if (location.hash.length !== 0) {
    window.scrollTo(window.scrollX, window.scrollY - 75);
  }
}

// 监听锚点点击事件
$(document).on('click', 'a[href^="#"]', function(event) {
  window.setTimeout(function() {
    offsetAnchor();
  }, 0);
});

// 页面加载时处理锚点偏移
window.setTimeout(offsetAnchor, 0);

// 返回顶部按钮逻辑
var mybutton = document.getElementById("top");

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}

function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}

问题核心是页面加载时机不匹配：主站用jQuery的load()异步加载播放器HTML时，主页面的window.load事件早已触发，播放器JS里绑定的window.load回调不会再执行，导致loadMusic()没被调用，图片和音频因此无法初始化。

修复步骤 #

1. 重构播放器初始化逻辑
   把原window.load里的代码封装成全局函数，兼容单独打开播放器页面和嵌入主站两种场景：

// 在gen-plr_12-06-22.js中替换原window.load事件代码
function initPlayer() {
  let musicIndex = Math.floor((Math.random() * allMusic.length) + 1);
  loadMusic(musicIndex);
  playingNow();
}

// 保留原逻辑，支持单独打开播放器页面时自动初始化
window.addEventListener("load", initPlayer);

2. 主站加载后手动触发初始化
   修改主站的load()回调，在播放器HTML加载完成后调用初始化函数：

$(document).ready(function () {
    $( '#music' ).load( "gen-plr_12-06-22.html", function() {
        // 播放器HTML加载完成后执行初始化
        initPlayer();
    });
    $( '#about' ).load( "about_Lorem11-12-20.html" );
    $( '#contact' ).load( "contact_Lorem11-14-22.html" );
});

3. 确保变量全局可访问
   将gen-muslist_12-06-22.js的加载顺序放在gen-plr_12-06-22.js之前，避免allMusic变量未定义导致初始化失败。

内容的提问来源于stack exchange，提问作者mim