Wavesurfer.js и audio.play () оба запуска воспроизведения - как избежать дублированного звука и много волн? ⇐ Html

[Anonymous]

Я в настоящее время изучаю JavaScript и пытаюсь создать простой клон SoundCloud. Я использую wavesurfer.js для визуализации звуковой формы, но я столкнулся с несколькими проблемами:
Проблема 1: двойное воспроизведение
Первоначально я использовал один элемент с Audio.play () для управления воспроизведением. После интеграции Wavesurfer, когда я нажимаю на «Play», трек играет дважды - один раз через Audio.play () и один раз через внутреннее воспроизведение Wavesurfer. Визуализация?

Код: Выделить всё

const ws = WaveSurfer.create({
container: el,
backend: 'MediaElement',
media: audio,
waveColor: '#ccc',
progressColor: '#ff5500',
height: 60,
responsive: true,
barWidth: 2,
});
< /code>
Но когда я нажимаю, чтобы воспроизвести одну песню, все сигналы начинают играть одновременно.
Я подозреваю, что это потому, что все они связаны с одним и тем же элементом  < /code>. Как я могу изолировать воспроизведение так, чтобы при нажатии играл только одна форма волны? Он отлично работает - звук продолжается - но визуализация формы волны исчезает после переключения страниц. < /P>
  function loadPage(event, url) {
event?.preventDefault();
fetch(url)
.then(res => res.text())
.then(html => {
const doc     = new DOMParser().parseFromString(html, 'text/html');
const content = doc.getElementById('main-content');

document.getElementById('main-content').innerHTML = content.innerHTML;
document.body.className                          = doc.body.className;
document.querySelector('.parent').className      = doc.querySelector('.parent').className;
window.history.pushState({}, '', url);

initMusic();
});
}

window.addEventListener('popstate', () =>
loadPage(null, location.pathname)
);
< /code>
Кроме того, я использую только один аудио элемент в base.html и пример wavesurfer.js в моем профиле.html < /p>

< /code>

document.addEventListener('DOMContentLoaded', () => {
const waveformElements = document.querySelectorAll('.waveform');

if (waveformElements.length === 0) return;

const audio = document.getElementById('player');

waveformElements.forEach((el) => {
const src = el.dataset.src;

const ws = WaveSurfer.create({
container: el,
backend: 'MediaElement',
media: audio,
waveColor: '#ccc',
progressColor: '#ff5500',
height: 60,
responsive: true,
barWidth: 2,
});

ws.load(src);
window.wavesurfers = window.wavesurfers || {};
window.wavesurfers[src] = ws;
});
});
< /code>
Any advice or best practices would be greatly appreciated!
I tried initializing WaveSurfer with the same 

Элемент с использованием бэкэнда MediaElement. Я ожидал, что он отобразит форму волны и управления воспроизведением для каждого трека индивидуально. Я также пробовал страницы для предварительной загрузки, используя JavaScript, чтобы поддерживать музыку на страницах. Кроме того, после переключения страниц, форма волны исчезает, даже если звук продолжает играть.

Подробнее здесь: https://stackoverflow.com/questions/796 ... plicate-so