英文:
Dynamic Audio Widgets playing same audio
问题
这是我的网页的简化版本 - 所有按钮都播放数组中的第一个元素，我不知道为什么。我怀疑这与forEach循环的执行方式有关。
// Listen Page
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 => {
newTrackWidget = document.createElement('div');
newTrackWidget.classList.add('track-container')
trackTitle = document.createElement("h3");
trackTitle.textContent = track;
trackButton = document.createElement("button");
trackButton.innerHTML = `<i class="fa-solid fa-play"></i>`
trackTimeline = document.createElement("div");
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);
});
<script src="https://kit.fontawesome.com/00c3160031.js" crossorigin="anonymous"></script>
<section class="audio-widget-container">
</section>
英文:
Here is a simplified version of my web page - all buttons are playing the first element in the array and I don't know why. I suspect it's something to do with the forEach loop not functioning in the correct way
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
// Listen Page
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 => {
newTrackWidget = document.createElement('div');
newTrackWidget.classList.add('track-container')
trackTitle = document.createElement("h3");
trackTitle.textContent = track;
trackButton = document.createElement("button");
trackButton.innerHTML = `<i class="fa-solid fa-play"></i>`
trackTimeline = document.createElement("div");
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);
});
<!-- language: lang-html -->
<script src="https://kit.fontawesome.com/00c3160031.js" crossorigin="anonymous"></script>
<section class="audio-widget-container">
</section>
<!-- end snippet -->
答案1
得分: 1
你在没有关键字的情况下分配了变量，这意味着它们被提升到全局范围。因此声音被覆盖。要修复它，请在forEach循环内使用关键字let创建新变量，使它们唯一：
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 => {
let newTrackWidget = document.createElement('div');
newTrackWidget.classList.add('track-container');
let trackTitle = document.createElement('h3');
trackTitle.textContent = track;
let trackButton = document.createElement('button');
trackButton.innerHTML = `<i class="fa-solid fa-play"></i>`;
let trackTimeline = document.createElement('div');
let 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);
});
<script src="https://kit.fontawesome.com/00c3160031.js" crossorigin="anonymous"></script>
<section class="audio-widget-container">
</section>
英文:
You assigned to variables without keywords, which mean that they are hoisted to global scope.Therefore the sound was overwritten. To fix it create new variables inside forEach loop using keyword let to make them unique:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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 => {
let newTrackWidget = document.createElement('div');
newTrackWidget.classList.add('track-container');
let trackTitle = document.createElement('h3');
trackTitle.textContent = track;
let trackButton = document.createElement('button');
trackButton.innerHTML = `<i class="fa-solid fa-play"></i>`;
let trackTimeline = document.createElement('div');
let 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);
});
<!-- language: lang-html -->
<script src="https://kit.fontawesome.com/00c3160031.js" crossorigin="anonymous"></script>
<section class="audio-widget-container">
</section>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论