Исправление DOMException: HTMLMediaElement уже подключен к другому MediaElementSourceNode в аудиоплеере JavaScript ⇐ CSS

[Anonymous]

Проблема возникает при нажатии nextBtn и prevBtn в аудиоплеере JavaScript. При навигации по различным звуковым дорожкам с помощью кнопок «Далее» или «Предыдущий», когда arrIndexCount достигает 0, анимация больше не появляется. Что касается prevBtn, анимация также не появляется. Это приводит к исключению DOMException: «Не удалось выполнить createMediaElementSource в AudioContext: HTMLMediaElement уже подключен ранее к другому MediaElementSourceNode». Ошибка возникает из-за того, что медиа-элемент может быть связан только с одним MediaElementSourceNode одновременно, а предыдущие соединения не были должным образом отключены перед созданием новых.
Я также пытался отключить его перед вызовом метод createAudioVisualiser(); Однако результатов не было. Пожалуйста, помогите.





Music Player

*{
margin:0%;
padding: 0%;
background-color: black;
box-sizing:border-box;
}
.container{
height:40pc ;
display: flex;
flex-direction: column;
justify-content: center;
border: 2px solid red;
}

#innerContainer{
display: flex;
align-self: center;
/* align-content: center; */
border: 2px solid rgb(237, 237, 247);
box-shadow: -6px 2px 2px rgb(142, 142, 142);
height: 600px;
width:530px;
justify-content: center;
animation-name: glowAni;
animation-iteration-count: infinite;
animation-duration: 2000ms;
animation-direction: alternate;
/* animation-; */

}

@keyframes glowAni {

from{
box-shadow: -6px 2px 2px rgb(142, 142, 142);

}
to{
box-shadow: -8px 12px 10px 3px silver
}
}

.Btn{
display: block;
border-radius: 37px;
height: 49px;
top: 28em;
position: relative;
margin-right: 12px;
cursor: pointer;
}

.BtnImg{
height: 46px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

#choose{

display: block;
margin: auto;
position: relative;
top: 72px;
left: 245px;
border-radius:20px;
height: 30px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
cursor: pointer;
}

#slider{
display: block;
margin: auto;
position: relative;
top: 36em;
width: 30em;

}

#musicName{
color: white;
position: relative;
display: block;
margin: auto;
top: 470px;
}

#canvas1{
border:2px solid greenyellow;
height: 250px;
width: 516px;
display: block;
position: absolute;
top: 10em;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
filter: blur(1.23px) contrast(3.5);
}












Nothing Playing
















let musicPathArr = [];
var nameArr = [];

var arrIndexCount = 0;
let c = 0;

let chooserBtn = document.getElementById('choose');
let canvas = document.getElementById('canvas1');
let audio;

canvas.width = innerWidth;
canvas.height = innerHeight;
chooserBtn.addEventListener("click", ()=>{

let chooser = document.createElement('input');
chooser.setAttribute('type', 'file');
chooser.click();

chooser.addEventListener('change', (e)=>{
const files = e.target.files
const fileName = e.target.files[0];
if(fileName){

nameArr.push(fileName.name);
// console.log(nameArr);
}
for(let i=0; i{
var base64Aud = reader.result;
audio = new Audio(base64Aud);
// console.log(base64Aud);
musicPathArr.push(audio);

musicPathArr.forEach(aud =>{
aud.addEventListener('timeupdate', ()=>{

let audDuration = aud.duration;
let sliderVal = (aud.currentTime *slider.max)/audDuration;
slider.value = sliderVal;
});

})
// createAudioVisualiser(audio);

}

reader.readAsDataURL(file);

}
});

});

let displayMusicName = () =>{
console.log(nameArr[arrIndexCount]);
musicNameDiv.innerHTML = nameArr[arrIndexCount];
};

console.log(nameArr);

let cond = true;
const audioContext = new AudioContext();
let playBtn = document.getElementById('playBtn');
let nextBtn = document.getElementById('nextBtn');
let prevBtn = document.getElementById('prevBtn');
let slider = document.getElementById('slider');
let musicNameDiv = document.getElementById('musicName');

// let aud1 = new Audio("/Projects/Music Player/MP3/song1.mp3");
// let aud2 = new Audio("/Projects/Music Player/MP3/song2.mp3");

nextBtn.addEventListener('click', ()=>{
musicPathArr[arrIndexCount].pause();
musicPathArr[arrIndexCount].currentTime = 0;
arrIndexCount++; // Increment first
if(arrIndexCount >= musicPathArr.length){ // Check if it's equal to or greater than the length
arrIndexCount = 0; // Reset to 0 to loop back to the first element
// createAudioVisualiser(musicPathArr[arrIndexCount]);
}
displayMusicName();
// musicNameDiv.innerHTML = filename;
audio = musicPathArr[arrIndexCount]; // Update the audio variable
displayMusicName();
audio.play();
createAudioVisualiser(audio);
});

prevBtn.addEventListener('click', ()=>{
try{

musicPathArr[arrIndexCount].pause();
musicPathArr[arrIndexCount].currentTime = 0;
if(arrIndexCount{
audioContext.resume().then(()=>{

});
if(cond==true){

document.getElementById('playImg').src = "/Projects/Music Player/IMG/pause-button.png";
musicPathArr[arrIndexCount].play();

cond = false;
console.log("Play ", arrIndexCount);

displayMusicName();
}
else if(cond==false){
document.getElementById('playImg').src = "/Projects/Music Player/IMG/Play.png";
musicPathArr[arrIndexCount].pause();
cond=true;
console.log("pause");

}

//Audio Visualiser
createAudioVisualiser(musicPathArr[arrIndexCount]);

});

function drawVisualiser(bufferLength, barWidth, x, dataArray ){
for( let i=0; i{

});

analyser = audioContext.createAnalyser();
audioSource.connect(analyser);
analyser.connect(audioContext.destination)
analyser.fftSize = 1024;
const bufferLength = analyser.frequencyBinCount;
const dataArr = new Uint8Array(bufferLength)
let barHeight;
let x;
// const barWidth = (canvas.width/bufferLength)/2;
const barWidth = 8;

function animate(){
context.clearRect(0,0,canvas.width,canvas.height);
x = 0;
analyser.getByteFrequencyData(dataArr);
drawVisualiser(bufferLength, barWidth, x, dataArr);
animationFrameId = requestAnimationFrame(animate);
}
animate();
}
catch(err){
console.log(err);
}
}

slider.addEventListener('input', ()=>{
let audDuration = musicPathArr[arrIndexCount].duration;
let sliderVal = slider.value;
let audStreamCurrentTime = (sliderVal/slider.max)*audDuration;
musicPathArr[arrIndexCount].currentTime = audStreamCurrentTime;
});








Подробнее здесь: https://stackoverflow.com/questions/786 ... -mediaelem