내 사이트를 위한 메트로놈과 튜너
사이트에 메트로놈을 넣으려면 아래에서 옵션을 고르고 “코드 복사”를 탭한 뒤, 코드를 페이지의 HTML 블록에 붙여 넣으세요. 튜너도 같은 방법이에요. 무료이고, 가입이 필요 없고, 위젯에는 광고가 없어요.
위젯 만들기
미리보기
위젯 아래의 링크는 MetronoTuner 사이트로 연결돼요. 없애도 되지만, 프로젝트가 계속 무료로 운영되는 데 도움이 돼요.
내 사이트에 넣는 법
위의 생성기에서 코드를 복사해 사용하는 플랫폼에 붙여 넣으세요:
WordPress
- 편집기에서 페이지나 글을 엽니다.
- + 를 탭하고 “사용자 정의 HTML” 블록을 고릅니다.
- 코드를 붙여 넣고 게시합니다.
Wix
- 편집기에서 “요소 추가”(+) › “코드 삽입” › “HTML 삽입”을 탭합니다.
- “코드”를 고르고 붙여 넣은 뒤 “업데이트”를 탭합니다.
- 위젯이 전부 보일 때까지 상자를 키웁니다.
Blogger
- 글 편집기에서 “HTML 보기”로 바꿉니다.
- 위젯이 나올 자리에 코드를 붙여 넣고 일반 보기로 돌아옵니다.
- 사이드바에 넣으려면: “레이아웃” › “가젯 추가” › “HTML/JavaScript”.
Notion
- 여기서 “주소만 복사”를 탭합니다(Notion은 HTML 코드를 받지 않아요).
- Notion 페이지에서 /embed 를 입력하고 “임베드”를 고릅니다.
- 주소를 붙여 넣고 확인합니다.
HTML
- 페이지에서 위젯이 나올 위치의 <body> 안에 코드를 붙여 넣습니다.
- 위젯은 쓸 수 있는 너비를 채우되, 코드에 정해진 최대 너비까지만 커져요.
코드를 직접 고치고 싶은 분께
위젯 주소는 다음 매개변수를 받으며 모든 언어에서 같아요(이름과 값은 번역하지 않고 그대로 써요):
-
bpm - 메트로놈의 템포, 30에서 250까지. 예:
bpm=90 -
compasso - 박자와 악센트 묶음. 예:
compasso=7/8:2+2+3 -
instrumento - 튜너의 악기(없으면 크로매틱 튜너). 예:
instrumento=ukulele -
afinacao - 악기의 튜닝(없으면 표준). 예:
afinacao=drop-d -
tema - claro(밝게), escuro(어둡게), auto(기기를 따라감). 예:
tema=escuro -
tamanho - compacto(간단히)는 꼭 필요한 것만 보여 줘요. 예:
tamanho=compacto -
fundo - transparente를 쓰면 내 사이트의 배경이 비쳐 보여요. 예:
fundo=transparente
전체 도구
자주 묻는 질문
위젯은 무료인가요?
네. 블로그, 선생님·학교·밴드의 사이트 등 어떤 사이트에서도 쓸 수 있어요. 위젯에는 광고가 없고 계정도 필요 없어요.
휴대폰에서도 작동하나요?
네. 위젯은 화면 너비에 맞게 조절되며, 휴대폰, 태블릿, 컴퓨터의 브라우저에서 작동해요.
가입이 필요한가요?
아니요. 코드를 복사해서 사이트에 붙여 넣기만 하면 돼요. 계정도, 키도, 로그인도 없어요.
위젯 안에서 마이크가 작동하나요?
네, 튜너에서요. 코드에 이미 allow="microphone"이 들어 있어서 iframe 안에서 마이크를 쓸 수 있고, 처음에는 브라우저가 방문자에게 사용해도 되는지 물어요. 소리는 기기에서 분석되며 녹음되거나 전송되지 않아요. 사이트는 HTTPS여야 해요. Wix나 Notion처럼 코드를 또 다른 프레임 안에 넣는 플랫폼에서는 브라우저가 마이크를 막을 수 있어요.
색을 바꿀 수 있나요?
밝게, 어둡게, 또는 방문자의 기기를 따라가는 자동 테마를 고를 수 있고, 배경을 투명하게 해서 위젯이 내 사이트에 자연스럽게 섞이게 할 수도 있어요. 버튼 색은 MetronoTuner의 색이에요.
위젯 때문에 내 사이트가 느려지나요?
아니요. 코드는 loading="lazy"를 써서, 위젯이 화면 가까이 올 때만 불러와요. 소리와 마이크 분석은 방문자의 기기에서 돌아가요.