1

waveform

Поставил на сайт waveform https://wavesurfer-js.org

Как сделать чтобы waveform каждый раз не рисовал график? Может есть возможность сохранять waveform как-нибудь, картинкой или координатами и тп?

Сейчас график из трека в 10мб рисуется примерно за 5сек.

1 ответ 1

0

Запустить воспроизведение и отснять скриншот графика. Потом его использовать в этом коде:

<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>

живой пример

Правда, цветовая схема пока получается другая - вместо тонкого курсора широкая полоса, правый край которой соответствует позиции курсора.

Статический ррафик

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.