Как подключить cache к wavesurfer-js?
Поставил на сайт waveform https://wavesurfer-js.org
Как сделать чтобы waveform каждый раз не рисовал график? Может есть возможность сохранять waveform как-нибудь, картинкой или координатами и тп?
Сейчас график из трека в 10мб рисуется примерно за 5сек.
Ответы (1 шт):
Автор решения: Опан
→ Ссылка
Запустить воспроизведение и отснять скриншот графика. Потом его использовать в этом коде:
<style>
body{
margin: 0;
padding: 0;
}
.myclass{
position: absolute;
top: 100px;
}
</style><br />
<audio id=audio src="http://tolmatux.strana.de/audio/razminka.mp3" controls></audio>
<br /><br />
<img id=myimg class=myclass src="http://opan.strana.de/wavesurfer/wave.jpg" /> <!-- график -->
<div id=mydiv class=myclass></div>
<script>
let myimgStyles = window.getComputedStyle(myimg),
iw = parseInt(myimgStyles.getPropertyValue('width'));
mydiv.style.height = myimgStyles.getPropertyValue('height');
mydiv.style.background = "rgba(0, 100, 0, 0.3)";
audio.ontimeupdate = function(){mydiv.style.width = audio.currentTime / audio.duration * iw + "px"};
myimg.onclick = mydiv.onclick = function(e){
mydiv.style.width = e.pageX + "px";
audio.currentTime = e.pageX / iw * audio.duration;
audio.play();
}
</script>Правда, цветовая схема пока получается другая - вместо тонкого курсора широкая полоса, правый край которой соответствует позиции курсора.
