привет !
есть аудио файл ее надо воспроизвести с визуализации на wavesurfer.js сделал. сделал play , stop все работает но надо еще сделать так что бы аудио само начиналось. это сделал как document.querySelector(".play").click(); . когда на страницу заходишь по ссылке из другой страницы сайт все работает нормально а когда обновляешь не работает.
можете помочь решить эту проблему . спасибо.
class AudioMessage {
constructor(container, audioLink) {
this.audioLink = audioLink;
this.speed = 1;
this.elements = {};
this.elements.container = container;
this.elements.playToggle = container.querySelector('[data-play-toggle]');
this.elements.wave = container.querySelector('[data-wave]');
this.elements.time = container.querySelector('[data-time]');
this.elements.speedToggle = container.querySelector('[data-speed-toggle]');
this.wavesurfer = WaveSurfer.create({
container: this.elements.wave,
waveColor: '#E0E0E0',
progressColor: '#00D45D',
barWidth: 2,
barHeight: 3, // the height of the wave
barGap: 2,
height: 40,
cursorWidth: 0,
});
this.wavesurfer.load(this.audioLink);
this.wavesurfer.on('ready', () => {
this.setTime(this.wavesurfer.getDuration());
this.elements.playToggle.addEventListener('click', this.togglePlay.bind(this));
this.elements.speedToggle.addEventListener('click', this.toggleSpeed.bind(this));
this.wavesurfer.on('audioprocess', () => {
this.setTime(this.wavesurfer.getCurrentTime());
});
this.wavesurfer.on('seek', () => {
this.play();
});
});
}
togglePlay(state) {
this.elements.container.classList.toggle('AudioMessage--active');
this.wavesurfer.playPause();
}
play() {
this.elements.container.classList.add('AudioMessage--active');
this.wavesurfer.play();
}
toggleSpeed() {
this.speed += 0.5;
if (this.speed > 2) {
this.speed = 0.5;
}
this.wavesurfer.setPlaybackRate(this.speed);
this.updateSpeed();
}
setTime(seconds) {
const intSeconds = Math.trunc(seconds);
const padMinutes = String(div(intSeconds, 60)).padStart(2, '0');
const padSeconds = String(mod(intSeconds, 60)).padStart(2, '0');
this.elements.time.textContent = `${padMinutes}:${padSeconds}`;
}
updateSpeed() {
this.elements.speedToggle.textContent = `${this.speed}x`;
}
}
const messages = [];
document.querySelectorAll('[data-audio-message]').forEach((message) => {
let mess = new AudioMessage(message, audioGolos)
messages.push(mess);
});