2021年7月12日 星期一

[html, element] How to query an HTML element by id

How to query an HTML element by id 

井民全, Jing, mqjing@gmail.com

Why introduce this? Because I would like to render the audio wave and the spectrum (frequency bar) on a specified canvas on an HTML page. Basically, the id tag and the getElementById are used in this scenario by me.

Enjoy! 

by Jing.


File: index.html

...

<canvas id="canvas_1" width="600" height="300"></canvas>

<canvas id="canvas_2" width="600" height="300"></canvas>

...


File: index.ts

let canvas_1 = document.getElementById('canvas_1');

 let displayFrequencyBar:FrequencyBar = new FrequencyBar(this.context, canvas_1);

 this.source.connect(displayFrequencyBar.input); // [osc source] -> [the display intput]

 displayFrequencyBar.start();


let canvas_2 = document.getElementById('canvas_2');

...




Full Example
08-play-mp3-webpack-show-frequencybar
Source: github
at