Аудио игра и выпуск рендеринга ⇐ Javascript

[Anonymous]

Я работаю над интерфейсом чата, который поддерживает загрузку и рендеринг звуковых сообщений с использованием wavesurfer.js. Чтобы обрабатывать несколько аудио вложений, я создал многоразовую функцию renderwaveform (uniqueId, URL), который инициализирует игрока с формой сигнала для каждого загруженного аудиофайла. TimeStamp < /p>
Когда я называю renderwaveform (уникальный, URL) после динамического вставки Audio HTML: < /p>
Правильно воспроизводится форма волны. Не сбросит кнопку воспроизведения и не отображает правильную конечную продолжительность. /> использовал wavesurfer.on ('ready'), on ('audioprocess') и on ('finish'). текущее время воспроизведения. < /p>
Убедитесь, что отделка сбрасывает состояние пользовательского интерфейса (кнопка + время) для каждого аудио -сообщения. < /p>

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

function renderWaveform(uniqueId, url) {
const wavesurfer = WaveSurfer.create({
container: `#waveform${uniqueId}`,
waveColor: "#ccc",
progressColor: "#4CAF50",
barWidth: 2,
height: 30,
responsive: true,
});

wavesurfer.load(url);

wavesurfer.on("ready", () => {
document.getElementById(`text${uniqueId}`).textContent = formatTime(wavesurfer.getDuration());
});

wavesurfer.on("audioprocess", (currentTime) => {
document.getElementById(`text${uniqueId}`).textContent = formatTime(currentTime);
});

wavesurfer.on("finish", () => {
document.getElementById(`text${uniqueId}`).textContent = formatTime(wavesurfer.getDuration());
document.getElementById(`playPause${uniqueId}`).classList.remove("playing");
});

document.getElementById(`playPause${uniqueId}`).addEventListener("click", () => {
wavesurfer.playPause();
});
}

// send Audio File
function appendAudioFile (uniqueId,audioUrl)  {
let time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
const now = new Date();
// let uniqueId = 'id-'
//     + now.getFullYear()
//     + (now.getMonth() + 1).toString().padStart(2, '0')
//     + now.getDate().toString().padStart(2, '0')
//     + now.getHours().toString().padStart(2, '0')
//     + now.getMinutes().toString().padStart(2, '0')
//     + now.getSeconds().toString().padStart(2, '0')
//     + index
//     + now.getMilliseconds().toString().padStart(3, '0')
//     + '-' + Math.floor(Math.random() * 10000);

const chatBox = document.getElementById("chatBox");

chatBox.insertAdjacentHTML("beforeend", `



d="M106.251,0.5C164.653,0.5,212,47.846,212,106.25S164.653,212,106.25,212C47.846,212,0.5,164.654,0.5,106.25 S47.846,0.5,106.251,0.5z">




































${time} 








[list]
[*]
[url=${url}]

Download
[/url]

[/list]



`;

chatBox.scrollTop = chatBox.scrollHeight;
}

let uniqueId = 'id-'
+ now.getFullYear()
+ (now.getMonth() + 1).toString().padStart(2, '0')
+ now.getDate().toString().padStart(2, '0')
+ now.getHours().toString().padStart(2, '0')
+ now.getMinutes().toString().padStart(2, '0')
+ now.getSeconds().toString().padStart(2, '0')
+ now.getMilliseconds().toString().padStart(3, '0')
+ index
+ '-' + Math.floor(Math.random() * 10000);

и я создаю уникальный идентификатор с помощью даты


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