动态音频控件按钮均播放数组首个音频问题求助

问题根源 #

你代码里的newTrackWidget、trackTitle、trackButton、trackTimeline、trackAudio这些变量都没有用let或const声明，导致它们成为全局变量。在forEach循环的每次迭代中，这些全局变量都会被新的值覆盖。点击事件的箭头函数是闭包，它引用的是全局的trackAudio变量，最终所有按钮点击都会调用循环结束后trackAudio指向的音频实例（你描述的播放第一个音频，本质也是变量作用域导致的共享引用问题）。

解决方法 #

给循环内的所有变量加上const（或let，根据是否需要重新赋值选择），让它们拥有块级作用域，这样每次迭代的变量都是独立的，点击事件会正确绑定当前迭代的音频实例。

修正后的代码 #

JavaScript #

// Listen Page
const audioItems = [
  'http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/alien_hit.wav',
  'http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/alien_shoot.wav',
  'http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/bonus.wav',
]

const listenContainer = document.querySelector('.audio-widget-container');

audioItems.forEach(track => {
    const newTrackWidget = document.createElement('div');
    newTrackWidget.classList.add('track-container')

    const trackTitle = document.createElement("h3");
    trackTitle.textContent = track;

    const trackButton = document.createElement("button");
    trackButton.innerHTML = `<i class="fa-solid fa-play"></i>`
    const trackTimeline = document.createElement("div");

    const trackAudio = document.createElement("audio");
    trackAudio.src = track;

    trackButton.addEventListener("click", () => {
        trackAudio.play()
    })

    newTrackWidget.appendChild(trackAudio)
    newTrackWidget.appendChild(trackTitle);
    newTrackWidget.appendChild(trackButton);
    newTrackWidget.appendChild(trackTimeline);

    listenContainer.appendChild(newTrackWidget);
});

HTML（无需修改） #

<script src="https://kit.fontawesome.com/00c3160031.js" crossorigin="anonymous"></script>

<section class="audio-widget-container">
</section>

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