Merry Christmas!(일찌감치)
며칠 전 [React.js] LT 망년회라는 행사에서 리액트에서 Visual Equlizer를 제작해 발표했다.
LT라서 설명이 거의 안 돼요.
특히 음악의 시각화에 관해서 나는 거의 아무 말도 하지 않았기 때문에 여기까지 총결하였다.

데모

DnD 음악 파일을 시도해 보세요.소리에 맞춰 네온사인 같은 크리스마스 그림이 흔들리는 애니메이션.
최대한 조용한 곡을 택하는 게 좋을 것 같고, 개발할 때는 머라이어 캐리의 올 아이 워터 크리스토마스 isyou와 야마모토 다랑의 크리스마스 이브 같은 곳에서 한다.
애니메이션은 음악의 각 음역의 강도를 분석하여 수치화하여 이를 바탕으로 CSS에서 애니메이션을 제작한다.

참고 자료

웹 오디오 API를 사용하여 오디오 정렬기 만들기
제작할 때 이쪽 블로그를 참고하게 해 주세요.
짧은 사이즈에 필요한 샘플을 모두 넣어서 많이 배웠어요.

사용된 API

File API

음악 파일 읽기는 File API를 사용합니다.
보안 문제로 인해 사용자 작업을 시작으로 읽기만 허용됩니다.
Electron을 쓰면 헐렁하게 만들 수 있나요?

Web Audio API

부립엽 변환을 사용하여 소리를 해석하다.
고등학교 때 물리와 수학을 모두 10분가량 헤매던 나는 전혀 몰랐다.
JS에 Web Audio API가 있어서 정말 다행입니다.
AnalyserNode 레벨을 사용하여 부립엽 변환을 수행할 수 있습니다.
분석 결과 int를 저장한 배열이 되돌아옵니다. 이것을 사용하면 됩니다.

생활 양식

과장하여 파라미터를 조정하다

お　わ　び

懇親会でデータの間引きの説明をさせていただきましたが、よくよく検討したところ効果がありませんでした。

부립엽 분석 결과는 다음과 같다.
(그림은 스프레드시트 소프트웨어로 제작된 실제 결과에 가까운 그림)
좌저음 우고음.

고음역이 전혀 없다.
소리의 두께를 감안하면 저음역을 두껍게 하는 것이 이론이라고 생각하기 때문에 어쩔 수 없다
현재의 데이터에 따라 애니메이션을 제작해도 모호해진다.
과장된 표현을 위해 작은 숫자는 그렇고 큰 숫자는 더 커 보이면 된다.
단번에 생각하지 못했기 때문에 단순히 수치를 제곱했다.
예:
1 4 8
↓제곱

1 16 64

간단한 계산이지만 그에 상응하는 이완도 있다.
약간의 크기 변화가 과장된 애니메이션이 되었다.
하지만 이런 식으로 하면 후렴구 분위기가 뜨거워지면 시각적 변화는 사라진다.
개선해야 할 점.

프레임 속도 조정

이번에는 JavaScriptrequestAniamatinoFrame를 사용하여 순환합니다.
이 방법은 브라우저의 그리기 시간에 따라 교묘하게 처리할 수 있다
초당 60회(60FPS)에 제공된 매개변수가 실행됩니다.setTimeout 애니메이션의 경우와 비교하면 성능이 크게 다르다.
하지만 이 입도로 애니메이션을 하면 까다로워진다.
왜냐? 파형의 상상은 상상할 수 있기 때문에 소리의 진폭은 매우 작다.
따라서 12FPS와 5FPS 등음을 분석하는 빈도를 줄일 필요가 있다.
이 일대는 계수기를 적당히 준비해서 처리한 것이다.
그러나 간발이라도 천화가 한꺼번에 바뀌었을 뿐 좋은 인상의 애니메이션과는 거리가 먼 것 같다.
아마도 파형이 아래의 느낌을 형성했기 때문일 것이다.

CSS transsition을 사용한 줄

간헐성이 진행돼 틈이 뚜렷했다.
그에게 어느 시간에서 어느 시간까지의 유창한 다리를 주어야 한다.
CSS로 인한 줄 결과는 다음과 같습니다.
(붉은 선이 그은 물체)

진지하게 리액트로 이걸 쓰면 귀찮겠지만 CSS에 다 던져요.
축소 모서리에 곡선의 완급을 그려야 하는데 변화가 심한 비주얼 이큐라이저로 충분하다.

별이 반짝이는 표현

제작된 이미지에는 은하수와 같은 작은 별의 도형이 있다.
자주 표시하기 위해 소리가 비교적 자주 나오는 저음역 데이터를 사용했다.
앞에서 말한 바와 같이 저음은 기본적으로 폭발 상태이기 때문에 전혀 애니메이션을 하지 않는다
내 머릿속에 떠오르는 인상은 별의 반짝임, 즉 절체절명의 애니메이션이 되고 싶어 랜덤 수로 간을 맞추면 흔들린다는 것이다.
순수한 산호는 매우 활발하다.

Math.Random() * Math.Random() * Math.Random() * Math.Random() * Math.Random() / 5;

데이터에서 이걸 빼면

향후의 전망

제작을 추진하면서 금방 부족함을 느끼기 시작했다.

음색 분석

애니메이션의 불확정 요소 추가

나는 이 두 가지를 실현하고 싶다.

음색 해석

각 악기의 소리를 분해해 활용하려는 것이다.
만약 사실이라면 저음 드럼에 새겨진 4분 음표에 맞춰 영상에 흔들리고 싶어
베이스에 잘 섞여서 리듬을 잡을 수가 없어요.
상세한 상황은 전문가에게 맡기고 싶지만, 말하자면
소리는 여러 음역(소리의 높이)이 혼합되어 이루어진 것이다.
하나의 소리는 두 가지 소리, 즉 기음과 배음으로 나눌 수 있다.
기음은 그 소리의 높이를 결정하고 배음에 따라 음색의 변화를 어떻게 포함하는가를 결정한다.
주제 밖의 말을 좀 하면 일반적으로 배음이 많을수록 소리가 풍부해진다.
배음의 구성 도형을 분석하면 특정한 악기가 학습하는 소리가 특정될 수 있다고 생각합니다.
다만, 나는 이것이 실시간으로 처리하기 어렵다고 제멋대로 상상했다
재생 전에 음악에 포함된 구성 모델을 추출한 다음에 이를 기초로 한다
나는 한 음악에서 특정 악기의 발음을 분석할 수 있다고 생각한다.
할 수 있겠습니까?^^;

애니메이션 불확정 요소 추가

조화로운 애니메이션을 예약하는 것도 괜찮지만, 코드로 표현하기는 어렵다.
매번 실행할 때마다 새로운 발견을 창조할 수 있기를 바란다.
이번 랜덤 요소는 별하늘의 표현에만 사용되기 때문에 불확정 요소를 위주로 표현을 고려하고 싶습니다.
어떤 규칙에 따라 음악의 자극을 받아 자율적으로 시각을 바꾸는 것이 재미있다고 생각한다.

총결산

다시 정리해보니 아랑곳없는 처리가 많아 아쉬웠다.
(이 총결산은 깎은 것이다.)
Visual Equlizer는 이번이 처음인 만큼 계속 긁어내려고 한다.
또한 이러한 프로그래밍을 통해 시각을 표현하는 입문으로서
"Generative Alto Processing 의 실무 지침"
아주 추천합니다.
삼각함수의 멋을 실감할 수 있다.수학을 못해도 돼요.
다시 생각해보면 리액트랑 전혀 상관없다고 생각한 적 없어