음악, 삶, 개발
Waveform 을 그리기위해 고려해야할것들 + 도움되는 외국 글들 본문
< 소리에 관한 것들 >
https://stackoverflow.com/questions/26663494/algorithm-to-draw-waveform-from-audio
https://matt.aimonetti.net/posts/2015-12-audio-dsp-demystified-sampling/
https://matt.aimonetti.net/posts/2019-06-generating-waveform-data-audio-representation/
https://matt.aimonetti.net/posts/2019-07-drawing-waveforms-in-flutter/
https://github.com/bbc/audiowaveform
https://pudding.cool/2018/02/waveforms/
https://dev.opera.com/articles/drum-sounds-webaudio/
https://webaudioplayground.appspot.com
https://evan-moon.github.io/2019/07/10/javascript-audio-waveform/ <-- 한국분 정말 감사
https://runebook.dev/ko/docs/dom/web_audio_api/visualizations_with_web_audio_api
https://youtu.be/VC4GCpvIIOE <-- JUCE 튜토리얼이지만 매우 도움됨.
위의 글들을 살짝 요약하면,
10초짜리 wav 파일이 있다면, 44100 * 10 = 대략 44만개의 sample 인데,
이걸 다 그리는건 매우 부하가 큰 작업이므로 , 256개 샘플씩 쪼개서 (해상도를 더 원하면 128, 64 식으로 낮춤)
이 256개의 각 sample 값을 sum 해서 점프뛰면서 그려내는것이다.
따라서 10초짜리 샘플 (44만개) 였지만, 그리는것은 256개의 합들, 즉 44만개 / 256 이므로 대략 1700개 포인트이다.
해상도 256 은 분명 어느 wav 파일이든 다 적용되는 마법의 값이 아니라 파일의 길이에 따라 dynamic 하게 변해야할것이다.
매우 긴 파일 (1시간짜리) 이라면 해상도가 훨씬 길어야할것이다.
만약 매우 짧은 oneshot 의 소리라면 기껏해야 2초인데, 이걸 256 의 해상도로 그려내게되면 정확하지않을것이다.
이때는 적어도 128의 해상도, 눈으로 보고 더 낮춰야할수도있다. (zoom 을 땡기는 상황도 고려해서)
어쩃든 그려야하는 sample 의 갯수를 최대한 줄이면서, 눈으로 봤을때는 실제 소리를 왜곡하지않는 범위내에서
적절한 해상도를 찾아내야한다.
아마도 사용자가 드래그한 오디오 파일의 data 를 파싱하기위해서는 WebAudio 도 필요할것같다.
아니면 드래그한 파일의 파일경로만 webView 에서 드래그로 받아서 (흠 가능한가?),
이를 Max 로 쏜뒤에, Max 에서 data 를 summary 해서 buffer 에 저장하고,
다시 클라이언트로 socket.io 를 통해 쏴줘서 여기서 그리는 방법도 가능할것이다.
파형을 그리는건 어렵지않을거라 생각했는데, 이것저것 엮여있는 꽤나 복잡한 일이었다.
< PIXI 로 몇백만개의 선을 그리는것에 대한 이야기 - Mesh 에 대해서 알아야함>
