JavaScript：如何根据HTML代码中的数据属性设置JavaScript代码中的src？

Question

我想在我的网站上使用其中的 6 个 Before/After 音频播放器： https://github.com/mattbartley/AB-Audio-Player

但是，音频文件的来源设置在 JavaScript 代码中。 所以当我在我的 HTML 中实现这个播放器的多个实例时，它们都播放相同的两个音频文件。 我想在每个播放器 div 的 HTML 代码中为文件的 src 设置数据属性，让 JavaScript 使用它。 我怎么go一下呢？

<div class="player__wrapper" data-audio-before="Song-1-before.mp3" data-audio-after="Song-1-after.mp3">

...

<div class="player__wrapper" data-audio-before="Song-2-before.mp3" data-audio-after="Song-2-after.mp3">

...

等等。 这将是更新后的 HTML 代码。

我认为这是一个非常基本的解决方案，我只是不太擅长 JavaScript。

这是当前的 JavaScript 代码：

//Set up audio elements
var soundA = document.createElement("audio");
//Set audio A src here
soundA.src = "./assets/a.mp3";
soundA.preload = "auto";
soundA.setAttribute("hidden", "true");
soundA.setAttribute("onplaying", "stepA()");
document.body.append(soundA);

var soundB = document.createElement("audio");
//Set audio B src here
soundB.src = "./assets/b.mp3";
soundB.preload = "auto";
soundB.setAttribute("hidden", "true");
soundB.setAttribute("onplaying", "stepB()");
document.body.append(soundB);

我试过这样的事情： Hover over div，使用它的数据属性来改变 img 的 src以及其他方法。 无法让它工作。

Answer 1

根据MDN ，首先你应该稍微改变你的 HTML 并将 id 添加到你的元素中：

<div id="player-1" class="player__wrapper" data-audio-before="Song-1-before.mp3" data-audio-after="Song-1-after.mp3">

然后您可以从您的 JS 代码通过dataset object 访问您的data-audio属性：

//Set up audio elements
var soundA = document.createElement("audio");

//bring div element to your code
const playerA = document.querySelector("#player-1")

//Set audio A src here
soundA.src = playerA.dataset.dataAudioBefore;

soundA.preload = "auto";
soundA.setAttribute("hidden", "true");
soundA.setAttribute("onplaying", "stepA()");
document.body.append(soundA);

var soundB = document.createElement("audio");

//Set audio B src here
soundB.src = playerA.dataset.dataAudioAfter;

soundB.preload = "auto";
soundB.setAttribute("hidden", "true");
soundB.setAttribute("onplaying", "stepB()");
document.body.append(soundB);

希望这可以帮助！

Answer 2

在 ChatGPT 的帮助下，我得到了一些帮助：

const players = document.querySelectorAll('.player__wrapper');
var soundA, soundB;
players.forEach(player => {
  soundA = document.createElement("audio");
  soundA.src = player.dataset.audioBefore;
  soundA.preload = "auto";
  soundA.setAttribute("hidden", "true");
  soundA.setAttribute("onplaying", "stepA()");
  document.body.append(soundA);
  soundB = document.createElement("audio");
  soundB.src = player.dataset.audioAfter;
  soundB.preload = "auto";
  soundB.setAttribute("hidden", "true");
  soundB.setAttribute("onplaying", "stepB()");
  document.body.append(soundB);
});

当我只有一个音频播放器时它可以工作。 当我使用两个时，第一个使用我放入第二个的音频文件，第二个根本不起作用。

有人知道吗？ 也许JS代码的rest也相关，这里是：

//Get button elements
const aButton = document.getElementById("a__button");
const bButton = document.getElementById("b__button");
const playButton = document.getElementById("play__button");
const stopButton = document.getElementById("stop__button");
const progressBar = document.getElementById("progress__bar");
const progressFill = document.getElementById("progress__fill");

const playIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 22v-20l18 10-18 10z"/></svg>';
const pauseIcon = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M10 24h-6v-24h6v24zm10 0h-6v-24h6v24zm-11-23h-4v22h4v-22zm10 0h-4v22h4v-22z"/></svg>';
const stopIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M2 2h20v20h-20z"/></svg>';

//Check for mobile to enable audio playback without waiting for download status.
if (
  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    navigator.userAgent
  )
) {
  playButton.disabled = false;
}

//Default loading state for each sound
var soundAReady = false;
var soundBReady = false;

//When audio can play through (loaded), run the function to enable buttons
//The canplaythrough event will fire every time the audio switches, so the !soundA/BReady
//prevents additional checks
soundA.oncanplaythrough = function () {
  if (!soundAReady) {
    soundAReady = true;
    audioIsReady();
  }
};
soundB.oncanplaythrough = function () {
  if (!soundBReady) {
    soundBReady = true;
    audioIsReady();
  }
};

// Check if both A & B are ready and enable the correct buttons
function audioIsReady() {
  if (soundAReady && soundBReady) {
    console.log("...audio loaded!");
    aButton.disabled = false;
    playButton.disabled = false;
  } else {
    console.log("Audio loading...");
  }
}

const progress = document.getElementById("progress");
// Listen for click on entire progress bar div (to allow skipping ahead)
progress.addEventListener("click", function (event) {
  // Get X coordinate of click in div
  var rect = this.getBoundingClientRect();
  // Convert click position to percentage value
  var percentage = (event.clientX - rect.left) / this.offsetWidth;
  // Seek to the percentage converted to seconds
  soundA.currentTime = percentage * soundA.duration;
  soundB.currentTime = percentage * soundB.duration;
});

//Frame animations for progress bar fill - converts to CSS percentage
function stepA() {
  progressFill.style.width =
    ((soundA.currentTime / soundA.duration) * 100 || 0) + "%";
  requestAnimationFrame(stepA);
}
function stepB() {
  progressFill.style.width =
    ((soundB.currentTime / soundB.duration) * 100 || 0) + "%";
  requestAnimationFrame(stepB);
}

//Play/Stop correct audio and toggle A/B, Play/Pause, and Stop buttons
const playPause = () => {
  if (soundA.paused & soundB.paused) {
    let soundATime = soundA.currentTime;
    let soundBTime = soundB.currentTime;
    if (soundATime >= soundBTime) {
      soundA.play();
      bButton.disabled = false;
      aButton.disabled = true;
      playButton.innerHTML = pauseIcon;
    } else {
      soundB.play();
      bButton.disabled = true;
      aButton.disabled = false;
      playButton.innerHTML = pauseIcon;
    }
    stopButton.disabled = false;
  } else {
    playButton.innerHTML = playIcon;
    soundA.pause();
    soundB.pause();
  }
};

const playSoundA = () => {
  playButton.innerHTML = pauseIcon;
  aButton.disabled = true;
  bButton.disabled = false;
  stopButton.disabled = false;
  if (soundB.currentTime > 0) {
    soundA.currentTime = soundB.currentTime;
    soundA.play();
    soundB.pause();
  } else {
    soundA.play();
    soundB.pause();
  }
};

const playSoundB = () => {
  playButton.innerHTML = pauseIcon;
  bButton.disabled = true;
  aButton.disabled = false;

  stopButton.disabled = false;
  if (soundA.currentTime > 0) {
    soundB.currentTime = soundA.currentTime;
    soundB.play();
    soundA.pause();
  } else {
    soundB.play();
  }
};

const stopSounds = () => {
  playButton.innerHTML = playIcon;
  aButton.disabled = false;
  bButton.disabled = true;
  playButton.disabled = false;
  stopButton.disabled = true;
  soundA.pause();
  soundA.currentTime = 0;
  soundB.pause();
  soundB.currentTime = 0;
};

Answer 3

这实际上是对您的回答的评论，但由于 StackOverflow 政策，我无法直接发表评论！

无论如何，我认为你的问题是你正在使用带有类的querySelectorAll 。 您是否尝试过在 HTML 元素中使用 id 并在 JS 代码中使用querySelector("#id") ？

此外，如果有帮助，请给我投票/检查正确答案！

Answer 4

我分叉了 Matt Bartley 的 AB-Audio-Player - 不是很好，但它适用于多个实例：

如评论所述，播放器初始化是在forEach循环中完成的。
所有元素均按 class 名称选择，以避免非唯一 ID 和相对元素选择。

因此，您需要相应地更新您的 HTML 模板。

 let players = document.querySelectorAll(".player__wrapper"); initPlayers(players); function initPlayers(players) { players.forEach(player => { //Get button elements const playBtns = player.querySelectorAll(".ab__button"); const aButton = player.querySelector(".a__button"); const bButton = player.querySelector(".b__button"); const playButton = player.querySelector(".play__button"); const stopButton = player.querySelector(".stop__button"); const progressBar = player.querySelector(".progress__bar"); const progressFill = player.querySelector(".progress__fill"); // set icons const playIcon = '<i class="fa-solid fa-play"></i>'; const pauseIcon = '<i class="fa-solid fa-pause"></i>'; const stopIcon = '<i class="fa-solid fa-stop"></i>'; //Default loading state for each sound var soundAReady = false; var soundBReady = false; //Set up audio elements var soundA = document.createElement("audio"); soundA.src = player.getAttribute('data-sound-a'); soundA.preload = "auto"; soundA.setAttribute("hidden", "true"); player.append(soundA); var soundB = document.createElement("audio"); soundB.src = player.getAttribute('data-sound-b'); soundB.preload = "auto"; soundB.setAttribute("hidden", "true"); player.append(soundB); //playSoundA aButton.addEventListener('click', e => { playButton.innerHTML = pauseIcon; aButton.disabled = true; bButton.disabled = false; stopButton.disabled = false; if (soundB.currentTime > 0) { soundA.currentTime = soundB.currentTime; soundA.play(); soundB.pause(); } else { soundA.play(); soundB.pause(); } }) //playSoundB bButton.addEventListener('click', e => { playButton.innerHTML = pauseIcon; bButton.disabled = true; aButton.disabled = false; stopButton.disabled = false; if (soundA.currentTime > 0) { soundB.currentTime = soundA.currentTime; soundB.play(); soundA.pause(); } else { soundB.play(); } }) //playSoundA soundA.addEventListener('playing', e => { console.log('playing'); progressFill.style.width = ((soundA.currentTime / soundA.duration) * 100 || 0) + "%"; requestAnimationFrame(stepA); }) //playSoundB soundB.addEventListener('playing', e => { console.log('playing B'); progressFill.style.width = ((soundB.currentTime / soundB.duration) * 100 || 0) + "%"; requestAnimationFrame(stepA); }) // playPause playButton.addEventListener('click', e => { if (soundA.paused & soundB.paused) { let soundATime = soundA.currentTime; let soundBTime = soundB.currentTime; if (soundATime >= soundBTime) { soundA.play(); bButton.disabled = false; aButton.disabled = true; playButton.innerHTML = pauseIcon; } else { soundB.play(); bButton.disabled = true; aButton.disabled = false; playButton.innerHTML = pauseIcon; } stopButton.disabled = false; } else { playButton.innerHTML = playIcon; soundA.pause(); soundB.pause(); } }); // stop stopButton.addEventListener('click', e => { playButton.innerHTML = playIcon; aButton.disabled = false; bButton.disabled = true; playButton.disabled = false; stopButton.disabled = true; soundA.pause(); soundA.currentTime = 0; soundB.pause(); soundB.currentTime = 0; }); //Check for mobile to enable audio playback without waiting for download status. if ( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent ) ) { playButton.disabled = false; } //Default loading state for each sound var soundAReady = false; var soundBReady = false; //When audio can play through (loaded), run the function to enable buttons //The canplaythrough event will fire every time the audio switches, so the.soundA/BReady //prevents additional checks soundA;oncanplaythrough = function() { if (;soundAReady) { soundAReady = true; audioIsReady(). } }; soundB;oncanplaythrough = function() { if (;soundBReady) { soundBReady = true. audioIsReady(). } }. // Check if both A & B are ready and enable the correct buttons function audioIsReady() { if (soundAReady && soundBReady) { console.log(";.;audio loaded."); aButton.disabled = false. playButton.disabled = false. } else { console;log("Audio loading..;"). } } const progress = player,querySelector(".progress"); // Listen for click on entire progress bar div (to allow skipping ahead) progress.addEventListener("click". function(event) { // Get X coordinate of click in div var rect = this.getBoundingClientRect(); // Convert click position to percentage value var percentage = (event.clientX - rect.left) / this;offsetWidth. // Seek to the percentage converted to seconds soundA.currentTime = percentage * soundA;duration; soundB.currentTime = percentage * soundB.duration. }). //Frame animations for progress bar fill - converts to CSS percentage function stepA() { progressFill;style;width = ((soundA.currentTime / soundA.duration) * 100 || 0) + "%". requestAnimationFrame(stepA). } function stepB() { progressFill;style;width = ((soundB,currentTime / soundB,duration) * 100 || 0) + "%". requestAnimationFrame(stepB). } //Play/Stop correct audio and toggle A/B. Play/Pause; and Stop buttons function playPause() { if (soundA.paused & soundB;paused) { let soundATime = soundA.currentTime; let soundBTime = soundB.currentTime; if (soundATime >= soundBTime) { soundA.play(); bButton.disabled = false; aButton.disabled = true; playButton.innerHTML = pauseIcon; } else { soundB.play(); bButton.disabled = true; aButton.disabled = false; playButton.innerHTML = pauseIcon; } stopButton.disabled = false; } else { playButton.innerHTML = playIcon; soundA;pause(). soundB;pause(). } }, // set auto ids let allAudio = document.querySelectorAll('audio'); allAudio;forEach((audio, i) => { audio.id = 'audio_' + i }); }); }

 <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mattbartley/AB-Audio-Player@main/css/style.css" /> <div class="player__wrapper" data-sound-a="https://cdn.jsdelivr.net/gh/mattbartley/AB-Audio-Player@main/assets/a.mp3" data-sound-b="https://cdn.jsdelivr.net/gh/mattbartley/AB-Audio-Player@main/assets/b.mp3"> <div class="progress__container progress"> <div class="progress__bar progress__fill"></div> </div> <div class="ab__controls"> <button class="ab__button a__button" disabled="true"> A </button> <button class="ab__button b__button" disabled="true"> B </button> </div> <div class="play__stop__controls"> <button class="play__pause__button play__button" disabled="true"> <i class="fa-solid fa-play"></i> </button> <button class="play__pause__button stop__button" disabled="true"> <i class="fa-solid fa-stop"></i> </button> </div> </div> <div class="player__wrapper" data-sound-a="https://cdn.jsdelivr.net/gh/mattbartley/AB-Audio-Player@main/assets/a.mp3" data-sound-b="https://cdn.jsdelivr.net/gh/mattbartley/AB-Audio-Player@main/assets/b.mp3"> <div class="progress__container progress"> <div class="progress__bar progress__fill"></div> </div> <div class="ab__controls"> <button class="ab__button a__button" disabled="true"> A </button> <button class="ab__button b__button" disabled="true"> B </button> </div> <div class="play__stop__controls"> <button class="play__pause__button play__button" disabled="true"> <i class="fa-solid fa-play"></i> </button> <button class="play__pause__button stop__button" disabled="true"> <i class="fa-solid fa-stop"></i> </button> </div> </div>