audio analyser
Try it out here: https://book-of-coding.com/build_projects.html
Not all browsers support these new APIs. Some display it differently, it works best on Firefox.
In order to be able to retrieve the output directly from the sound card, i.e. not via the microphone, a setting must be made. For Realtek: "Stereo mix" must be set for "Recording" in the sound settings. Otherwise it will only work via the microphone.
- You can find an introduction to WebAPIs here:
https://book-of-coding.com/js4.html#lec-D-js
- An explanation of the APIs used here can be found here:
createAnalyser :
https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/createAnalyser
getByteFrequencyData :
https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/getByteFrequencyData
getUserMedia :
https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
createMediaStreamSource :
https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createMediaStreamSource
playbackRate :
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate
Preview: