Как можно создать статическую визуализацию аудио файла?

Question

То есть хочу сделать как во многих мессенджерах у голосовых сообщений. Заходишь в чат, а там уже видна дорожка с частотами, которая не меняется. Нагуглить ничего не смог. Желательно решение без библиотек.

Answer 1

#mydiv{
    background: rgba(255,255,100,0.6);
    width: 300px;
    height: 150px;
    position: absolute;
    left: 0px;
    top: 50px;
    border-style: solid;
    border-width: 0px;
    left-margin: 0px;
    margin: 0%;
    cursor: pointer;
    border-radius: 10px;
}
#mycanvas{
    background: rgba(255,255,100,1);
    width: 300px;
    height: 150px;
    position: absolute;
    left: 0px;
    top: 50px;
    border-style: solid;
    border-width: 1px;
    left-margin: 0px;
    margin: 0%;
    cursor: pointer;
    border-radius: 10px;
}
#btn{
    width: 100px;
    border-radius: 10px;
    cursor: pointer;
}

<body bgcolor=black>
<audio id=audio></audio><br><br>
<center><div style="position: absolute">
<canvas id=mycanvas></canvas>
<div id=mydiv></div>
</div></center>
<button id=btn disabled> play </button>
<script>
var vr = 75;
mydiv.onmousedown = mycanvas.onmousedown = function(e){
    mydiv.style.width = e.pageX + "px";
    audio.currentTime = e.pageX * audio.duration / 300;
}
mydiv.ondblclick = mycanvas.ondblclick = function(){
    audio.play();
    btn.innerText = "stop";
}
audio.onended = function(){
    mydiv.style.width = "0px";
    btn.innerText = "play";
}
btn.onclick = function(){
    if(audio.paused){
        audio.play();
        btn.innerText = "stop";
    }else{
        audio.pause();
        btn.innerText = "play";
    }
}
var ctx = mycanvas.getContext("2d");
var samples = [[], []]; // массив, в котором будут семплы обработанного аудио
var f = 0.15; // частота выделения (в пределах от 0 до 1) в данном случае около двух килогерц.
var q = 0.95; // степень резонанса (в пределах от 0 до 1)
var volume = 5000; // громкость. нужно подбирать, учитывая подъём выделенной частоты
var titlestring = decodeURIComponent(escape(window.atob("UklGRgAAAABXQVZFZm10IBAAAAABAAIARMKsAAAQwrECAAQAEABkYXRh")));
var title = [];
for(i = 0; i < titlestring.length; i++)title[i] = titlestring.charCodeAt(i);
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var source = audioCtx.createBufferSource();
var xhttp = new XMLHttpRequest();
xhttp.responseType = "blob";
xhttp.onload = function() {
    if (this.readyState == 4 && this.status == 200) {
    btn.disabled = false;
    var reader = new FileReader();
    reader.readAsArrayBuffer(this.response);
    reader.onload = function(e){
        audioCtx.decodeAudioData(e.target.result, function(buffer){
            var data_L = buffer.getChannelData(0); // получаем семплы
            var data_R = buffer.getChannelData(0); // аудиофайла с помощью Web Audio API
            ctx.fillStyle = "#811";
            for(i=0; i < data_L.length; i++){
                samples[0][i] = data_L[i] * volume;
                samples[1][i] = data_R[i] * volume;
                ctx.fillRect(i*mycanvas.width/data_L.length, 75 + data_L[i] * 75, 1, 1);
            }
            ctx.fillStyle = "#811";
            var outfile = new Int16Array(title.length / 2 + samples[0].length * 2);
            for(i=0; i < title.length; i += 2)outfile[i / 2] = title[i] + title[i + 1] * 256;
            for(i=0; i < samples[0].length * 2; i++){
                outfile[i * 2 + 44] = samples[0][i];
                outfile[i * 2 + 45] = samples[1][i];
            }
            audio.src = URL.createObjectURL(new Blob([outfile]));
            audio.currentTime = 0;
        });
        setInterval(function(){
            mydiv.style.width = audio.currentTime / audio.duration * 300 + "px";
        }, 30);
    }
    }
};
xhttp.open("get", "http://tolmatux.strana.de/1.wav", true);
xhttp.send();
audio.onended = function(){this.currentTime = 0};
</script>
</body>

БЛОГ НА HUSL

Как можно создать статическую визуализацию аудио файла?

Ответы (1 шт):