在错误的div中创建波形

Question

所以我正在录制音频，然后在页面上保存剪辑并附加波形（使用WaveSurfer.js），但是波形被放置在带有类名波形的第一个div中。

rec.onstop = e => {console.log（“Recorder stopped”）;

var trackName = prompt("Enter a name for your sound clip");

var trackContainer = document.createElement("article");
var trackLabel = document.createElement("p");
var audio = document.createElement("audio");
var waveDiv = document.createElement("div");
var deleteButton = document.createElement("button");

trackContainer.classList.add("tracks");
waveDiv.setAttribute("class", "waveform");
audio.setAttribute("class", "clip");
deleteButton.innerHTML = "Delete";
trackLabel.innerHTML = trackName;
trackLabel.setAttribute("class", "track-label");

var btnDiv = document.createElement("div");
var playBtn = document.createElement("button");
var pauseBtn = document.createElement("button");
var play = document.createElement("img");
var pause = document.createElement("img");




btnDiv.setAttribute("class", "btn-div");
playBtn.setAttribute("class", "func-btns");
pauseBtn.setAttribute("class", "func-btns");

play.setAttribute("src", "../assets/play-icon.svg");
play.setAttribute("class", "play-icon");
pause.setAttribute("src", "../assets/pause-icon.svg");
pause.setAttribute("class", "pause-icon");

const playFnc = e => {
  myaudio.play();
  wavesurfer.play();
};
const pauseFnc = e => {
  myaudio.pause();
  wavesurfer.pause();
};

playBtn.onclick = playFnc;
pauseBtn.onclick = pauseFnc;

playBtn.appendChild(play);
pauseBtn.appendChild(pause);


btnDiv.appendChild(playBtn);
btnDiv.appendChild(pauseBtn);
trackContainer.appendChild(trackLabel);

trackContainer.appendChild(btnDiv);
trackContainer.appendChild(audio);
trackContainer.appendChild(waveDiv);
trackContainer.appendChild(deleteButton);
soundClips.appendChild(trackContainer);



var blob = new Blob(audioChunks, {
  type: "audio/ogg; codecs=opus"
});
audioChunks = [];
var audioURL = window.URL.createObjectURL(blob);
audio.src = audioURL;
var myaudio = new Audio(audioURL);

console.log(audioChunks);
deleteButton.onclick = e => {
  var evtTgt = e.target;
  evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);
};


var wavesurfer = WaveSurfer.create({
  container: ".waveform",
  waveColor: "#D81E5B",
  progressColor: "white",
  barGap: "4",
  barWidth: "3",
  barheight: "1",
  height: "100",
  scrollParent: false,
  cursorWidth: "0",
  interact: "true"
});

wavesurfer.load(audioURL);

}; } This is what i'm getting

This is what i'm wanting the result to be

This is the waveform being injected into the div

Answer 1

我最后把article元素和它的内容放到一个数组中，然后将appendChild放到一个循环中的父div中，该循环在页面上添加了新的音频记录。 Image of the result