My challenge is to create my own mp3 player. I use a new FileReader() to read the data and place it in the buffer using readAsArrayBuffer. After several steps of data filtering I get an array of size 48000 whose data looks like this: audioData = [0.0000020824058278510676, 0.0000063222987882277585, 0.0000071012005629633086, 0.000008669362045955339, 0.00001136996938228128...]I have difficulties with data visualization, namely using d3.js technology. I would like to get such a result, but while my attempts look dull, I won’t attach them. I'd like to get something like this:enter image description here
parent = document.getElementById("waveContainer")clientWidth = 30%clientHeight = 300px
class WaveForm{ private buffer: AudioBuffer private parent: HTMLElement constructor(buffer: AudioBuffer, parent: HTMLElement) { this.buffer = buffer this.parent = parent } public generateWaveform( audioData: number[], options: IOptions ) { const { margin = { top: 0, bottom: 0, left: 0, right: 0 }, height = this.parent.clientHeight, width = this.parent.clientWidth, padding = 1, } = options; const svg = d3.create("svg"); return svg; }}
